Pull to refresh
0
Star.Comet
SaaS comet сервис

Создаём простой Realtime чат

Reading time 3 min
Views 5.2K
В этой статье будет рассмотрен пример простого чата между пользователями где все пользователи общаются в одной общей комнате. Чат будет создан с использованием saas комет сервиса. Для реализации чата не потребуется написания серверного кода, вместо этого будет использовано api комет сервера.

Принцип организации чата


  • Все сообщения от всех пользователей отправляются в общий канал с именем web_chat_pipe.
  • Структура сообщения содержит в себе текст сообщения и имя отправившего это сообщение.
  • Все пользователи участвующие в чате подписаны на канал чата. И полученные из него сообщения отображаются в ленте общения.
  • В момент отправки мы сохраняем текущее время в переменную timer, а в момент получения отчёта о доставке сообщения определяем сколько было затрачено времени.

Весь код примера:


Вёрстка для чата
<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>



Полностью исходный код чата. (демо)
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;
}

Следует отметить что сообщения от правленые в канал приходят всем кроме того к отправил это сообщение, ему приходит отчёт о доставке либо уведомление об ошибке.

Отчёт о доставке содержит количество человек получивших сообщение. То есть если на канал было подписано два человека и один из них отправил сообщение в этот канал то в отчёте количество получателей будет 1. А если на канал был подписан только один человек и он же отправил сообщение в этот канал в отчёте будет указан 0.

Ещё примеры



Есть ещё примеры чатов созданных с использованием сервиса comet-server.ru
  • Чат с авторизацией — представляет из себя дальнейшее развитие этого чата с добавлением авторизации
  • Чат личного общения пользователей между собой — готовый модуль чата для общение в диалогах ( один на один)
Tags:
Hubs:
0
Comments 0
Comments Leave a comment

Articles

Information

Website
comet-server.ru
Registered
Founded
Employees
1 employee (me only)
Location
Россия