Server-Sent Events

Описание

В данном репо находится базовая рабочая модель взаимодействия сервер-клиент c помощью технологии SSE, где инициатором является сервер. Клиентская часть реализована на js EventSource, серверная на php. Для демонстрации работы механизма на его базе написана отправка всплывающих уведомлений от сервера к юзеру.

Файловая организация

root/
├── index.php - демонстрация работы библиотеки, для внедрения в существующий проект копировать его не нужно
├── sseServer.php - основной скрипт сервера, который обслуживает общение с клиентом по протоколу SSE
├── sseCookie.php - необязательный файл, сделан для удобства установки куки через GET-запрос
├── sseWriter.php - запись информации в поток отправки и прием POST-запросов на отправку
├── streams/ - папка с файлами потоков, которые отдаются клиенту
└── js/
    ├── sse.js - клиентская часть для общения с сервером по протоколу SSE
    ├── iziToast/ - библиотека уведомлений
    │   ├── iziToast.css
    │   └── iziToast.js
    └── sounds/ - звуки для уведомлений

Установка

• Скопировать репо в директорию сайта (можно в паблик корень)
• Прописать в браузере куки sseid, который можно получить из предполагаемого username посредством base64_enconde(). Это можно сделать воспользовавшись скриптом sseCookie.php, для этого нужно сделать GET-запрос, где username - это будущее имя для адресных рассылок клиенту

[sse_url]/sseCookie?set=username

• Добавить на свою страницу подключение js библиотеки или воспользоваться index.php для пробы

<script async id="ssescript" src="[path_to]/js/sse.js"></script>

Не забывайте про id для скрипта, он нужен для корректной работы

Использование

Базовый механизм

• Клиент открывает страницу, на которой подключен sse.js
• sse.js подключается к серверной стороне через sseServer.php
• sseServer.php отдает содержимое потока из папки streams/, поток выбирается в соотвествии с куки sseid клиента
• Если id команды поменялся => новая команда => выполнить

Уведомления

Для демонастрации работы реализован функционал всплывающих уведомлений, которые инициируются сервером. Сами уведомления сделаны на базе плагина iziToast. Отправить уведомление можно несколькими путями:

1. Самый хардкорный: вручную прописать данные в файл потока для отпределенного клиента. В этом случае есть высокая вероятность накосячить с форматом данных, так что данный способ крайне не рекомендуется.
2. Использование из своего скрипта: для этого нужно подключить sseWriter.php и пользоваться функциями sendNotyArray($user, $array) и sendNotyJson($user, $json)

require_once 'sseWriter.php';

$input = array(
    'cmd' => 'notify',                  // название команды для sse.js
    'data' => array(
        'color' => 'green',             // варианты green, red, yellow, blue, whit
        'icon'  => 'phone_forwarded',   // google material icon tag
        'text'  => 'входящий',          // текст уведомления
        'title' => '+4996456131213',    // заголовок уведомления
        'type'  => 'msg',               // msg - показ уведомления, destroy - убрать все показываемые уведомления
        'sound' => 'finally',           // если нужен звук (варианты названий в папке /js/sound/)
        'volume'=> '0.5',               // если со звуком, то можно задать громкость от 0 до 1
        'button'=> array(               // добавить массив кнопок с действием на них
            array(
                'name' => 'создать контакт',
                'func' => 'window.location.replace("/redirect/to/page");'
            )
        )
    )
);

sendNotyArray('admin', $input);

3. Использования посредством POST-запроса к sseWriter.php, где в качестве массива параметров будет

[
    'sseid' => cookie                   // куки, прописаный у клиента, base64_encode(username)
    'user'  => username                 // имя пользователя
    'data'  => json_encode($input)      // json строка массива, который показан выше
]

Для рассылки всем клиентам можно пользоваться функцией отправки с username = all. Для рассылки всем клиентам с помощью POST-запроса в массиве параметров нужно задать 'sseid' => base64_encode('all') и 'user' => 'all'

Свои клиентские функции

При желании можно реализовать свою обработку приходящих от сервера команд на стороне клиента. Для этого необходимо:

• В файл sse.js добавить свою функцию, которая будет называться sse<имя команды>(data), например ssealert
• Для отправки на сервере использовать массив парметров с указанием названия вашей функции

$input = array(
    'cmd' => 'alert',                   // название вашей команды без перфикса sse
    'data' => array()                   // любой массив, который придет в вашу фукнцию в качестве параметра data
);

Внимательно посмотреть сюда!

Данная библитека выложена в ознакомительных целях. Использование данного кода в вашем проекте без изменения принесет в него вагон дыр в плане безопасности.

• нет htaccess
• уязвимость sseWriter.php к поддельным POST-запросам
• доступность sseServer.php при известном username
• команда exec в sse.js

Для использования нужно как минимум добавить htaccess и реализовать свой алгоритм для клиентского куки