Работа с EventSource (Server-Sent Events)

Всем привет!

В этой статье речь пойдет о 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.