HTML SSE API
События, отправленные сервером (SSE) позволяют веб-странице получать обновления с сервера.
События, отправленные сервером - Односторонние сообщения
Событие, отправленное сервером, происходит, когда веб-страница автоматически получает обновления от сервера.
Это также было возможно раньше, но веб-страница должна была спросить, доступны ли какие-либо обновления. При событиях, отправленных сервером, обновления приходят автоматически.
Примеры: обновления Facebook/Twitter, обновления цен на акции, новостные ленты, спортивные результаты и т. д.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает события, отправленные сервером.
Получать уведомления о событиях, отправленных сервером
Объект 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"
Проверьте поддержку событий, отправленных сервером
В примере tryit выше были некоторые дополнительные строки кода для проверки поддержки браузера для событий, отправленных сервером:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
} else {
// Sorry! No server-sent events support..
}
Пример кода на стороне сервера
Для работы приведенного выше примера вам нужен сервер, способный отправлять обновления данных (например, PHP или ASP).
Синтаксис потока событий на стороне сервера прост. Установите заголовок "Content-Type" в "text/event-stream". Теперь вы можете начать отправлять потоки событий.
<?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"
- Укажите, что страница не должна кэшироваться
- Выведите данные для отправки (Всегда начинайте с "data:")
- Сметьте выходные данные обратно на веб-страницу
Объект EventSource
В приведенных выше примерах мы использовали событие onmessage для полуки сообщений. Но есть и другие мероприятия:
onopen При открытии соединения с сервером
onmessage При получении сообщения
onerror При возникновении ошибки