HTML5 События, отправленные сервером
События, отправляемые сервером, позволяют веб-странице получать обновления с сервера.
События, отправленные сервером-однонаправленные сообщения
Событие, отправляемое сервером, — это когда веб-страница автоматически получает обновления с сервера.
Это было возможно и раньше, но веб-страница должна была бы спросить, если какие-либо обновления были доступны. С помощью событий, отправленных сервером, обновления поставляются автоматически.
Примеры: обновления Facebook/Twitter, обновления цен на акции, новостные ленты, спортивные результаты и т.д.
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает события, отправленные сервером.
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.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 поместите полученные данные в элемент с идентификатором = "Result"
Проверка поддержки событий, отправленных сервером
В приведенном выше примере Трит были некоторые дополнительные строки кода для проверки поддержки браузером событий, отправленных сервером:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
}
else {
// Sorry! No server-sent events support..
}
Server-Side Code Example
Чтобы приведенный выше пример работал, необходим сервер, способный отправлять обновления данных (например, 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.php):
<%
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 | При возникновении ошибки |