Create a simple Realtime chat.

This article will look at an example of a simple chat between users where all users communicate in one common room. Chat will be created using comets saas service . To implement the chat, you will not need to write server code, instead the api of the comets of the server will be used.

The principle of the organization of the chat

All messages from all users are sent to the public channel named web_chat_pipe.
The message structure contains the message text and the name of the person who sent the message.
All users participating in the chat are subscribed to the chat channel. And the messages received from it are displayed in the communication tape.
At the time of sending, we save the current time in the timer variable, and at the time of receiving the report on the delivery of the message, we determine how much time was spent.

All example code:

Chat layout

<div style="border: 1px solid #ccc;padding:10px;"> <div id="WebChatFormForm" style="overflow: auto;max-height: 100px;"></div> <input type="text" id="WebChatNameID" style="margin-top:10px;" placeholder="  ..."> <div id="answer_div" style="float:right;"></div> <textarea id="WebChatTextID" placeholder="   online ..." style="max-width: 600px;max-height: 100px;width: 600px;margin-top:10px;display: block;"></textarea> <div style="margin-bottom: 0px;margin-top: 10px;"> <input type="button" style="width: 220px;" onclick="web_send_msg();" value=""> <div id="answer_error" style="float:right;"></div> </div> </div>

Fully chat source code. ( demo )

 var timer = new Date(); function web_send_msg() { //     . var text = $("#WebChatTextID").val(); var name = $("#WebChatNameID").val(); //   $("#WebChatTextID").val(""); //       timer = new Date(); //      CometServer().web_pipe_send("web_chat_pipe", {"text":text, "name":name}); //            comet_server_signal().send_emit("AddToChat", {"text":text, "name":name}) } //       $(document).ready(function() { //          . CometServer().subscription("web_chat_pipe", function(msg){ console.log(["msg", msg]); //      . $("#WebChatFormForm").append("<p><b>"+HtmlEncode(msg.data.name)+": </b>"+HtmlEncode(msg.data.text)+"</p>"); }); //        ,          //              comet_server_signal().connect("AddToChat", function(msg){ console.log(["msg", msg]); //      . $("#WebChatFormForm").append("<p><b>"+HtmlEncode(msg.name)+": </b>"+HtmlEncode(msg.text)+"</p>"); }); //             . CometServer().subscription("#web_chat_pipe", function(p) { //          var etime = new Date(); console.log(["answer_to_web_chat_pipe", p]); $("#answer_div").html("  "+p.data.number_messages+"   "+ (etime.getTime() - timer.getTime() )+"ms"); $("#answer_error").html(" "+p.data.error); }); }); function HtmlEncode(s) { var el = document.createElement("div"); el.innerText = el.textContent = s; s = el.innerHTML; return s; }

It should be noted that messages from those sent to the channel come to everyone besides sent this message, it receives a delivery report or an error notification.

The delivery report contains the number of people who received the message. That is, if two people were subscribed to the channel and one of them sent a message to this channel, then the number of recipients in the report would be 1. And if only one person was subscribed to the channel and he also sent a message to this channel, the report will indicate 0.
')

More examples

There are more examples of chats created using the service comet-server.ru

Chat with authorization - is a further development of this chat with the addition of authorization
Chat of personal communication between users - ready-made chat module for chatting in dialogs (one on one)

Source: https://habr.com/ru/post/272817/

All Articles

Create a simple Realtime chat.

The principle of the organization of the chat

All example code:

More examples

More articles: