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

event: bid установка свойства type объекта события 

data: G00G установка свойства data

data: 999 добавляется перевод строки и дополнительные данные

 пустая строка генерирует событие message

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

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

XMLHttpRequest

и подписываться на поток сообщений, поступающих от собеседников, с помощью объекта

EventSource

. Пример 18.15 демонстрирует, насколько просто реализовать клиента на основе объекта

EventSource

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

EventSource

<script>

window.onload = function() {

<b>  // Позаботиться о некоторых особенностях пользовательского интерфейса</b>

<b>  var nick = prompt(&quot;Введите ваше имя&quot;); // Получить имя пользователя</b>

 var input = document.getElementById("input"); // Отыскать поле ввода

 input.focus(); // Передать фокус ввода

<b>  // Подписаться на получение новых сообщений с помощью объекта EventSource</b>

 var chat = new EventSource("/chat");

 chat.onmessage = function(event) { // Получив новое сообщение,

 var msg = event.data; // Извлечь текст

 var node = document.createTextNode(msg); // Преобр. в текстовый узел

 var div = document.createElementC'div"); // Создать <div>

 div.appendChild(node); // Добавить текст, узел в div

 document.body.insertBefore(div, input); // И добавить div перед input

 input.scrollIntoView(); // Прокрутить до появления

<b>  }                                          // input в видимой области</b>

<b>  // Передавать сообщения пользователя на сервер с помощью XMLHttpRequest</b>

 input.onchange = function() { // При нажатии клавиши Enter

 var msg = nick + ": " + input.value; // Имя пользователя + введ. текст

 var xhr = new XMLHttpRequest(); // Создать новый XHR

 xhr.open("POST", "/chat"); // POST-запрос к /chat,

 xhr.setRequestHeader("Content-Type", // Тип - простой текст UTF-8

 "text/plain;charset=UTF-8");

 xhr.send(msg); // Отправить сообщение

<b>    input.value = &quot;&quot;;                    // Приготовиться к вводу</b>

<b>  }                                      // следующего сообщения</b>

};

</script>

<b>&lt;!-- Пользовательский интерфейс чата состоит из единственного поля ввода --&gt;</b>

<b>&lt;!-- Новые сообщения, отправленные в чат, вставляются перед полем ввода --&gt;</b>

<input id="input" style="width:100%"/>

На момент написания этих строк объект

EventSource

поддерживался в Chrome и Safari и должен был быть реализован компанией Mozilla в первом же выпуске Firefox, вышедшем после версии 4.0. В броузерах (таких как Firefox), где реализация объекта

XMLHttpRequest

возбуждает событие «readystatechange» в ходе загрузки ответа (для значения 3 в свойстве

readyState

) многократно, поведение объекта

EventSource

относительно легко имитировать с помощью объекта

XMLHttpRequest

, как демонстрируется в примере 18.16. С модулем имитации пример 18.15 будет работать в Chrome, Safari и Firefox. (Пример 18.16 не будет работать в броузерах ІE и Opera, поскольку реализации объекта

XMLHttpRequest

в этих броузерах не генерируют события в ходе загрузки.)

Пример 18.16. Имитация объекта

EventSource

с помощью
XMLHttpRequest

<b>// Имитация прикладного интерфейса EventSource в броузерах, не поддерживающих его.</b>

<b>// Требует, чтобы XMLHttpRequest генерировал многократные события readystatechange </b>

<b>// в ходе загрузки данных из долгоживущих HTTP-соединений. Учтите, что это не полноценная </b>

<b>// реализация API: она не поддерживает свойство readyState, метод close(), а также </b>

<b>// события open и error. Кроме того, регистрация обработчика события message выполняется </b>

<b>// только через свойство onmessage -- эта версия не определяет метод addEventListener</b>