HTML Server-Sent события

Server-Sent события позволяют веб-странице получать обновления от сервера.

Server-Sent события - Односторонняя передача сообщений

Server-Sent события это обновления, которые автоматически поступают на веб-страницу от сервера.

Раньше это могло быть сделано, при условии, что веб-страница должна была спрашивать, есть ли доступные обновления. Через Server-Sent события обновления могут автоматически приходить.

Например: обновления Facebook/Twitter, обновления цен акций, новые статьи, результаты событий и т.д.

Поддержка браузерами

Числа в таблице указывают на первый браузер, который полностью поддерживает события server-sent.

API
SSE 6.0 Не поддерживается 6.0 5.0 11.5

Прием уведомлений о Server-Sent событиях

Объект EventSource используется для приема уведомлений о событиях от сервера:

Пример

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

Попробуйте сами

Объяснение примера:

  • Создается новый объект EventSource, и указывается URL страницы, отправляющей обновления (в данном примере это "demo_sse.php")
  • Когда приходит обновление, происходит событие onmessage
  • Когда происходит событие onmessage, данные, полученные до этого, добавляются в элемент с id "result"

Проверка поддержки Server-Sent событий

В примере TIY мы написали дополнительный код для проверки поддержки браузерами событий отправки от сервера:

if(typeof(EventSource) !== "undefined") {
    // Да! Поддерживается отправка событий от сервера!
    // Некоторый код.....
}
    // Извините! Не поддерживается отправка событий от сервера!
}

Пример кода на сервере

Для того чтобы пример из предыдущего примера работал, вам нужно иметь возможность отправлять обновления данных на сервер (например, PHP или ASP).

Синтаксис серверных событий очень прост. Установите заголовок "Content-Type" в "text/event-stream". Теперь вы можете начать отправлять поток событий.

Код в PHP (demo_sse.php):

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

Код в ASP (VB) (demo_sse.asp):

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Комментарий к коду:

  • Установить заголовок "Content-Type" в "text/event-stream"
  • Запретить кэширование страницы
  • Указать дату для отправки (всегда начинается с "data: ")
  • Вывод данных для обновления веб-страницы

Объект EventSource

В примере мы используем событие onmessage для получения сообщения. Однако можно использовать и другие события:

Событие Описание
onopen При открытии подключения к серверу
onmessage При получении сообщения
onerror При возникновении ошибки