Различия
Здесь показаны различия между двумя версиями данной страницы.
comet:simple-chat-example [2015/09/10 15:47] levhav [Весь код примера:] |
comet:simple-chat-example [2019/12/18 01:58] |
||
---|---|---|---|
Строка 1: | Строка 1: | ||
- | ====== Пример Realtime чата ====== | ||
- | |||
- | В этой статье будет рассмотрен пример простого чата между пользователями. Для реализации чата не потребуется использование серверной стороны, в этой статье всё только на JavaScript. Живой пример работы можно наблюдать в конце статьи. | ||
- | |||
- | ====== Принцип организации чата ====== | ||
- | |||
- | * Все сообщения от всех пользователей отправляются в общий канал 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> | ||
- | <iframe src="//comet-server.ru/doc/CometQL/MainPageChat/index.php" style="width: 100%; display: block; height: 250px;"></iframe> | ||
- | </html> | ||
- | |||
- | ===== История сообщений для чата ===== | ||
- | |||
- | Можно до 99 последних сообщений чата загружать из истории комет сервера. | ||
- | Для включения сохранения истории сообщений в канале чата надо выполнить CometQL запрос в online командной строке для CometQL на странице в разделе Real time monitor. | ||
- | <code sql> | ||
- | INSERT INTO pipes_settings (name, length) VALUES ('web_chat_pipe', 10); | ||
- | </code> | ||
- | |||
- | <note important>Обратите внимание на разницу в командной строке CometQL: на страницах с документацией демо доступ для dev_id = 15 а в разделе Real time monitor командная строка для управления вашим личным dev_id </note> | ||
- | |||