HTML5 Server Push_Motic Node College College

Для общих веб -приложений большинство разработчиков не новое. В веб -приложениях между браузером и сервером используется интерактивный режим запроса/ ответа. Браузер выдает запрос, и сервер генерирует соответствующий ответ в соответствии с запросом. Браузер обрабатывается для получения ответа на пользователей. Формат ответа может быть HTML, XML или JSON. В стиле архитектуры остального и популярностью Ajax сервер использует JSON в качестве формата данных ответа. Веб -приложение использует объект Xmlhttprequest для отправки запроса и динамического обновления содержимого страницы в соответствии с данными, возвращаемыми сервером. Вообще говоря, операции пользователей на странице, такие как щелчок или перемещение мыши, вызовут соответствующие события. Запрос выдается объектом Xmlhttprequest, а страница имеет локальное обновление после ответа на сервер. Недостатки этого метода заключается в том, что данные, сгенерированные сервером, не могут быть уведомлены о браузере во времени, но их необходимо получить браузером до отправки следующего запроса. Для некоторых приложений с высокими требованиями к данным эта задержка недопустима. Чтобы удовлетворить потребности таких приложений, необходимо некоторых способов перемещать данные с сервера в браузер, чтобы убедиться, что изменения данных на стороне сервера могут быть уведомлены пользователям в первый раз. Есть много общих решений, которые можно разделить на две категории. Разница между этими двумя методами заключается в том, основана ли он на протоколе HTTP. Практика не использования протокола HTTP состоит в том, чтобы использовать новые спецификации WebSocket HTML 5, а метод использования протокола HTTP включает в себя простое вращение, технологию COMET и событие HTML 5 Server Push, описанное в этой статье. Эти технологии будут представлены ниже.

Прежде чем представить событие HTML 5 Server Push, сначала представьте некоторые из тех, кто упомянут выше технологии данных, упомянутых выше сервера. Первый - WebSocket. Спецификация WebSocket является важной частью HTML 5. Она поддерживалась многими основными браузерами, и многие приложения, разработанные на основе WebSocket. Так же, как имя выражено, WebSocket использует подключение к куртке, основанное на протоколе TCP. После использования WebSocket он фактически создает набор подключений Word между сервером и браузером, которые могут быть переданы в двухчастых данных. Функция WebSocket очень мощная, и она гибкая в использовании, что может подходить для разных сценариев. Тем не менее, технология WebSocket также относительно сложна, включая реализацию сервера и стороны браузера, отличной от обычных веб -приложений.

За исключением WebSocket, другие методы реализации основаны на протоколе HTTP для достижения эффекта реального толкания. Первым методом является простое вращение, то есть браузер время от времени отправляет запрос на сервер, чтобы узнать, есть ли обновление данных. Этот подход относительно прост и может решить проблему в определенной степени. Однако тщательно рассмотрим интервал времени вращения. Если интервал между вращением слишком длинный, он заставит пользователей не получать обновленные данные во времени;

Технология Comet улучшила недостатки простого вращения, используя длинные запросы. Каждый запрос на длительное вращение, сервер будет держать соединение в период открытия в течение определенного периода времени, а не закрывать его сразу после завершения ответа. Преимущество этого заключается в том, что в течение периода времени, когда соединение открыто, обновление данных, сгенерированное сервером, может быть возвращено в браузер во времени. Когда длинное соединение будет закрыто, браузер немедленно откроет новое длинное соединение, чтобы продолжить запрос. Тем не менее, реализация технологии COMET требует поддержки третьей частичной библиотеки на сервере и стороне браузера. Таким образом, сравнение, четыре различных технология, упомянутые выше, не рекомендуются для использования из -за их дефектов. Технология COMET не является частью стандарта HTML 5. Технические характеристики WebSocket и технология Server Push являются частью стандарта HTML 5. Тем не менее, спецификации WebSocket более сложны и подходят для сцен, которые должны быть сложными и двумя передачами передачи данных. Для простых сценариев данных сервера достаточно, чтобы использовать события Push Server.

