Различия

Здесь показаны различия между двумя версиями данной страницы.

--- comet:chat-with-authorization [2017/07/16 16:56]
levhav
+++ comet:chat-with-authorization [2019/12/18 01:58] (текущий)
@@ Строка 1: / Строка 1: @@
 <rst>RU::12-Примеры::Как сделать чат</rst>
+<rst>Header: Как сделать чат с авторизацией</rst>
 ====== Как сделать чат ======
-В данной статье рассмотрим как сделать чат с авторизацией на php с использованием комет сервера. Наш php chat будет работать по технологии websocket. Для связи php с websocket сервером надо использовать php comet api.
+В данной статье рассмотрим, как сделать чат с авторизацией на php с использованием комет сервера. Наш php chat будет работать по технологии websocket. Для связи php с websocket сервером надо использовать php comet api.
 Первый пример это html скрипт чата для сайта, он будет работать без регистрации пользователей и легко вставится в любую html страницу. Мы его рассмотрим первым по тому что это наиболее простой пример чата использующего комет сервер, а затем на его основе напишем чат для сайта на php с авторизацией пользователей в чате и уведомлениями о входе и выходе пользователей.
-<note>В данной статье рассматривается вопрос создания чата где все пользователи общаются в одной общей комнате. Если вам нужен чат для личного общения пользователей между собой (общение в диалогах один на один) то вам больше подойдёт [[comet:star-comet-chat|чат плагин личной переписки между пользователями]]</note>
+<note>В данной статье рассматривается вопрос создания чата, где все пользователи общаются в одной общей комнате. Если вам нужен чат для личного общения пользователей между собой (общение в диалогах один на один), то вам больше подойдёт [[comet:star-comet-chat|чат плагин личной переписки между пользователями]]</note>
 ====== Пример создания простейшего чата на php ======
 Первое в чём следует разобраться что такое каналы (pipe) в комет сервере. Канал это именованный поток сообщений, в который можно самому отправлять сообщения и можно подписаться на те сообщения которые туда отправляются кем то другим.
-Если рассматривать наиболее простой скрипт чата для сайта то нам понадобится всего один канал. Все участники подписываются на сообщения из этого канала, а для добавления сообщения в чат просто отправляем сообщение в канал.
+Если рассматривать наиболее простой скрипт чата для сайта, то нам понадобится всего один канал. Все участники подписываются на сообщения из этого канала, а для добавления сообщения в чат просто отправляем сообщение в канал.
 Вот принцип работы простого чата для сайта
@@ Строка 19: / Строка 20: @@
 **Примечание:** В примерах будет использована библиотека JQuery.
-Сначала разберём как работает простой скрипт онлайн чата. Приведу сразу весь код а потом разберём его подробно.
+Сначала разберём как работает простой скрипт онлайн чата. Приведу сразу весь код, а потом разберём его подробно.
-Первое что надо отметить это то что в данном чате люди общаются используя только лишь комет сервер. Это имеет ряд недостатков делающий из чата скорее прощёную учебную модель.
+Первое что надо отметить это то что в данном чате люди общаются, используя только лишь комет сервер. Это имеет ряд недостатков, делающий из чата скорее прощёную учебную модель.
 Недостатки:
@@ Строка 44: / Строка 45: @@
     <script>
+         // вырезает html теги
+         function strip(html)
+         {
+             var tmp = document.createElement("DIV");
+             tmp.innerHTML = html;
+             return tmp.textContent || tmp.innerText || "";
+         }
          // Отправляет сообщение в чат
          function web_send_msg()
@@ Строка 55: / Строка 64: @@
              // Добавление отправленного сообщения к списку сообщений.
-             $("#WebChatFormForm").append("<p><b>"+name+": </b>"+text+"</p>");
+             $("#WebChatFormForm").append("<p><b>"+strip(name)+": </b>"+text+"</p>");
              // Отправка сообщения в канал чата
@@ Строка 72: / Строка 81: @@
                 console.log(msg)
                  // Добавление полученного сообщения к списку сообщений.
