ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

HTML5 Tutorial

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Forms

HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes

HTML5

HTML5 Intro HTML5 Support HTML5 New Elements HTML5 Semantics HTML5 Migration HTML5 Style Guide

HTML Graphics

HTML Canvas HTML SVG HTML Google Maps

HTML Media

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples

HTML Examples HTML Accessibility

HTML References

HTML Tag List HTML Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

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 При возникновении ошибки