(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

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

Источник: coolwebmasters

Вы наверняка знаете о 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 в этот список не вошел, что уже даже не удивляет.

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 19.03.2013 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
Quest Software. SQL Navigator for Oracle
SAP® Crystal Presentation Design 2016 WIN INTL NUL
FastCube.Net Standard Edition Single License
Allround Automation PL/SQL Developer - Unlimited license
EMS Data Comparer for Oracle (Business) + 1 Year Maintenance
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Программирование на Microsoft Access
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Один день системного администратора
Проект mic-hard - все об XP - новости, статьи, советы
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Ставки на спорт для новичков (2)
Если читаете эту статью https://futbolstavkiprognozy.ru/stavki-dlya-novichkov/, то наверняка...
 
Реклама (4)
Добрый день. Какое продвижение сделать собственному бизнесу?
 
Рабочее зеркало БК Мостбет - как найти? (1)
Узнайте обо всех особенностях по поиску рабочего зеркала БК Мостбет из нашей статьи...
 
Помощь по MS Access (337)
Доброе время суток. Случайно оказался на этом сайте, искал статьи по OLAP. Вижу, что...
 
Лучшие букмекеры по отзывам игроков (1)
Составить объективный рейтинг букмекерских контор, работающих в России, очень сложно. Даже в...
 
 
 



    
rambler's top100 Rambler's Top100