HTML5 События отправлено сервером API
Server-Sent Events (SSE) Разрешить веб странице получать обновления с сервера.
Server-Sent Events - Односторонний обмен сообщениями
Событие, отправленное сервером - это когда веб страница автоматически получает обновления с сервера.
Это было возможно и раньше, но веб страница должна была спросить, доступны ли какие либо обновления. С событиями, отправленными сервером, обновления приходят автоматически.
Примеры: обновления 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"
Проверьте поддержку событий, отправленных сервером
В приведенном выше примере, было несколько дополнительных строк кода для проверки поддержки браузером событий, отправленных сервером:
if(typeof(EventSource) !== "undefined") {
// Да! Поддержка событий, отправляемых сервером!
// Некоторый код.....
}
else {
// Прости! Поддержка событий, отправляемых сервером, отсутствует.
}
Пример кода на сервере
Для работы приведенного выше примера вам нужен сервер, способный отправлять обновления данных (например, PHP или ASP).
Синтаксис потока событий на стороне сервера прост. Установите header "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: Серверное время: {$time}\n\n";
flush();
?>
Код на ASP (VB) (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: Серверное время: " & now())
Response.Flush()
%>
Объяснение кода:
- Установите header "Content-Type" к "text/event-stream"
- Укажите, что страница не должна кэшироваться
- Выведите данные для отправки (Всегда старт с "data:")
- Сбросьте выходные данные обратно на веб страницу
Объект EventSource
В приведенных выше примерах мы использовали событие onmessage для получения сообщений. Но доступны и другие события:
| События | Описание |
|---|---|
| onopen | При открытии соединения с сервером |
| onmessage | Когда сообщение получено |
| onerror | При возникновении ошибки |