Текстовый чат для сайта

в 9:20, , рубрики: javascript, nginx, php

image

Хочу поделиться опытом создания текстового чата на основе nginx-push-stream-module модуля Nginx, PHP и Javascript. Этот модуль функционирует по принципу long polling и может быть использован как для обмена мгновенными сообщениями между пользователями, так и для системы push–уведомлений.

Добавление модуля Nginx

Будем считать, что у вас уже установлен Nginx. Поэтому для начала нужно скачать и добавить модуль nginx-push-stream-module и пересобрать Nginx вручную. Подробное руководство по добавлению модуля можно найти здесь и здесь, думаю, нет смысла писать повторно.

Конфигурация

Для осуществления поддержки long polling, в конфигурации Nginx объявим точку публикации сообщений (в данном примере publish) и точку подписки для получения сообщений (в данном примере subscribe).

http {
…
    server {
    …
    location /publish {
             push_stream_publisher               admin;    # определяет режим для данного блока
             push_stream_channels_path    $arg_id;   # id канала для публикации сообщения
             push_stream_store_messages         on;   # включение или отключение очереди сообщений
             allow          127.0.0.1;   # делает публикацию сообщений доступной только с  вашего сервера
          }

          location ~ /subscribe/(.*) {
             push_stream_subscriber         long-polling ; # определяет блок как подписчика 
                                                           # (существуют разные режимы)
             push_stream_channels_path                 $1;  # id канала для подписки
             push_stream_longpolling_connection_ttl    300s;  # период времени, в течении которого подписчик 
                                                               # остается подключенным (ожидает сообщение) до 
                                                               # переподключения
            push_stream_last_received_message_time  $arg_time;  # время получения последнего сообщения
            push_stream_last_received_message_tag     $arg_tag;  # метка, определяющая последнее доставленное 
                                                                 #сообщение    
          }

   }

push_stream_shared_memory_size          32M;
}

Внутри блока http нужно указать директиву push_stream_shared_memory_size, то есть размер выделяемой памяти.

Отправка сообщений в PHP

В PHP сообщения отправляем обычным POST методом.

$channel_id = subscriber1;  //id канала для публикации сообщения 

$message=’Привет!’; // сообщение

//отправка сообщения
$ch = curl_init('http://127.0.0.1/publish?id='.$channel_id);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($message));
curl_exec($ch);
curl_close($ch);

Получение сообщений в Javascript (Jquery)

Есть несколько способов подписаться на канал, самый простой – Ajax запрос методом GET.

var channelId = subscriber1; //id подписчика
var  last_etag=0; //переменная для заголовка 'Etag'
var  last_time=null; //переменная для заголовка 'Last-Modified'

function new_message() {
    $.ajax({
        url: '/subscribe/' + channelId,
        type: "GET",
        dataType: 'json',
        beforeSend: function(xhr){xhr.setRequestHeader('Etag', last_etag);xhr.setRequestHeader('Last-Modified', last_time);},
        success: function(data, status, xhr) {
        last_etag =xhr.getResponseHeader('Etag'); //присваиваем новое значение переменной last_etag 
                                                  // из заголовка 'Etag' ответа
        last_time =xhr.getResponseHeader('Last-Modified'); // присваиваем новое значение переменной last_time 
                                                           // из заголовка 'Last-Modified' ответа

         //здесь что-то делаем с полученным сообщением

         setTimeout(new_message, 500);	 // переподключаемся сразу после получения ответа
        }
    })
}
new_message();

На этом все. Такой чат является кроссбраузерным, не требует наличия дополнительных плагинов у пользователей и подойдет для проектов любого масштаба. Вот пример видеочата, использующего данный текстовый чат.

Автор: Kable7

Источник


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js