-                 $("#WebChatFormForm").append("<p><b>"+msg.data.name+": </b>"+msg.data.text+"</p>");
+                 $("#WebChatFormForm").append("<p><b>"+strip(msg.data.name)+": </b>"+msg.data.text+"</p>");
-             });
-             // Подписываемся на канал в который и будут отправляться уведомления о доставке отправленных сообщений.
-             CometServer().subscription("#web_chat_pipe", function(p)
-             {
-                console.log(p)
-                 $("#answer_div").html("Сообщение доставлено "+p.data.number_messages+" получателям. "+p.data.error);
              });
          });
@@ Строка 95: / Строка 97: @@
 Функция web_send_msg отправляет сообщение в чат.
 <code JavaScript>
+     // вырезает html теги
+     function strip(html)
+     {
+         var tmp = document.createElement("DIV");
+         tmp.innerHTML = html;
+         return tmp.textContent || tmp.innerText || "";
+     }
      function web_send_msg()
      {
@@ Строка 105: / Строка 115: @@
          // Добавление отправленного сообщения в свой список сообщений.
-         $("#WebChatFormForm").append(">p<>b<"+name+": >/b<"+text+">/p<");
+         $("#WebChatFormForm").append("<p><b>"+strip(name)+": </b>"+strip(text)+"</p>");
          // Отправка сообщения в канал чата.
@@ Строка 111: / Строка 121: @@
      }
 </code>
-Здесь можно уточнить что строка: $("#WebChatFormForm").append("<p><b>"+name+": </b>"+text+"</p>"); добавляет напечатанное сообщение в нашу чат ленту, так чтоб потом было удобно перечитывать сообщения.
+Здесь можно уточнить что строка: $("#WebChatFormForm").append("<p><b>"+strip(name)+": </b>"+strip(text)+"</p>"); добавляет напечатанное сообщение в нашу чат ленту, так чтоб потом было удобно перечитывать сообщения.
 А вот вызов CometServer().web_pipe_send("web_chat_pipe", {"text":text, "name":name}); производит непосредственно отправку нашего сообщения всем остальным участникам онлайн чата. Первый аргумент это имя канала в который мы отправим сообщение. Второй аргумент это само сообщение, содержащие имя отправителя и текст сообщения.
@@ Строка 130: / Строка 140: @@
      {
          // Добавление полученного сообщения к списку сообщений.
-         $("#WebChatFormForm").append("<p><b>"+msg.data.name+": </b>"+msg.data.text+"</p>");
+         $("#WebChatFormForm").append("<p><b>"+strip(msg.data.name)+": </b>"+strip(msg.data.text)+"</p>");
-     });
-     // Подписываемся на канал в который и будут отправляться уведомления о доставке отправленных сообщений.
-     CometServer().subscription("#web_chat_pipe", function(p)
-     {
-         $("#answer_div").html("Сообщение доставлено "+p.number_messages+" получателям. "+p.error);
      });
  });
@@ Строка 143: / Строка 147: @@
 Здесь вызов <code JavaScript>CometServer().start({dev_id:1})</code> выполняет подключение к комет серверу. В качестве dev_id надо передавать свой публичный ключ разработчика.
-Следующий код назначает функцию обработчик которая будет вызываться каждый раз когда в канал web_chat_pipe будет приходить сообщение. Первый аргумент это имя канала, а второй это функция обработчик.
+Следующий код назначает функцию обработчик, которая будет вызываться каждый раз, когда в канал web_chat_pipe будет приходить сообщение. Первый аргумент – это имя канала, а второй – это функция обработчик.
 <code JavaScript>
@@ Строка 149: / Строка 153: @@
  {
      // Добавление полученного сообщения к списку сообщений.
-     $("#WebChatFormForm").append("<p><b>"+msg.data.name+": </b>"+msg.data.text+"</p>");
+     $("#WebChatFormForm").append("<p><b>"+strip(msg.data.name)+": </b>"+strip(msg.data.text)+"</p>");
  });
 </code>
@@ Строка 177: / Строка 181: @@
  });
 </code>
-Здесь первый аргумент это строка в которой первый символ # и за ним имя канала отчёт о доставки сообщения в который мы ждём. В прицепе нет необходимости в обработке отчёта о доставке. Из него мы можем узнать сколько людей получили наше сообщение и не возникало ли каких либо ошибок.
+Здесь первый аргумент это строка в которой первый символ # и за ним имя канала отчёт о доставки сообщения в который мы ждём. В прицепе нет необходимости в обработке отчёта о доставке. Из него мы можем узнать не возникало ли каких либо ошибок.
@@ Строка 183: / Строка 187: @@
 ===== Как сделать чат с авторизацией =====
