Chat

Download Chat Module
Version 1.5

This module is designed to create a chat page easily and in less time-consuming. You can use this module like below.

var chat = new Chat(jTarget, options);
Parameters Type Description
jTarget String This argument is jQuery or selector to render the context of chat page.
options Object Optional. This argument has several items that we should set in the module.

options: Here we will explain options of chat module in the below:

Parameters Type Description
voice Boolean This section is for sending and receiving voice. If you want to have a voice in chat, you set it true, otherwise, don't write voice option which by default is false.
image Boolean This section is for sending and receiving images. Set it true, If you want to use that. Otherwise, don't write this section.
file Boolean This section is for sending and receiving images. Set it true, If you want to use that. Otherwise, don't write this section.
audiencesPath String This is path of users' chats in CloadIO. The data of chat will be stored in this specific path. If you have not set a path, the default path is 'clients'.
onInitialized Function This event is used to initiate and render default content of chat page. When page is initialized and HTML is rendered, other events can be called and used. The order is important. You can customize your field here.
ochr Function This word stands for on conversation header rendered. This is used when we want to custom list of created chats. This has four parameters. The first parameter refers to key of conversation, the second parameter refers to properties of conversation, the third part is jQuery or selector of conversation and the last one is options, which include last message and user information.
onConversationRendered Function This event is used when we want to customize our chat when conversation is rendered. This has three parameters. The first parameter refers to key of conversation, the second parameter refers to properties of conversation and the last one is information of user.
onMessageRendered Function This event is used when we want to customize messages when every message is rendered. This has three parameters. The first parameter refers to key of message, the second parameter refers to message properties and the last one is jQuery or selector of message content.

Methods: The chat module has two important methods.

Parameters Type Description
renderConversation Function It is for rendering private conversations between users. The syntax of using this event is like below:
chat.renderConversation(to, conversationHeaderKey);
It has two arguments, the first refers to goal user that we want to chat with, and the next argument is refers to conversation key.
renderConversationHeaders Function It is for rendering all conversations between users. The syntax of using this event is like below:
chat.renderConversationHeaders();

Example

Here we have defined a chat by some options. Notice that all events are optional.

Write this codes in index.html as follow:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>FrameworkJS</title>

        <link rel="stylesheet" type="text/css" href="lib/framework.css">

        <!-- add your modules styles here -->
        <!-- <link rel="stylesheet" type="text/css" href="modules/" /> -->
        <link rel="stylesheet" type="text/css" href="modules/chat/css/common.css" >

        <!-- add your page styles here -->
        <!-- <link rel="stylesheet" type="text/css" href="css/"> -->
        <link rel="stylesheet" type="text/css" href="css/home.css">
        <link rel="stylesheet" type="text/css" href="css/chat.css">
    </head>
    <body>
        <div class="page home">
            <h1>Hello world!</h1>
            <div class="button" key="save"><div>
            <div class="button" key="edit"><div> 
        </div>
        <div class="page chat"></div>
    </body>
    <script src="lib/cloadio.min.js"></script>
    <script src="lib/jquery-2.2.0.min.js"></script>
    <script src="lib/framework-a.min.js"></script>
    <script src="lib/framework-b.min.js"></script>
    <script src="js/app.js"></script>

    <!-- add your module scripts here -->
    <!-- <script src="modules/"><script> -->
    <script src="modules/chat/js/script.js"></script>

    <!-- add your page scripts here -->
    <!-- <script src="js/"></script> -->
    <script src="js/home.js"></script>
    <script src="js/chat.js"></script>
</html>

Write the following codes in chat.js:

var chat = new Chat($('.page.chat'), {
    voice: true,
    image: true,
    file: true,
    audiencesPath: 'example',
    onInitialized: function () {
        // you can customize your field here
    },
    ochr: function (conversationHeaderKey, conversationHeader, jConversationHeader, options) {
        // you can customize your field here
    },
    onConversationRendered: function (conversationHeaderKey, conversationHeader, options) {
        // you can customize your field here
    },
    onMessageRendered: function (messageKey, message, jMessage) {
        // you can customize your field here
    }
});
chat.renderConversation();