Различия
Здесь показаны различия между двумя версиями данной страницы.
|
comet:simple-chat-example [2017/11/13 02:31] levhav |
comet:simple-chat-example [2019/12/18 01:58] |
||
|---|---|---|---|
| Строка 1: | Строка 1: | ||
| - | <rst>RU::12-Примеры::Пример Realtime чата</rst> | ||
| - | <rst>Header: Пример Realtime чата</rst> | ||
| - | ====== Пример Realtime чата ====== | ||
| - | |||
| - | В этой статье будет рассмотрен пример простого чата между пользователями. Для реализации чата не потребуется использование серверной стороны, в этой статье всё только на JavaScript. Живой пример работы можно наблюдать в конце статьи. | ||
| - | |||
| - | <note>В данной статье рассматривается вопрос создания чата где все пользователи общаются в одной общей комнате. Если вам нужен чат для личного общения пользователей между собой (общение в диалогах один на один) то вам больше подойдёт [[comet:star-comet-chat|чат плагин личной переписки между пользователями]]</note> | ||
| - | ====== Принцип организации чата ====== | ||
| - | |||
| - | * Все сообщения от всех пользователей отправляются в общий канал web_chat_pipe. | ||
| - | * Структура сообщения содержит в себе текст сообщения и имя отправившего это сообщение. | ||
| - | * Все пользователи участвующие в чате подписаны на канал чата. И полученные из него сообщения отображаются в ленте общения. | ||
| - | * В момент отправки мы сохраняем текущее время в переменную timer, а в момент получения отчёта о доставке сообщения определяем сколько было затрачено времени. | ||
| - | |||
| - | ====== Весь код примера: ====== | ||
| - | Полностью исходный код чата web_chat.js | ||
| - | <file JavaScript web_chat.js> | ||
| - | var timer = new Date(); | ||
| - | function web_send_msg() | ||
| - | { | ||
| - | // Получение значений из элементов ввода. | ||
| - | var text = $("#WebChatTextID").val(); | ||
| - | var name = $("#WebChatNameID").val(); | ||
| - | | ||
| - | // Очистка формы | ||
| - | $("#WebChatTextID").val(""); | ||
| - | | ||
| - | // Зпишем время в момент отправки сообщения | ||
| - | timer = new Date(); | ||
| - | | ||
| - | // Добавление отправленного сообщения к списку сообщений. | ||
| - | //$("#WebChatFormForm").append("<p><b>"+HtmlEncode(name)+": </b>"+HtmlEncode(text)+"</p>"); | ||
| - | | ||
| - | // Отправка сообщения в канал чата | ||
| - | CometServer().web_pipe_send("web_chat_pipe", {"text":text, "name":name}); | ||
| - | | ||
| - | // Уведомим остальные вкладки о том что мы добавили сообщение в чат | ||
| - | comet_server_signal().send_emit("AddToChat", {"text":text, "name":name}) | ||
| - | } | ||
| - | |||
| - | |||
| - | // Функция выполнится в после загрузки страницы | ||
| - | $(document).ready(function() | ||
| - | { | ||
| - | // Создание формы для чата. Вёрстка. | ||
| - | var html = "<div style=\"border: 1px solid #ccc;padding:10px;\" >" | ||
| - | + "<div id=\"WebChatFormForm\" style=\"max-width: 600px;overflow: auto;max-height: 900px;\"></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;\" ></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>"; | ||
| - | $("#web_chat_holder").html(html); | ||
| - | |||
| - | // Подписываемся на канал в который и будут отпавлятся сообщения чата. | ||
| - | 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); | ||
| - | }); | ||
| - | |||
| - | // Загружаем историю сообщений | ||
| - | CometServer().get_pipe_log("web_chat_pipe"); | ||
| - | }); | ||
| - | |||
| - | |||
| - | function HtmlEncode(s) | ||
| - | { | ||
| - | var el = document.createElement("div"); | ||
| - | el.innerText = el.textContent = s; | ||
| - | s = el.innerHTML; | ||
| - | return s; | ||
| - | } | ||
| - | </file> | ||
| - | Следует отметить что сообщения от правленые в канал приходят всем кроме того к отправил это сообщение, ему приходит отчёт о доставке либо уведомление об ошибке. | ||
| - | |||
| - | Отчёт о доставке содержит количество человек получивших сообщение. То есть если на канал было подписано два человека и один из них отправил сообщение в этот канал то в отчёте количество получателей будет 1. А если на канал был подписан только один человек и он же отправил сообщение в этот канал в отчёте будет указан 0. | ||
| - | |||
| - | <html> | ||
| - | |||
| - | <p data-height="512" data-theme-id="0" data-slug-hash="yPgddg" data-default-tab="result" data-user="Levhav" data-embed-version="2" data-pen-title="CppComet chat example" class="codepen">See the Pen <a href="https://codepen.io/Levhav/pen/yPgddg/">CppComet chat example</a> by Trapenok Victor (<a href="https://codepen.io/Levhav">@Levhav</a>) on <a href="https://codepen.io">CodePen</a>.</p> | ||
| - | <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> | ||
| - | |||
| - | </html> | ||
| - | |||
| - | ===== История сообщений для чата ===== | ||
| - | |||
| - | Можно до 99 последних сообщений чата загружать из истории комет сервера. | ||
| - | Для включения сохранения истории сообщений в канале чата надо выполнить CometQL запрос в online командной строке для CometQL на странице в разделе Real time monitor. | ||
| - | <code sql> | ||
| - | INSERT INTO pipes_settings ('name', 'length') VALUES ('web_chat_pipe', 10); | ||
| - | </code> | ||
| - | |||
| - | ==== Очищение истории сообщений чата ==== | ||
| - | |||
| - | Для очищения истории сообщений в чате надо выполнить CometQL запрос в online командной строке для CometQL на странице в разделе Real time monitor. | ||
| - | <code sql> | ||
| - | DELETE FROM pipes_messages WHERE name = 'web_chat_pipe'; | ||
| - | </code> | ||
| - | |||
| - | <note important>Обратите внимание на разницу в командной строке CometQL: на страницах с документацией демо доступ для dev_id = 15 а в разделе Real time monitor командная строка для управления вашим личным dev_id</note> | ||
| - | |||
| - | ===== Примечания ===== | ||
| - | |||
| - | <note tip>Если вы захотите указать другое имя канала для работы чата то учтите что из Javascript api можно отправлять сообщения только в каналы начинающиеся с web_ Более подробно об этом смотрите в [[comet:javascript_api#зарезервированные_имена_каналов|JavaScript API - зарезервированные_имена_каналов]]</note> | ||