С точки зрения поддержки браузеров, события Server Push были поддержаны на большинстве рабочих столов и мобильных браузеров, за исключением IE. Браузеры и версии события Push Support Server включают: Firefox 6.0+, Chrome 6.0+, Safari 5.0+, Opera 11.0+, iOS Safari 4.0+, Opera Mobile 11.1+, Chrome для Android 25.0+, Firefox для Andr Andr Oid 19.0 + и Blackberry Browser 7.0+ et al. Поддержка IE имеет подробное введение в следующих главах.

Указаны следующие спецификации спецификации события Server Push.

Спецификация событий сервера является неотъемлемой частью спецификации HTML 5. Эта спецификация относительно проста, в основном состоит из двух частей: первая часть - это протокол связи между сервером и стороной браузера, а вторая часть - это объект Eventource, используемый браузером для использования JavaScript. Протокол связи - это простой протокол, основанный на чистом тексту. Содержание ответа на сервере-это текстовый/событие. Содержание текста ответа может рассматриваться как поток событий, который состоит из различных событий. Каждое событие состоит из двух частей: тип и данные, и каждое событие может иметь дополнительный идентификатор. Содержание различных событий разделено пустыми линиями (/r/n), которые включают только ввод автомобиля и королевский символ. Данные каждого события могут быть составлены из нескольких строк. Список кода 1 приводит пример ответа на сервер.

 Данные: Первое событие.

Как показано в списке 1, каждое событие разделено пустой линией. Для каждой строки толстая кишка (:) - это тип линии ранее, а соответствующее значение за толстой кишкой. Возможные типы включают:

1. Тип пуст, указывая на то, что линия является комментарием и будет игнорирована во время обработки.
2. Тип - это данные, что означает, что линия содержит данные. Это может появляться много раз в начале данных. Все эти строки являются данными об инциденте.
3. Тип - это событие, указывающее, что банк используется для объявления типа события. При получении данных браузер будет создавать соответствующий тип события.
4. Тип - это идентификатор, указывающий, что линия используется для объявления идентификатора события.
5. Тип повторно, указывая, что линия используется для объявления времени ожидания до того, как браузер подключен после отключения соединения.

В приведенном выше коде первое событие содержит только первое событие, которое будет генерировать события по умолчанию; Событие - Event Event/nfounth Eovent продолжить. Когда существует несколько строк данных, фактические данные подключаются данными для изменения строки.

Если данные, возвращаемые сервером, содержит идентификатор события, браузер запишет идентификатор недавно полученного события. Если подключение к серверу прерывается, когда конец браузера снова подключен, логотип в прошлом случае событие получает HTTP Head-EVENT-ID. Сервер может быть определен идентификатором события, отправленным стороной браузера, чтобы определить, какое событие начинает продолжать соединение.

Для ответа, возвращаемого стороной сервера, сторона браузера должна использовать объект Eventsource в JavaScript для обработки. Eventsource использует стандартный метод мониторинга событий, который должен добавить только соответствующий метод обработки событий в объект. Eventsource предоставляет три стандартных события, как показано в таблице 1.

Как упоминалось ранее, сервер может вернуть событие пользовательского типа. Для этих событий вы можете использовать метод addeventListener для добавления соответствующего метода обработки событий. Кодовый список 2 приводит пример объекта Eventorce.

 var es = new Eventource ('Events'); данные);});

Как показано выше, после создания объекта EventOurce конкретно метод обработки событий может быть добавлен с помощью методов OnMessage и AddEventListener. Когда сервер имеет новые события, будет вызван соответствующий метод обработки событий. Роль свойства OnMessage объекта EventOurce аналогична роли AddEventListener («Сообщение»), но атрибут OnMessage поддерживает только один метод обработки событий. После введения содержимого спецификации события Push Server реализация сервера введена ниже.

Из описания протокола связи в предыдущем разделе можно увидеть, что событие Server Push является более простым протоколом. Реализация стороны сервера относительно проста. Разнообразие различных технологий сервера можно найти в сообществе с открытым исходным кодом. Не сложно развиваться. В этой статье используется Java в качестве языка реализации сервера. Соответственно внедрение проекта с открытым исходным кодом на основе-эвогин-сервелете, см. Справочные ресурсы. Ниже приведен конкретный пример, чтобы проиллюстрировать, как использовать проект пристани-эвоян-эворса. Пример используется для моделирования случайного движения объекта в ограниченном пространстве. Объект начинается с случайной позиции, а затем случайным образом выбирает одно направление сверху, внизу, слева и правой направлениях и перемещает случайное расстояние в этом направлении. Сервер постоянно меняет положение объекта и доталкивает информацию о местоположении в браузер, который отображается браузером.

