Вы наверняка знаете о XMLHttpRequest, при помощи которого мы можем взаимодействовать с веб-сервером из нашего HTML-документа, и обновлять его без необходимости перезагрузки страниц. Теперь, с недавно представленным Server-Sent Events в HTML5, мы можем даже реагировать на запросы со стороны сервера без необходимости перезагружать страницу. Таким образом, мы можем поддерживать постоянное обновление контента страницы. Это может быть удобным во многих случаях, особенно если вам постоянно нужно предоставлять информацию о наличии продукции на складе и так далее.
Server Sent Events: определяем события, и реагируем на них
Чтобы начать использовать Server Sent Events, вам нужно будет определить источник. Это может быть PHP-файл, который содержит в себе результаты работы сервера, и подготавливает события, на которые нам нужно отреагировать:
var quelle = new EventSource("demo.php");
Посредством оператора событий onmessage или метода addEventListener(), мы добавляем функцию, которая будет запускаться каждый раз при изменении контента источника (в нашем примере в роли источника выступает demo.php):
quelle.onmessage = demo;
Если это возможно, вам всегда следует придерживаться DOM-стандарта addEventListener():
quelle.addEventListener("ping", demo, false);
Применение addEventListener() дает вам преимущество в том, что вы можете добавить название события (здесь используется ping) к функции. Таким образом, мы можем сделать так, чтобы источник реагировал на различные события.
Функция должна содержать информацию о том, какой тип реакции должен быть инициирован. Самая простая реакция заключается в том, чтобы просто изложить содержимое источника:
function demo(e) { document.getElementById("demo-output").firstChild.nodeValue = e.data; }
Используя .data, мы можем осуществить доступ к контенту источника события. Вместо того чтобы просто извлекать контент, можно поразмыслить над более сложными функциями.
Server Sent Events: пресеты для источника события
Источник события должен отвечать конкретным стандартам. В первую очередь это необходимо для того, чтобы предоставлять корректный тип контента. В нашем PHP-файле нам нужно излагать информацию следующим образом:
header("Content-Type: text/event-stream");
Во-вторых, контент должен быть в формате UTF-8. Так как мы дали название событию, нам нужно добавить идентификаторы массива:
event: ping data: This is the output text.
Event содержит название события, которые мы привязали к addEventListener(), а данные содержат строку, которую нам нужно изложить. Если определено более одного события, каждое событие будет отделено двумя переходами строки. Если вы не хотите слушать то, что мы рекомендуем, и вместо этого использовали оператор onmessage, то у вас не получится реагировать на более чем одно событие.
Server sent events поддерживаются в Chrome от 9 версии, Firefox 6+, Safari 5+ и Opera 11+. Наш лучший друг Internet Explorer в этот список не вошел, что уже даже не удивляет.