JavaScript. Подробное руководство, 6-е издание

Пример 18.14. Выполнение запросов на получение данных в формате JSONP с помощью элемента <script>

  // Выполняет запрос по указанному URL-адресу на получение данных в формате JSONP и передает
  // полученные данные указанной функции обратного вызова. Добавляет в URL параметр запроса
  // с именем ''jsonp'', чтобы указать имя функции обратного вызова,
  function getJS0NP(иrl, callback) {
// Создать для данного запроса функцию с уникальным именем
   var cbnum = "cb" + getJSONP.counter++; // Каждый раз увеличивать счетчик
   var cbname = "getJSONP.” + cbnum; // Как свойство этой функции

   // Добавить имя функции в строку запроса url, используя формат представления данных
   // HTML-форм. Здесь используется параметр с именем "jsonp". Некоторые веб-службы
   // с поддержкой JSONP могут использовать параметр с другим именем, таким как "callback",
   if (url.indexOfC?") === -1) // URL еще не имеет строки запроса
   url += "?jsonp=" + cbname; // добавить параметр как строку запроса
   else // В противном случае
   url += "&jsonp=" + cbname; // добавить как новый параметр.

   // Создать элемент script, который отправит запрос
   var script = document.createElement("script");

   // Определить функцию, которая будет вызвана сценарием
   getJSONP[cbnum] = function(response) {
   try {
   callback(response); // Обработать данные
   }
   finally { // Даже если функция или ответ возбудит исключение
   delete getJSONP[cbnum]; // Удалить эту функцию
   script.parentNode.removeChild(script); // Удалить элемент script
   }
   };
   // Инициировать HTTP-запрос
   script.src = url; // Указать url-адрес элемента
   document.body.appendChild(script); // Добавить в документ
  }
  getJSONP.counter = 0; // Счетчик, используемый для создания уникальных имен

18.3. Архитектура Comet на основе стандарта «Server-Sent Events»

Проект стандарта «Server-Sent Events» определяет объект EventSource, который делает практически тривиальным создание приложений с архитектурой Comet. При его использовании достаточно передать URL-адрес конструктору EventSource и затем обрабатывать события «message» в полученном объекте:

  var ticker = new EventSourcefstockprices. php”);
  ticker.onmessage = function(e) {
   var type = e.type;
   var data = e.data;
  // Обработать строки type и data.
  }

Объект события «message» имеет свойство data, хранящее строку, отправленную сервером с этим событием в качестве полезной нагрузки. Кроме того, объект события имеет свойство type, как и все другие объекты событий. По умолчанию это свойство имеет значение «message», но источник события может указать в этом свойстве другую строку. Все события от данного сервера, источника событий, обрабатываются единственным обработчиком onmessage, который при необходимости может передавать их другим обработчикам, опираясь на свойство type объекта события.

Протокол обмена, определяемый стандартом «Server-Sent Event», достаточно прост. Клиент устанавливает соединение с сервером (когда создает объект EventSource), а сервер сохраняет это соединение открытым. Когда происходит событие, сервер передает через соединение текстовую строку. Передача события через сеть выглядит примерно следующим образом:

  event: bid установка свойства type объекта события
  data: G00G установка свойства data
  data: 999 добавляется перевод строки и дополнительные данные
   пустая строка генерирует событие message

Протокол имеет также некоторые дополнительные особенности, позволяющие присваивать событиям идентификаторы и дающие клиенту возможность после восстановления соединения с сервером передавать этот идентификатор, чтобы сервер мог повторно послать все события, пропущенные клиентом. Однако эти особенности не имеют большого значения в данном обсуждении.

Одно из очевидных применений архитектуры Comet - реализация чатов: клиент может посылать в чат новые сообщения с помощью объекта XMLHttpRequest и подписываться на поток сообщений, поступающих от собеседников, с помощью объекта EventSource. Пример 18.15 демонстрирует, насколько просто реализовать клиента на основе объекта EventSource.

Пример 18.15. Простой клиент чата на основе объекта EventSource