-В предыдущем примере скрипта мини чата каждый может представится любым именем, в большинстве случаев на практике это не так. По этому рассмотрим как сделать чат с авторизацией. Для этого придётся часть кода чата написать на php.
+В предыдущем примере скрипта мини чата каждый может представится любым именем, в большинстве случаев на практике вам понадобятся функции администрирования для чата чтоб были возможности встроить блокировку пользователей нарушающих правила или отправляющих спам. По этому рассмотрим, как сделать чат с авторизацией. Для этого придётся часть кода чата написать на php.
 Здесь рабочее [[https://comet-server.ru/doc/example/5/|online демо чата с авторизацией]].
@@ Строка 191: / Строка 195: @@
   * В момент авторизации отправляется ключ авторизации в комет сервер и пользователю на страницу.
   * Пользователь соединяется с комет сервером по webSocets и передаёт ему свой ключ и id.
-  * Комет сервер сверяет полученные от пользователя данные с тем что прислал php и если всё верно то авторизация считается пройденной.
+  * Комет сервер сверяет полученные от пользователя данные с тем, что прислал php и, если всё верно, то авторизация считается пройденной.
-  * После авторизации обмен ведётся как и в первом примере чата, но теперь к сообщениям от пользователя комет сервер добавляет id пользователя.
+  * После авторизации обмен ведётся, как и в первом примере чата, но теперь к сообщениям от пользователя комет сервер добавляет id пользователя.
-Всё. Таким образом пользователь не может подделать данные и выбрать чужое имя в чате так как для этого надо знать чужой пароль.
+Всё. Таким образом, пользователь не может подделать данные и выбрать чужое имя в чате, так как для этого надо знать чужой пароль.
 === Код примера чата на php ===
@@ Строка 201: / Строка 205: @@
 <?php
- // Список пользователей, вместо базы используется массив чтоб не усложнять пример
+ // Список пользователей, вместо базы используется массив, чтобы не усложнять пример
 $users = Array(
     "victor"=> Array("pass" => "qwerty", "id" => 1, "name" => "Виктор"),
@@ Строка 256: / Строка 260: @@
     }
-    // Оповещаем всех что залогинился человек и теперь онлайн в чате
+    // Оповещаем всех, что залогинился человек и теперь онлайн в чате
     mysqli_query($comet, "INSERT INTO pipes_messages (name, event, message)VALUES('loginPipe', 'userLogin', '".mysqli_real_escape_string($comet,json_encode(Array( "name" => $users[$_GET["login"]]["name"])))."')");
@@ Строка 322: / Строка 326: @@
     var myName = "<?php echo $_SESSION["userName"]; ?>";
+     // вырезает html теги
+     function strip(html)
+     {
+         var tmp = document.createElement("DIV");
+         tmp.innerHTML = html;
+         return tmp.textContent || tmp.innerText || "";
+     }
     // Отправляет сообщение в чат
     function web_send_msg()
@@ Строка 332: / Строка 344: @@
         // Добавление отправленного сообщения к списку сообщений.
-        $("#WebChatFormForm").append("<p><b>"+myName+": </b>"+text+"</p>");
+        $("#WebChatFormForm").append("<p><b>"+strip(myName)+": </b>"+strip(text)+"</p>");
         // Отправка сообщения в канал чата
@@ Строка 357: / Строка 369: @@
            }
             // Добавление полученного сообщения к списку сообщений.
-            $("#WebChatFormForm").append("<p><b>"+name+": </b>"+msg.data.text+"</p>");
+            $("#WebChatFormForm").append("<p><b>"+strip(name)+": </b>"+strip(msg.data.text)+"</p>");
         });
@@ Строка 364: / Строка 376: @@
         {
             // Добавление уведомления в ленту сообщений
-            $("#WebChatFormForm").append("<p>Пользователь <b>"+msg.data.name+"</b> вошол в чат.</p>");
+            $("#WebChatFormForm").append("<p>Пользователь <b>"+strip(msg.data.name)+"</b> вошол в чат.</p>");
         });
