Главная -> Статьи о HTML5 -> Методы коммуникации в HTML 5

Методы коммуникации в HTML 5

Как Вы уже поняли из наших предыдущих постов, HTML5 - это не только семантика, но и набор JavaScript API. В этой статье мы попробуем рассказать Вам о методах коммуникации между клиентом и сервером и между несколькими приложениями.

Будут рассмотрены следующие технологии:

  • XML HTTP Request (XHR) и XHR2
  • Web messaging
  • Web Sockets
  • Server Sent Events
  • Web Workers

Стандартная модель коммуникации

Давайте сначала рассмотрим что общего во всех методах коммуникации. Во-первых, любой обработчик события о получении сообщения содержит поле data, в котором принимается собственно сообщение. Во-вторых все модели коммуникации построены на базе атрибута onmessage и метода postMessage (названия не обязательно такие, но принцип тот же):

// Код приложения принимающего событие
recipient.onmessage = function (event) {
 console.log('Получено сообщение: ' + event.data);
};

// Код приложения отправляющее событие
recipient.postMessage('Привет'); // так же может выглядеть так: recipient.send('Привет');

 

Это не значит что все технологии используют именно эту модель, но большинство технологий работает именно так.

Также необходимо заметить, что многие браузеры не позволяют передавать в атрибут data ничего кроме строки, поэтому иногда удобно использовать JSON для того чтобы передать что-либо кроме строки.

XHR & XHR2 с CORS

XHR (XML HTTP Request) запросы могут быть как синхронными, так и асинхронными. Более того, XHR - единственный способ построить синхронную связь.

Многие из Вас уже знакомы с XHR, поэтому долго на нем останавливаться мы не будем. Давайте лучше рассмотрим технологию XHR2. Из нововведений в ней - возможность передавать файлы от одного приложения к другому, при этом отслеживать уровень загрузки с помощью события progress.

Еще в XHR2 поддерживается технология Cross-Origin Resource Sharing (CORS), которая позволяет обменивать данными между несколькими доменами. Правда это возможно только в том случае, когда обе стороны разрешают междоменную передачу.

В следующем примере мы покажем Вам, каким образом можно организовать передачу данных между двумя приложениями:

<script>
var client = new XMLHttpRequest();
client.onreadystatechange = function () {
 if (this.readyState == 4 && this.status == 200) {
  alert('Answer from server: ' + this.responseText);
 }
};
client.open('GET''http://html5blog.ru/examples/cors-access.php');
client.send();
</script>

По адресу http://html5blog.ru/examples/cors-access.php находится следующий код:

<?php
header('Access-Control-Allow-Origin: *');
?>
Hello from html5blog.ru

 

php строка разрешает принимать соединения со всех доменов, таким образом Вы можете попробовать обратиться к нашему серверу с любого другого домена.

Живой пример можно увидеть по этой ссылке: http://html5blog.ru/examples/xhr-and-xhr2.php

Что касается поддержки браузерами, то Internet Explorer 8 поддерживает CORS, но не поддерживает XHR2, поэтому с осторожностью используйте эту технологию.

XHR поддерживается всеми без исключения браузерами (правда IE 6 поддерживает её только с помощью ActiveX).

XHR2 и CORS поддерживаются браузерами Firefox 3.5, Safari и Google Chrome.

Web messaging

Это API более старое, однако его удобно использовать, например, для передачи данных в iframe. Код внутри iframe может быть примерно таким:

window.onmessage = function (event) {
 if (event.origin == 'mytrustedsite.ru') {
  alert('Сайт написал: ' + event.data);
 }
};

 

Вне iframe Вы можете написать примерно такой код:

iframe.contentWindow.postMessage("Привет!", location.host);

 

Этот API позволяет передавать данные между двумя доверенными доменами. Кстати не забудьте, что Вам никто не запрещал передавать JSON строку.

Эта технология поддерживается всеми современными браузерами и Internet Explorer от 8й версии.

Живой пример можете увидеть тут: http://html5demos.com/postmessage2

Web Sockets

Веб сокеты используются для того, чтобы принимать и отправлять сообщения на сервер, т.е. осуществляется двухсторонняя связь. В отличие от других рассмотренных технологий, сокеты е требуют каких-то особенных разрешения для передачи дынных между несколькими доменами. Т.е. Ваше приложение может находиться на одном сервере, а вещание данных будет происходить с другого сервера.

Вы можете отправлять сообщения только когда сокет подключен. Модель взаимодействия выглядит примерно так:

var ws = new WebSocket('ws://somesite.com/updates');
ws.onmessage = function (event) {
 alert(event.data);
};
ws.onopen = function () {
 ws.send('Присоединились!');
};

 

После того как сокет закроется, Вы больше не сможете им воспользоваться. Т.е. нет способа переподключить сокет. Подключение происходит только во время вызова конструктора WebSocket.

Серверная часть может использоваться любая. Например Вы можете использовать этот темплейт: http://nodejs.org/

Пример web sockets можете увидеть тут: http://html5demos.com/web-socket

Что касается поддержки браузерами, то сокеты поддерживаются в Google Chrome и Safari. Начиная с версии 4.0.1 сокеты будут поддерживаться также браузером Mozilla Firefox.

Server-Sent Events

Этот API позволяет отправлять сообщения от сервера к клиентам. Связь организуется однонаправленная, т.е. клиент не может воздействовать на сервер - он только слушает события.

Пример использования Server-Sent Events выглядит примерно так:

var es = new EventSource('/sse');
es.onopen = function () {
 console.log('Поток открыт');
};

es.onmessage = function (event) {
 console.log('Новое сообщение от сервера: ' + event.data);
};

 

Объект SSE автоматически присоединяется к серверу при создании, при этом вызывается событие onopen.

Пример использования Server-Sent Events можно посмотреть тут: http://node.remysharp.com:8001/sse-client.html

Поддерживается браузерами Opera 11, Safari и Google Chrome.

Web Workers

С помощью Web Workers Вы не сможете создать полноценное общение между сервером и клиентом, однако мы решили рассказать об этом API, т.к. в нем есть похожая схема взаимодействия. Правда используется она только для общения потоков одного приложения.

Для чего вообще нужны Web Workers?

Представим, что у Вас на сайте много JavaScript кода и его обработка занимает много времени. Из-за этого интерфейс приложения подтормаживает. Если мы выделим весь JavaScript код в отдельный поток Web Workers то решим проблему залипания интерфейса. Таким образом, служебный JavaScript будет выполняться в фоновом режиме, а интерфейс будет выполняться в своем потоке.

С помощью следующего кода, наше приложение может общаться с экземпляром Web Worker:

var worker = new Worker('bigjob.js');
worker.onmessage = function (event) {
 alert('Сообщение от Web Workerа: ' + event.data);
};

worker.postMessage('task=job1');

 

В файле bigjob.js находится примерно такой код:

this.onmessage = function (event) {
 var job = event.data;
 if (job == 'task=job1') {
  job1();
 } else if (job == 'task=job2') {
  job2();
 }
};
// Простой пример
function job1() {
 // Сделать что-нибудь
 while (working) {
  // Продолжить выполнение
  this.postMessage('job1 на ' + amountComplete + '% завершена');
 }
 this.postMessage('job1 завершена');
}

 

Web Workers работают во всех современных браузерах кроме Internet Explorer.

Заключение

Надеемся, что приведенный материал пригодится Вам. Конечно он не претендует на полноценное руководство, однако с помощью него Вы можете выбрать тот или иной способ коммуникации в Ваших приложениях.