—»     —»   HTML5 Server-Sent Events: учимся реагировать на запросы сервера при помощи Javascript
  Раздел: Java-Скрипты   Нет комментариев  

HTML5 Server-Sent Events: учимся реагировать на запросы сервера при помощи Javascript

Вы наверняка знаете о XMLHttpRequest, при помощи которого мы можем взаимодействовать с веб-сервером из нашего HTML-документа, и обновлять его без необходимости перезагрузки страниц. Теперь, с недавно представленным Server-Sent Events в HTML5, мы можем даже реагировать на запросы со стороны сервера без необходимости перезагружать страницу. Таким образом, мы можем поддерживать постоянное обновление контента страницы. Это может быть удобным во многих случаях, особенно если вам постоянно нужно предоставлять информацию о наличии продукции на складе и так далее.

HTML5 Server-Sent Events: учимся реагировать на запросы сервера при помощи Javascript

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 в этот список не вошел, что уже даже не удивляет.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript, HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 6902   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031