HTML API для событий, отправляемых сервером
API Server-Sent Events (SSE) позволяет серверу отправлять сообщения и обновления на веб-страницу по HTTP-соединению.
Server-Sent Events - Однонаправленная передача сообщений
Событие, отправляемое сервером, — это когда веб-страница автоматически получает сообщения или обновления от сервера. Обычно страница должна запрашивать данные у сервера, но при событиях, отправляемых сервером, обновления передаются автоматически. Примеры включают обновления социальных сетей, биржевые обновления, новостные ленты и спортивные результаты.
Поддержка браузерами
API Server-Sent Events поддерживается всеми современными браузерами (начиная с Chrome 6, Edge 79, Firefox 6, Safari 5 и Opera 11.5).
Получение уведомлений о событиях, отправляемых сервером
Объект EventSource получает уведомления о событиях, отправляемых сервером. Вы создаёте новый EventSource и передаёте ему URL страницы, отправляющей обновления. Каждый раз при поступлении обновления срабатывает событие onmessage, и вы помещаете полученные данные в элемент страницы.
Пример
Получение событий, отправляемых сервером, с помощью EventSource.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Получение SSE</title>
</head>
<body>
<p id="result"></p>
<script>
const x = document.getElementById("result");
// Проверка поддержки SSE браузером
if (typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
x.innerHTML += event.data + "<br>";
};
} else {
x.innerHTML = "Извините, нет поддержки событий, отправляемых сервером.";
}
</script>
</body>
</html>
Проверка поддержки браузером
Приведённый выше пример содержит несколько дополнительных строк для проверки поддержки браузером: проверяется typeof(EventSource), и код SSE запускается только если он определён, иначе показывается сообщение об отсутствии поддержки.
Пример кода на стороне сервера
Чтобы пример работал, нужен сервер, способный отправлять обновления данных (например, PHP или ASP). Синтаксис потока событий на стороне сервера прост: установить заголовок Content-Type в text/event-stream, указать, что страница не должна кэшироваться, вывести данные (каждое сообщение всегда начинается с data:) и сбросить (flush) их обратно в страницу. В PHP это означает установку заголовка через header('Content-Type: text/event-stream'), вывод строки вроде data: The server time is: ... и вызов flush(); в ASP — Response.ContentType = "text/event-stream", запись строки data: и вызов Response.Flush().
Объект EventSource
В примерах используется событие onmessage, но доступны и другие события: onopen срабатывает при открытии соединения с сервером, onmessage срабатывает при получении сообщения, а onerror срабатывает при возникновении ошибки.