Всем привет!
В этой статье речь пойдет о Server-Sent Events — «события посылаемые сервером».
Server-Sent Events представляет собой технологию отправки сообщений от сервера к клиенту.
Технология SSE предоставляет специальный объект EventSource, который обеспечивает соединение с сервером.
if(window.EventSource) { var source = new EventSource('/serversentevent.php');
source.onmessage = function(e) { console.log(e.data); };
source.onopen = function(e) { console.log('Соединение открыто'); };
source.onerror = function(e) { if (e.readyState == EventSource.CLOSED) { console.log('Соединение закрыто'); } }; } else { console.log('EventSource не поддерживается Вашим браузером'); }
Поддерживает ли браузер EventSource?
if(window.EventSource) { alert ('Да поддерживает!'); }
Как использовать EventSource?
Для установки соединения с сервером необходимо создать объект EventSource и указать в качестве параметра адрес скрипта.
var source = new EventSource('/serversentevent.php');
Свойства объекта EventSource
readyState — Текущее состояние соединения, одно из EventSource.CONNECTING, EventSource.OPEN или EventSource.CLOSED.
lastEventId — Последнее полученное id сообщения, если есть. При возобновлении соединения браузер указывает это значение в заголовке Last-Event-ID.
Методы объекта EventSource
close() — Закрывает соединение.
События объекта EventSource
onmessage — срабатывает при получение сообщения, которые хранятся в event.data.
onopen — срабатывает при открытии соединения.
onerror — срабатывает при ошибке и закрытии соединения.
Получение сообщений в EventSource
Что бы клиент начал получать сообщения, серверный скрипт должен отправить клиенту заголовок Content-Type: text/event-stream и не закрывать соединение.
Отправляемые сообщения должны быть в специальном формате: data: Текст сообщения. Для понимая процесса отправки сообщений смотрите пример серверной части в конце статьи.
Восстановление соединения EventSource с сервером
Кроме отправки сообщений, серверный скрипт может отправлять другую техническую информацию, например время переконекта при потере соединения.
При закрытии соединения, в том числе если сервер ответит на запрос и закроет соединение — клиент через некоторое время повторит попытку подключения. У каждого браузера время может быть своим 1-3 секунды.
Для того что бы время переконекта было одинаковым во всех браузерах, серверный скрипт может его выставить сам — retry: 1000 — 1 сек.
Что бы закрыть соединение совсем, сервер может ответить клиенту со статусом не равным 200 или клиент может закрыть соединением сам, вызвав метод close();
Идентификатор соединения EventSource
Клиент может начать получение данных с места разрыва соединения. Для этого предусмотрен формат сообщения id.
Сервер отправляет клиенту id посылаемого сообщения id: 1, клиент его получает и может им оперировать, используя свойство eventSource.lastEventId. При переконекте клиент отправит серверу заголовок Last-Event-ID, который сможет с него продолжить передачу сообщения.
Свои обработчики событий EventSource
По умолчанию поступающие сообщения обрабатываются обработчиком событий onmessage, однако можно назначить и другие обработчики, которые задаются форматом сообщения event: eventname. Начать прослушивание своих обработчиков событий можно методом addEventListener.
source.addEventListener('eventname', function(e) { console.log(e.data); }, false);
Статус соединения EventSource
Объект EventSource имеет свойство readyState, которое содержит одно из следующих значений.
const unsigned short CONNECTING = 0; // в процессе (пере-)соединения const unsigned short OPEN = 1; // соединение установлено const unsigned short CLOSED = 2; // соединение закрыто
Серверная часть на PHP
10) { break; }
echo "id: ".$id."\n"; echo "retry: 1000\n"; echo "data: Сообщение №".$id."\n\n";
ob_flush(); flush();
$id += 1; sleep(1); } ?>
EventSource поддерживается всеми современными браузерами… кроме IE разумеется. На момент написания этих строк, самая современная версия IE — 11.