HTML5 События, отправляемые сервером

HTML5 события, отправляемые сервером, позволяют веб-страницам получать обновления с сервера.

События, отправляемые сервером - односторонняя доставка сообщений

События, отправляемые сервером, означают, что веб-страницы автоматически получают обновления с сервера.

Это было возможно и раньше, при условии, что веб-страница должна была запрашивать, есть ли доступные обновления. С событиями, отправляемыми сервером, обновления могут поступать автоматически.

Примеры: обновления Facebook/Twitter, обновления цен на акции, новые сообщения в блогах, спортивные результаты и т. д.

Поддержка браузеров

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Все основные браузеры поддерживают события, отправляемые сервером, кроме Internet Explorer.

Получение уведомлений о событиях, отправляемых сервером

Объект 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"

Проверка поддержки Server-Sent Events

В следующем примере мы написали дополнительный код для определения поддержки браузером событий, отправляемых сервером:

if(typeof(EventSource)!=="undefined")
{
    // 浏览器支持 Server-Sent
    // 一些代码.....
}
else
{
    // 浏览器不支持 Server-Sent..
}

Пример серверного кода

Чтобы приведённый выше пример работал, вам также нужен сервер, способный отправлять обновления данных (например, PHP или ASP).

Синтаксис серверного потока событий очень прост. Установите заголовок "Content-Type" в значение "text/event-stream". Теперь вы можете начать отправлять потоки событий.

Пример

<?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()
%>

Пояснение к коду:

  • Установите заголовок "Content-Type" в "text/event-stream"
  • Укажите не кэшировать страницу
  • Выведите отправленную дату (всегда начинается с "data: ")
  • Сбросьте выходные данные на веб-страницу

Объект EventSource

В приведённом выше примере мы использовали событие onmessage для получения сообщений. Однако можно использовать и другие события:

Event Описание
onopen Когда соединение с сервером открыто
onmessage Когда получено сообщение
onerror Когда возникает ошибка
Другие расширения