Шрифт:
<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 не поддерживается,