HTML5 События, отправленные сервером
Для чего нужны события, отправленные сервером? (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: 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 | Когда возникла ошибка |
