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

  <script>
  window.onload = function {
   // Позаботиться о некоторых особенностях пользовательского интерфейса
   var nick = prompt("Введите ваше имя"); // Получить имя пользователя
   var input = document.getElementById("input"); // Отыскать поле ввода
   input.focus; // Передать фокус ввода

// Подписаться на получение новых сообщений с помощью объекта EventSource
   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; // Прокрутить до появления
   } // input в видимой области

   // Передавать сообщения пользователя на сервер с помощью XMLHttpRequest
   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); // Отправить сообщение
   input.value = ""; // Приготовиться к вводу
   } // следующего сообщения
  };
  </script>
  <!-- Пользовательский интерфейс чата состоит из единственного поля ввода -->
  <!-- Новые сообщения, отправленные в чат, вставляются перед полем ввода -->
  <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

  // Имитация прикладного интерфейса EventSource в броузерах, не поддерживающих его.
  // Требует, чтобы XMLHttpRequest генерировал многократные события readystatechange
  // в ходе загрузки данных из долгоживущих HTTP-соединений. Учтите, что это не полноценная
  // реализация API: она не поддерживает свойство readyState, метод close, а также
  // события open и error. Кроме того, регистрация обработчика события message выполняется
  // только через свойство onmessage -- эта версия не определяет метод addEventListener
  if (window.EventSource === undefined) { // Если EventSource не поддерживается,
   window.EventSource = function(url) { // использовать эту его имитацию,
   var xhr; // HTTP-соединение...
   var evtsrc = this: // Используется в обработчиках,
   var charsReceived = 0; // Так определяется появление нового текста
   var type = null; // Для проверки свойства type ответа,
   var data = ""; // Хранит данные сообщения
   var eventName = "message": // Значение поля type объектов событий
   var lastEventld = ""; // Для синхронизации с сервером
   var retrydelay = 1000: // Задержка между попытками соединения
   var aborted = false: // Установите в true, чтобы разорвать соединение

   // Создать объект XHR
   xhr = new XMLHttpRequest:

   // Определить обработчик события для него
   xhr.onreadystatechange = function {
   switch(xhr.readyState) {
   case 3: processData: break; // При получении фрагмента данных
   case 4: reconnectO: break; // По завершении запроса
   }
   };