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") {
    // Да! Поддерживается отправка событий от сервера!
    // Некоторый код.....
} else {
    // Извините! Не поддерживается отправка событий от сервера!
}

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

Чтобы выполнить пример, вам нужно иметь возможность отправлять обновления данных на сервер (например, 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 При возникновении ошибки