Различия
Здесь показаны различия между двумя версиями данной страницы.
Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
comet:chat-with-authorization [2017/07/14 06:32] levhav |
comet:chat-with-authorization [2019/12/18 01:58] (текущий) |
||
---|---|---|---|
Строка 1: | Строка 1: | ||
- | <rst>RU::12-Примеры</rst> | + | <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 с авторизацией пользователей в чате и уведомлениями о входе и выходе пользователей. | Первый пример это html скрипт чата для сайта, он будет работать без регистрации пользователей и легко вставится в любую html страницу. Мы его рассмотрим первым по тому что это наиболее простой пример чата использующего комет сервер, а затем на его основе напишем чат для сайта на php с авторизацией пользователей в чате и уведомлениями о входе и выходе пользователей. | ||
- | <note>В данной статье рассматривается вопрос создания чата где все пользователи общаются в одной общей комнате. Если вам нужен чат для личного общения пользователей между собой (общение в диалогах один на один) то вам больше подойдёт [[comet:star-comet-chat|чат плагин личной переписки между пользователями]]</note> | + | <note>В данной статье рассматривается вопрос создания чата, где все пользователи общаются в одной общей комнате. Если вам нужен чат для личного общения пользователей между собой (общение в диалогах один на один), то вам больше подойдёт [[comet:star-comet-chat|чат плагин личной переписки между пользователями]]</note> |
====== Пример создания простейшего чата на php ====== | ====== Пример создания простейшего чата на php ====== | ||
Первое в чём следует разобраться что такое каналы (pipe) в комет сервере. Канал это именованный поток сообщений, в который можно самому отправлять сообщения и можно подписаться на те сообщения которые туда отправляются кем то другим. | Первое в чём следует разобраться что такое каналы (pipe) в комет сервере. Канал это именованный поток сообщений, в который можно самому отправлять сообщения и можно подписаться на те сообщения которые туда отправляются кем то другим. | ||
- | Если рассматривать наиболее простой скрипт чата для сайта то нам понадобится всего один канал. Все участники подписываются на сообщения из этого канала, а для добавления сообщения в чат просто отправляем сообщение в канал. | + | Если рассматривать наиболее простой скрипт чата для сайта, то нам понадобится всего один канал. Все участники подписываются на сообщения из этого канала, а для добавления сообщения в чат просто отправляем сообщение в канал. |
Вот принцип работы простого чата для сайта | Вот принцип работы простого чата для сайта | ||
Строка 19: | Строка 20: | ||
**Примечание:** В примерах будет использована библиотека JQuery. | **Примечание:** В примерах будет использована библиотека JQuery. | ||
- | Сначала разберём как работает простой скрипт онлайн чата. Приведу сразу весь код а потом разберём его подробно. | + | Сначала разберём как работает простой скрипт онлайн чата. Приведу сразу весь код, а потом разберём его подробно. |
- | Первое что надо отметить это то что в данном чате люди общаются используя только лишь комет сервер. Это имеет ряд недостатков делающий из чата скорее прощёную учебную модель. | + | Первое что надо отметить это то что в данном чате люди общаются, используя только лишь комет сервер. Это имеет ряд недостатков, делающий из чата скорее прощёную учебную модель. |
Недостатки: | Недостатки: | ||
Строка 44: | Строка 45: | ||
| | ||
<script> | <script> | ||
+ | // вырезает html теги | ||
+ | function strip(html) | ||
+ | { | ||
+ | var tmp = document.createElement("DIV"); | ||
+ | tmp.innerHTML = html; | ||
+ | return tmp.textContent || tmp.innerText || ""; | ||
+ | } | ||
+ | |||
// Отправляет сообщение в чат | // Отправляет сообщение в чат | ||
function web_send_msg() | 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) | 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 отправляет сообщение в чат. | Функция web_send_msg отправляет сообщение в чат. | ||
<code JavaScript> | <code JavaScript> | ||
+ | // вырезает html теги | ||
+ | function strip(html) | ||
+ | { | ||
+ | var tmp = document.createElement("DIV"); | ||
+ | tmp.innerHTML = html; | ||
+ | return tmp.textContent || tmp.innerText || ""; | ||
+ | } | ||
+ | |||
function web_send_msg() | 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> | </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}); производит непосредственно отправку нашего сообщения всем остальным участникам онлайн чата. Первый аргумент это имя канала в который мы отправим сообщение. Второй аргумент это само сообщение, содержащие имя отправителя и текст сообщения. | А вот вызов 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 надо передавать свой публичный ключ разработчика. | Здесь вызов <code JavaScript>CometServer().start({dev_id:1})</code> выполняет подключение к комет серверу. В качестве dev_id надо передавать свой публичный ключ разработчика. | ||
- | Следующий код назначает функцию обработчик которая будет вызываться каждый раз когда в канал web_chat_pipe будет приходить сообщение. Первый аргумент это имя канала, а второй это функция обработчик. | + | Следующий код назначает функцию обработчик, которая будет вызываться каждый раз, когда в канал web_chat_pipe будет приходить сообщение. Первый аргумент – это имя канала, а второй – это функция обработчик. |
<code JavaScript> | <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> | </code> | ||
Строка 177: | Строка 181: | ||
}); | }); | ||
</code> | </code> | ||
- | Здесь первый аргумент это строка в которой первый символ # и за ним имя канала отчёт о доставки сообщения в который мы ждём. В прицепе нет необходимости в обработке отчёта о доставке. Из него мы можем узнать сколько людей получили наше сообщение и не возникало ли каких либо ошибок. | + | Здесь первый аргумент это строка в которой первый символ # и за ним имя канала отчёт о доставки сообщения в который мы ждём. В прицепе нет необходимости в обработке отчёта о доставке. Из него мы можем узнать не возникало ли каких либо ошибок. |
+ | |||
+ | |||
+ | <rst>RU::12-Примеры::Как сделать чат с авторизацией</rst> | ||
===== Как сделать чат с авторизацией ===== | ===== Как сделать чат с авторизацией ===== | ||
- | В предыдущем примере скрипта мини чата каждый может представится любым именем, в большинстве случаев на практике это не так. По этому рассмотрим как сделать чат с авторизацией. Для этого придётся часть кода чата написать на php. | + | В предыдущем примере скрипта мини чата каждый может представится любым именем, в большинстве случаев на практике вам понадобятся функции администрирования для чата чтоб были возможности встроить блокировку пользователей нарушающих правила или отправляющих спам. По этому рассмотрим, как сделать чат с авторизацией. Для этого придётся часть кода чата написать на php. |
Здесь рабочее [[https://comet-server.ru/doc/example/5/|online демо чата с авторизацией]]. | Здесь рабочее [[https://comet-server.ru/doc/example/5/|online демо чата с авторизацией]]. | ||
Строка 188: | Строка 195: | ||
* В момент авторизации отправляется ключ авторизации в комет сервер и пользователю на страницу. | * В момент авторизации отправляется ключ авторизации в комет сервер и пользователю на страницу. | ||
* Пользователь соединяется с комет сервером по webSocets и передаёт ему свой ключ и id. | * Пользователь соединяется с комет сервером по webSocets и передаёт ему свой ключ и id. | ||
- | * Комет сервер сверяет полученные от пользователя данные с тем что прислал php и если всё верно то авторизация считается пройденной. | + | * Комет сервер сверяет полученные от пользователя данные с тем, что прислал php и, если всё верно, то авторизация считается пройденной. |
- | * После авторизации обмен ведётся как и в первом примере чата, но теперь к сообщениям от пользователя комет сервер добавляет id пользователя. | + | * После авторизации обмен ведётся, как и в первом примере чата, но теперь к сообщениям от пользователя комет сервер добавляет id пользователя. |
- | Всё. Таким образом пользователь не может подделать данные и выбрать чужое имя в чате так как для этого надо знать чужой пароль. | + | Всё. Таким образом, пользователь не может подделать данные и выбрать чужое имя в чате, так как для этого надо знать чужой пароль. |
=== Код примера чата на php === | === Код примера чата на php === | ||
Строка 198: | Строка 205: | ||
<?php | <?php | ||
- | // Список пользователей, вместо базы используется массив чтоб не усложнять пример | + | // Список пользователей, вместо базы используется массив, чтобы не усложнять пример |
$users = Array( | $users = Array( | ||
"victor"=> Array("pass" => "qwerty", "id" => 1, "name" => "Виктор"), | "victor"=> Array("pass" => "qwerty", "id" => 1, "name" => "Виктор"), | ||
Строка 253: | Строка 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"])))."')"); | 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"])))."')"); | ||
| | ||
Строка 319: | Строка 326: | ||
var myName = "<?php echo $_SESSION["userName"]; ?>"; | 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() | function web_send_msg() | ||
Строка 329: | Строка 344: | ||
// Добавление отправленного сообщения к списку сообщений. | // Добавление отправленного сообщения к списку сообщений. | ||
- | $("#WebChatFormForm").append("<p><b>"+myName+": </b>"+text+"</p>"); | + | $("#WebChatFormForm").append("<p><b>"+strip(myName)+": </b>"+strip(text)+"</p>"); |
// Отправка сообщения в канал чата | // Отправка сообщения в канал чата | ||
Строка 354: | Строка 369: | ||
} | } | ||
// Добавление полученного сообщения к списку сообщений. | // Добавление полученного сообщения к списку сообщений. | ||
- | $("#WebChatFormForm").append("<p><b>"+name+": </b>"+msg.data.text+"</p>"); | + | $("#WebChatFormForm").append("<p><b>"+strip(name)+": </b>"+strip(msg.data.text)+"</p>"); |
}); | }); | ||
Строка 361: | Строка 376: | ||
{ | { | ||
// Добавление уведомления в ленту сообщений | // Добавление уведомления в ленту сообщений | ||
- | $("#WebChatFormForm").append("<p>Пользователь <b>"+msg.data.name+"</b> вошол в чат.</p>"); | + | $("#WebChatFormForm").append("<p>Пользователь <b>"+strip(msg.data.name)+"</b> вошол в чат.</p>"); |
}); | }); | ||
Строка 368: | Строка 383: | ||
{ | { | ||
// Добавление уведомления в ленту сообщений | // Добавление уведомления в ленту сообщений | ||
- | $("#WebChatFormForm").append("<p>Пользователь <i>"+msg.data.name+"</i> покинул в чат.</p>"); | + | $("#WebChatFormForm").append("<p>Пользователь <i>"+strip(msg.data.name)+"</i> покинул в чат.</p>"); |
}); | }); | ||
| | ||
Строка 384: | Строка 399: | ||
Теперь рассмотрим код чата на php подробно: | Теперь рассмотрим код чата на php подробно: | ||
- | Для реализации авторизации в чате на php нам надо иметь базу пользователей, и какой то backend для работы с этой базой. Так как это учебный пример, и цель примера научить работе с комет сервером, то мы вместо хранения логинов и паролей пользователей чата в базе данных mysql зададим массив в котором жёстко пропишем имена и пароли для 5 тестовых пользователей php чата. | + | Для реализации авторизации в чате на php нам надо иметь базу пользователей, и какой-то backend для работы с этой базой. Так как это учебный пример, и цель примера научить работе с комет сервером, то мы вместо хранения логинов и паролей пользователей чата в базе данных mysql зададим массив в котором жёстко пропишем имена и пароли для 5 тестовых пользователей php чата. |
<code php> | <code php> | ||
Строка 421: | Строка 436: | ||
} | } | ||
</code> | </code> | ||
- | Когда человек нажимает на ссылку выхода из чата мы уничтожаем сессию и отправляем всем остальным участникам сообщение об этом. Здесь loginPipe это имя канала, а userExit это имя события в канале. Для удобства можно через один канал отправлять события с разными именами. | + | Когда человек нажимает на ссылку выхода из чата, мы уничтожаем сессию и отправляем всем остальным участникам сообщение об этом. Здесь loginPipe это имя канала, а userExit это имя события в канале. Для удобства можно через один канал отправлять события с разными именами. |
- | <note important>Следует обратить внимание что канал для уведомлений о попадании в чат называется loginPipe, то есть не содержит префикса "web_" а это означает что в него можно отправить сообщение только через CometQL при наличии секретного ключа разработчика.</note> | + | <note important>Следует обратить внимание что канал для уведомлений о попадании в чат называется loginPipe, то есть не содержит префикса "web_" а это означает, что в него можно отправить сообщение только через CometQL при наличии секретного ключа разработчика.</note> |
=== Авторизация пользователей в чате === | === Авторизация пользователей в чате === | ||
Строка 492: | Строка 507: | ||
{ | { | ||
// Добавление уведомления в ленту сообщений | // Добавление уведомления в ленту сообщений | ||
- | $("#WebChatFormForm").append("<p>Пользователь <b>"+msg.data.name+"</b> вошёл в чат.</p>"); | + | $("#WebChatFormForm").append("<p>Пользователь <b>"+strip(msg.data.name)+"</b> вошёл в чат.</p>"); |
}); | }); | ||
Строка 499: | Строка 514: | ||
{ | { | ||
// Добавление уведомления в ленту сообщений | // Добавление уведомления в ленту сообщений | ||
- | $("#WebChatFormForm").append("<p>Пользователь <i>"+msg.data.name+"</i> покинул в чат.</p>"); | + | $("#WebChatFormForm").append("<p>Пользователь <i>"+strip(msg.data.name)+"</i> покинул в чат.</p>"); |
}); | }); | ||
</code> | </code> | ||
Строка 506: | Строка 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 |