： ： 一部分是用来产生数据的 org.eclipse.jetty.servlets.eventsource 接口的实现 另一部分是作为浏览器访问端点的继承自 另一部分是作为浏览器访问端点的继承自 org.eclipse.jetty.servlets.eventsourceservlet 类的Реализация сервлета. Следующий код дает класс реализации интерфейса Eventource.

Eventsource Interface реализация класса движения Eventsource

 Общедоступное движение. logger .getlogger (getClass (). getName (); .nextint (ширина); (LasteVentid); .split (,); POS [1], 10);} Catch (NumberFormateXception e) {} if (isvalidmove (xpos, ypos)) {x = xpos; Информация.); .data (id) в соответствии с местоположением; , e); MOVE = GETMOVE (); Оценивая, является ли текущая позиция движения законной. xdir = new int}; )};}}

Движение Eventsource необходимо реализовать метод OnoPen, OnResume и Onclose интерфейса Eventource. Как методы OnoPen, так и OnResume имеют параметр интерфейса EventsOurce.Emitter, который можно использовать для отправки данных. Методы, содержащиеся в интерфейсе Eventsource.emitter, включают данные, события, комментарии, идентификатор и закрытие, которые соответствуют различным типам событий в протоколе связи, соответственно. Метод OnResume также содержит дополнительный параметр LasteVEventID, указывающий идентификатор последнего события, отправленного заголовком последнего события.

Основная логика событий, созданная в событии в классе движения, заключается в методе запроса. Этот метод содержит неограниченный цикл, который изменяет позицию каждые 2 секунды, и в то же время отправляет обновленную позицию в конец браузера через метод данных положения обновления через метод данных интерфейса Eventsource.emitter. Каждое событие имеет соответствующий идентификатор, а значение идентификатора является самой позицией. Если браузер повторно связан после отключения соединения, объект может быть перемещен с последней позиции.

Легко реализовать сервис, соответствующий классу движения. В реализации метода NewEventSource необходимо возвращать класс MoveSeventSource, как показано ниже. Всякий раз, когда устанавливается браузер, сервис создает объект нового класса движения Eventsource для обработки запроса.

 Public Class Movementservlet extendsarcesorceservlet {@override защищенные события Newssource (httpservletrequest, String clientId) возвращает новое движение EventSource (800, 600, 20);}}