@@ Строка 371: / Строка 383: @@
         {
             // Добавление уведомления в ленту сообщений
-            $("#WebChatFormForm").append("<p>Пользователь <i>"+msg.data.name+"</i> покинул в чат.</p>");
+            $("#WebChatFormForm").append("<p>Пользователь <i>"+strip(msg.data.name)+"</i> покинул в чат.</p>");
         });
@@ Строка 387: / Строка 399: @@
 Теперь рассмотрим код чата на php подробно:
-Для реализации авторизации в чате на php нам надо иметь базу пользователей, и какой то backend для работы с этой базой. Так как это учебный пример, и цель примера научить работе с комет сервером, то мы вместо хранения логинов и паролей пользователей чата в базе данных mysql зададим массив в котором жёстко пропишем имена и пароли для 5 тестовых пользователей php чата.
+Для реализации авторизации в чате на php нам надо иметь базу пользователей, и какой-то backend для работы с этой базой. Так как это учебный пример, и цель примера научить работе с комет сервером, то мы вместо хранения логинов и паролей пользователей чата в базе данных mysql зададим массив в котором жёстко пропишем имена и пароли для 5 тестовых пользователей php чата.
 <code php>
@@ Строка 424: / Строка 436: @@
 }
 </code>
-Когда человек нажимает на ссылку выхода из чата мы уничтожаем сессию и отправляем всем остальным участникам сообщение об этом. Здесь loginPipe это имя канала, а userExit это имя события в канале. Для удобства можно через один канал отправлять события с разными именами.
+Когда человек нажимает на ссылку выхода из чата, мы уничтожаем сессию и отправляем всем остальным участникам сообщение об этом. Здесь loginPipe это имя канала, а userExit это имя события в канале. Для удобства можно через один канал отправлять события с разными именами.
-<note important>Следует обратить внимание что канал для уведомлений о попадании в чат называется loginPipe, то есть не содержит префикса "web_" а это означает что в него можно отправить сообщение только через CometQL при наличии секретного ключа разработчика.</note>
+<note important>Следует обратить внимание что канал для уведомлений о попадании в чат называется loginPipe, то есть не содержит префикса "web_" а это означает, что в него можно отправить сообщение только через CometQL при наличии секретного ключа разработчика.</note>
 === Авторизация пользователей в чате ===
@@ Строка 495: / Строка 507: @@
 {
     // Добавление уведомления в ленту сообщений
-    $("#WebChatFormForm").append("<p>Пользователь <b>"+msg.data.name+"</b> вошёл в чат.</p>");
+    $("#WebChatFormForm").append("<p>Пользователь <b>"+strip(msg.data.name)+"</b> вошёл в чат.</p>");
 });
@@ Строка 502: / Строка 514: @@
 {
     // Добавление уведомления в ленту сообщений
-    $("#WebChatFormForm").append("<p>Пользователь <i>"+msg.data.name+"</i> покинул в чат.</p>");
+    $("#WebChatFormForm").append("<p>Пользователь <i>"+strip(msg.data.name)+"</i> покинул в чат.</p>");
 });
 </code>
@@ Строка 509: / Строка 521: @@
 ===== Сохранение сообщений в бд =====
-Если вам надо сохранять сообщения в бд или дополнительно их фильтровать или как то дополнять данными. То вот есть ещё пример чата https://github.com/CppComet/php-chat-example похожий на примеры этой статьи но в нём отправка сообщений идёт не через вызов функции web_pipe_send, а через ajax запрос к php скрипту который уже направляет сообщение в комет сервер. Если использовать его то можно вставить свою произвольную обработку сообщений, в том числе и их сохранение в файле https://github.com/CppComet/php-chat-example/blob/master/chat.php
+Если вам надо сохранять сообщения в бд или дополнительно их фильтровать или как-то дополнять данными. То вот есть ещё пример чата https://github.com/CppComet/php-chat-example похожий на примеры этой статьи, но в нём отправка сообщений идёт не через вызов функции web_pipe_send, а через ajax запрос к php скрипту, который уже направляет сообщение в комет сервер. Если использовать его, то можно вставить свою произвольную обработку сообщений, в том числе и их сохранение в файле https://github.com/CppComet/php-chat-example/blob/master/chat.php

comet/chat-with-authorization.1500213413.txt.gz · Последние изменения: 2019/12/18 01:58 (внешнее изменение)

CppComet

Quick and simple comet server

Инструменты сайта

Различия

Инструменты сайта

Инструменты страницы

Различия