HTML5 События, отправленные сервером
Для чего нужны события, отправленные сервером? (Server‑Sent Events — SSE)
События, отправленные сервером (Server‑Sent Events — SSE), позволяют веб‑странице получать обновления от сервера.
События, отправленные сервером — это однонаправленные сообщения
События, отправленные сервером — это механизм, при котором веб‑страница автоматически получает обновления от сервера.
Раньше это тоже было возможно, но веб‑странице приходилось самостоятельно отправлять запросы, чтобы узнать, появились ли обновления. С SSE обновления отправляются автоматически.
Примеры: обновления Facebook/Twitter, изменения цен на акции, новостные ленты, спортивные результаты и многое другое.
Поддержка браузерами
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает события, отправленные сервером.
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | Не поддерживается | 6.0 | 5.0 | 11.5 |
Получать уведомления о событиях, отправленных сервером
Объект EventSource используется для получения сообщений о событиях, которые отправляются сервером:
Пример
var source = new EventSource("demo_sse.html");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
Попробуйте сами »
Пояснение примера:
- Создайте новый объект EventSource и укажите URL‑адрес страницы, которая отправляет обновления (в этом примере — "demo_sse.html")
- Каждый раз при получении обновления происходит событие onmessage
- Когда происходит событие onmessage, поместите полученные данные в элемент с id="result"
Проверьте поддержку событий, отправленных сервером
В приведённом выше примере «Попробуйте сами» было несколько дополнительных строк кода для проверки поддержки браузером событий, отправленных сервером:
if(typeof(EventSource) !== "undefined") {
// Так! Отправка событий на сервер поддерживается!
// Какой-то код.....
} else {
// К сожалению, отправка событий на сервер не поддерживается.
}
Пример кода на стороне сервера
Для приведённого выше примера нужен сервер, который может отправлять обновления данных (например, PHP или ASP).
Синтаксис серверного потока событий очень простой. Установите заголовок "Content-Type" в значение "text/event-stream". Теперь вы можете начинать отправлять поток событий.
Код на PHP (demo_sse.html):
<?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()
%>
Пояснение кода:
- Установите заголовок "Content-Type" в "text/event-stream"
- Укажите, что страница не должна кэшироваться (not cache)
- Выведите данные, которые нужно отправить (всегда начинайте с "data: ")
- Сбросьте выходные данные обратно на веб‑страницу
Объект EventSource
В приведённых выше примерах мы использовали событие onmessage для получения сообщений. Но доступны и другие события:
| Событие | Описание |
|---|---|
| onopen | Когда установлено соединение с сервером |
| onmessage | Когда получено сообщение |
| onerror | Когда произошла ошибка |