В реализации сервера следует отметить, что следует добавить соответствующую поддержку фильтра сервера. Это требование основы продолжения пристани, на которую опирается проект пристани-эвоян-эворса, в противном случае возникнут ошибки в этом случае. Метод добавления фильтра состоит в том, чтобы добавить содержимое конфигурации, как показано ниже в файле web.xml.

 <filter> <filter-name> продолжение </filter-name> <filter-class> org.eclipse.jetty.contination.continationfilter </filter-class> </filter> <filter-ma Ppring> <Filter-name> Продолжение </filter-name> <url-pattern>/sse/*</url-pattern> </filter-mapping>

Реализация стороны браузера относительно проста. Следующий код дает соответствующую реализацию. Используйте квадрат на странице, чтобы представить объект. Когда новое событие получено, позиция блока находится на странице в соответствии с информацией о координате, приведенной в данных о событии.

 var es = new Eventsource ('sse/movement'); [1];

После введения основной стороны сервера и окончания браузера, более важная поддержка IE представлена ​​ниже.

Большая проблема с использованием нативного объекта Browser Eventsource заключается в том, что IE не обеспечивает поддержку. Чтобы оказать ту же поддержку, т.е., как правило, есть два способа. Первый способ состоит в том, чтобы использовать оригинальный объект Eventource в других браузерах, используя при этом простое вращение или технологию кометы; Полем В этой статье используется полифильная технология, просто загружая третью часть библиотеки JavaScript на странице. Применение побочного кода браузера не нужно изменять. Обычно рекомендуется использовать второй метод, потому что таким образом, на стороне сервера требуется только одна технология реализации.

Нелегко предоставить аналогичный основной объект Eventource для IE. Теоретически, для получения содержимого ответа на стороне сервера необходим только объект xmlhttprequest, а посредством текстового анализа можно извлечь соответствующие события, а соответствующий метод обработки событий может быть инициирован. Проблема заключается в том, что объект xmlhttprequest на IE не поддерживает содержание ответа полученной части. Только после завершения ответа его можно получить. Потому что событие Push Server использует длинное соединение. Когда соединение всегда открыто, соответствующее событие не может быть инициировано через объект xmlhttprequest, и соответствующее событие не может быть запускается. Более конкретно, когда готовый участок объекта xmlhttprequest составляет 3 (readystate_interactive), его атрибут ответа не может быть получен.

Чтобы решить проблему объектов xmlhttprequest по т.е., вам необходимо использовать объект Xdomainrequest, представленный в IE 8. Роль объекта XdomainRequest состоит в том, чтобы отправить перекрестный запрос Ajax. Объект XdomainRequest обеспечивает событие OnProgress. Когда происходит событие OnProgress, некоторое содержание ответа может быть получено через свойство ответа. Это самая большая разница между объектом Xdomainrequest и объектом Xmlhttprequest. После использования объекта XdomainRequest для открытия соединения с стороной сервера, когда новые данные генерируются на сервере, он может быть обработан по сравнению с событием OnProgress объекта XdomainRequest.

Однако из -за первоначальной цели объекта XdomainRequest -выдать запросы Ajax Cross -Domain. Эти ограничения повлияют на его реализацию как объект Eventource. Конкретные ограничения и решения показаны ниже:

1. Ответ сервера должен содержать головку с авостовой торигином доступа, которая используется для объявления того, что разрешено URL, из каких доменов разрешается. *Это означает разрешение доступа из любого домена, и это значение не рекомендуется. Обычно используйте тот же домен, что и текущее приложение, ограничивая только доступ от переднего домена.
2. Запрос от объекта XdomainRequest не может содержать пользовательскую HTTP Head, которая ограничивает идентификатор браузера, недавно полученного браузером. Этот идентификатор может быть проведен только через другие способы HTTP -запросов, такие как параметры, запрашиваемые GET или корпус содержания запроса POST.
3. Тип контента (тип контента) объекта XdomainRequest может быть только текстовым/простым. Это означает, что когда используется запрос POST, структура, используемая сервером, таким как Сервис, не будет автоматически анализировать содержимое запроса POST. Оригинальный содержимое запроса может быть проанализировано только на сервере, чтобы получить значения параметров.
4. Запрос, выданный объектом XdomainRequest, не включает никакой информации, связанной с аутентификацией пользователя, включая файлы cookie. Это означает, что если сервер должен быть аутентифицирован, другие методы HTTP -запросов передают информацию об аутентификации пользователя, такие как идентификатор сеанса.

Из -за этих ограничений на объект XdomainRequest, реализация сервера также должна внести соответствующие изменения. Эти изменения включают в себя возврат головы-анологии доступа;

Полифильская библиотека, используемая в этой статье, представляет собой проект Eventsource, разработанный Yaffle на GitHub. После использования библиотеки полифилла и изменения реализации стороны сервера вы можете использовать сервер для продвижения события в браузере, то есть 8 и выше. Если вам нужно поддержать IE 7, вы можете использовать только простую технологию запроса или кометы. См. Справочные ресурсы в примере кода этой статьи.

Если вам необходимо доставить данные с сервера в браузер, технологии, которые можно использовать на основе стандартов спецификации HTML 5, включают события WebSocket и Server Push. Разработчики могут выбрать правильную технологию в соответствии с конкретными потребностями приложения. Если вам нужно только вытащить данные с сервера, стандарт события Push Server проще и проще в достижении. В этой статье подробно подробно описано стандартное содержание события Push Server, реализацию сервера и стороны браузера, а также проанализировал, как поддержать браузер IE.