HTTP push in a
cross-domain environment

О чем это?

HTTP push — один из вариантов распространения контента в Интернете, когда информация поступает от сервера к клиенту.

Альтернативные названия:

HTTP streaming
Comet

Зачем это надо?

Cистемы уведомлений
Чатики (IM)
Пересылка картинок?!

Сross-domain

Зачем нужна кросс-доменность?

Существующая инфраструктура или конфигурация
Более высокая надежность

Проблемы

Same origin policy

Как забороть?

JSON with padding (JSONP)


$.getJSON('m.com/?callback=?', function(data) {
 alert(data);
});

Нюансы:

document.createElement('script');
window.setTimeout();

The document.domain property


 document.domain = 'home.com';
  $.get('http://my.home.com/', function(data) {
    alert(data);
  });

Нюансы:

Только root-домены, в пределах одного протокола
По задумке, должна была быть read-only :)
Для http push не подходит в принципе

Cross-Origin Resource Sharing(CORS)


  
  Access-Control-Allow-Origin: http://foo.mysite.com

FF3.5+, Safari4+, Chrome3+, IE8+

Cross-document(web) messaging

Document А:

 
var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello B', 'http://documentB.com/');

Document B:

 
window.addEventListener('message', function(event) {
       alert(event.data); 
});

Для http push не подходит в принципе :)

HTTP push: реализация

Forever iframe / Streaming
multipart/x-mixed-replace
AJAX Long-Polling
Server Sent Events(SSE)
WebSockets
Flash Sockets

Forever iframe / Streaming

HTTP/1.1 200 OK 
Content-Type: text/plain 
Transfer-Encoding: chunked 
23 
This is the data in the first chunk 
1A 
and this is the second one 
0

HTTP/1.1 only
Куча хаков для браузеров
Отслеживание состояния отсутствует
SOP!

multipart/x-mixed-replace

 
Content-type: multipart/x-mixed-replace

AJAX c периодическим onreadystatechange
Каждое сообщение инвалидирует предыдущее
Поддержка всех кроме IE
MJPEG и IP камеры
SOP!

AJAX Long-Polling

 function waitForMsg(){
  $.ajax({
       type: "GET",
       url: "/messages",
       cache: false,
       timeout: 50000, // 50s
       success: function(data){ 
  		   setTimeout(waitForMsg, 1000);
       } 
  });
}

Добавляем JSONP и получаем cross-domain!

Server Sent Events

 
 var source = new EventSource('/stats');
 
 source.onmessage = function (event) {
   // process server message
 };

Односторонний
CORS понимают не все
Традиционно отсутствует в IE

WebSockets

var ws = new WebSocket("ws://localhost/echo");
ws.onopen = function() {
  ws.send("Message to send");
};
		   
ws.onmessage = function(evt) { 
   // Message is received 
};

Full-duplex!
CORS!
IE10+, Chrome14+, Firefox6+, Safari6+
hixie vs. hybi protocols

FlashSockets

Flash XMLSocket relay
Uni-directional
CORS

A note on SSL

Self-signed сертификаты иногда не работают
SSL ←→ non-SSL
CORS ничего не гарантирует

Что же выбрать?

WebSockets
JSONP Long polling

Nginx Push Stream

Преимущества

Это же nginx!
EventSource, WebSocket, Long Polling (+JSONP), Forever Iframe
pushstream.js
Полное решение, все из коробки
Быстро конфигурируется

Pub/sub example


# Subscribe
curl -s -v 'http://localhost/sub/my_channel_1'

# Publish   
curl -s -v -X POST 'http://localhost/pub?id=my_channel_1' -d 'Hello!'

# Delete Channel
curl -s -v -X DELETE 'http://localhost/pub?id=my_channel_1'
	
# All Channels Stats summarized (json format)
curl -s -v 'http://localhost/channels-stats'

pushstream.js

var pushstream = new PushStream({
   host: window.location.hostname,
   port: window.location.port,
   modes: "websocket|eventsource|longpolling|stream"
 });
		 
 pushstream.onmessage = function(text, id, channel) {
	 // process message
 };
 pushstream.addChannel('ch1');
 pushstream.connect();