HTML API Серверных событий

API серверных событий (Server‑Sent Events, SSE) позволяет отправлять сообщения/обновления с сервера на веб‑страницу через HTTP‑соединение.

---

Серверные события — односторонняя передача сообщений

Серверное событие — это ситуация, когда веб‑страница автоматически получает сообщения/обновления от сервера.

Обычно веб‑страница должна запрашивать данные у сервера, но при использовании серверных событий обновления передаются автоматически.

Примеры: обновления данных фондового рынка, новостные ленты, результаты спортивных соревнований и т. д.

---

Поддержка в браузерах

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

API
SSE	6.0	79.0	6.0	5.0	11.5

---

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

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

Пример

<script>
const x = document.getElementById("result");
// Проверка поддержки серверных событий в браузере
if (typeof(EventSource) !== "undefined") {
  var source = new EventSource("demo_sse.php");
  source.onmessage = function(event) {
    x.innerHTML += event.data + "<br>";
  };
} else {
  x.innerHTML = "К сожалению, поддержка серверных событий отсутствует.";
}
</script>

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

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

---

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

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

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: Время сервера: {$time}\n\n";
flush();
?>

Код на ASP (VB) (demo_sse.asp):

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: Время сервера: " & now())
Response.Flush()
%>

Объяснение кода:

1. Устанавливается заголовок Content‑Type со значением text/event‑stream.
2. Указывается, что страница не должна кэшироваться.
3. Выводятся данные для отправки (всегда начинаются с data:).
4. Очищается буфер вывода и отправляются данные обратно на веб‑страницу.

---

Объект EventSource

В приведённых выше примерах мы использовали событие onmessage для получения сообщений. Но доступны и другие события:

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