HTML SSE-API
События, отправленные сервером (SSE), позволяют веб-странице получать обновления с сервера.
События, отправленные сервером — односторонний обмен сообщениями
Событие, отправленное сервером, — это когда веб-страница автоматически получает обновления с сервера.
Это было возможно и раньше, но веб-страница должна была спрашивать, доступны ли какие-либо обновления. Для событий, отправленных сервером, обновления приходят автоматически.
Примеры: обновления Facebook/Twitter, обновления курсов акций, новостные ленты, спортивные результаты и т. д.
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает события, отправленные сервером.
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | 79.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"
Проверьте поддержку событий, отправленных сервером
В приведенном выше примере 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 (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.
- Укажите, что страница не должна кэшироваться
- Выведите данные для отправки ( всегда начинайте с «данные:»)
- Сбросить выходные данные обратно на веб-страницу
Объект EventSource
В приведенных выше примерах мы использовали событие onmessage для получения сообщений. Но доступны и другие события:
| Events | Description |
|---|---|
| onopen | When a connection to the server is opened |
| onmessage | When a message is received |
| onerror | When an error occurs |