[315]
04 Янв 2014, 22:38

Работа с 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.

Комментарии (3)
systes
05 Янв 2014, 00:58
#

Что бы использовать EventSource в IE можно взять специальную библиотеку с эмулятором: github.com/Yaffle/EventSource

xmms
05 Янв 2014, 18:37
#

Кстати на примере этой библиотеки можно сделать нормальный long polling.

fullzilla
05 Янв 2014, 20:10
#

В начале для обновления информации, я использовал WebSocket, но в связи со сложность поддерживания актуальной версии стандарта в различных браузераях, перешёл на EventSource. Для владельцев IE просто отображается кнопка «обновить».

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 1420]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 1303]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 1270]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 1251]
[49]
17 Сен 2011, 15:13
FileZilla перетаскивание файлов
[просмотров 1188]
[119]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 1129]
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 1128]
[2]
26 Июн 2018, 23:10
Как в React сделать поле input file с кнопкой?
[просмотров 1011]