HTML5 Server-Sent Events (SSE) - События, отправленные сервером

Курс по основам HTML5. W3Schools на русском языке. Уроки для начинающих

❮ Prev Next ❯

Для чего нужны Server-Sent Events (SSE) - События, отправленные сервером?

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

События, отправленные сервером - это одностороние сообщения

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

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

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

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

Цифры в таблице определяют первую версию браузера, которая полностью поддерживает события, отправленные сервером.

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

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

Объект 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"

Проверьте поддержку событий, отправленных сервером

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

if(typeof(EventSource) !== "undefined") {
// Да! Server-sent events поддерживается!
// Какой-то код.....
} else {
// Извините! Server-sent events не поддерживается..
}

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

Для приведённого выше примера нужен сервер, который может отправлять обновления даных (например, 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"
Укажите, что страница не должна кешироваться (not cache)
Выведите данные, которые необходимо отправить (Всегда нужно начинать с "data: ")
Скиньте исходные данные назад на веб-страницу

Объект EventSource

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

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

❮ Prev Next ❯