Comet Server Push Over Web
66
Comet: Server-Push in Web @morgancheng March 2 nd , 2011
-
Upload
mocheng -
Category
Technology
-
view
4.979 -
download
1
description
Comet: Server push over Web
Transcript of Comet Server Push Over Web
Comet: Server-Push in Web
@morganchengMarch 2nd, 2011
Pull with HTTP
HTTP/1.1 200 OKContent-Type: text/html;charset=utf-8Transfer-Encoding: chunked
<!DOCTYPE html><html>…
GET / HTTP/1.1Host: www.yahoo.comConnection: keep-alive Request
Response
What If Web Server Want To Push?
Comet
Actually, it is named after…
Who is using Comet?
Battlefields: Browsers
History Today Future
History
multipart/x-mixed-replace
First Browser War
VS
NetScape: multipart/x-mixed-replace
HTTP/1.1 200 OKContent-Type: multipart/x-mixed-replace;boundary=ABCXYZ
--ABCXYZContent-Type:application/octet-stream
Hello
--ABCXYZContent-Type:application/octet-stream
World
--ABCXYZ—
Fallout
• Firefox inherits multipart/x-mixed-replace
• Safari & Chrome supports this type as well, but not in XMLHttpRequest
Today
Poll
Flash, Java & SilverLight
Long Poll
HTTP Streaming
Poll
setInterval( function() { send_request_to_server_for_update();}, 1000)
How Poll Works
Server
Browser
Any Update? NO Any Update? Yes. Here you are
Simple Not Real Time
Too Many Requests
Poll: Pros and Cons
What if server holds HTTP response if no update available?
Long Poll
function long_poll () { send_request_to_server(function(data) { process(data); long_poll(); });}
long_poll();
How Long Poll Works
Server
Browser
Give me updatewhen you have it
Here you are
Give me updatewhen you have it
More Efficient Than Poll
Easy to Implement
Cross-Browser
Still Too Many Requests
Not so real time
Long Poll: Pros and Cons
Can we reuse single HTTP channel for multiple pushing?
Server Streaming
Server
Browser
Give me updatewhen you have it
Here you are Here you are, again
Time to get your hands dirty
Ideally, XHR streaming it is
Create XHR
function createXHR() { return window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP’);}
IE failed us again in XHR Streaming
Create XHR
function createXHR() { return new XMLHttpRequest() ;}
xhr.readyState
0 open() has not been called yet1 send() has not been called yet2 send() has been called, headers and status are
available3 Downloading, responseText holds the partial data4 Finished with all operations
readystatechange event
xhr = createXHR();
xhr.onreadystatechange = function() { if ((xhr.readyState >= 3) && (xhr.status === 200)) { // xhr.responseText is all pushed data }};
xhr.open(‘GET’, streamUrl, true);xhr.send();
Need a format protocol of xhr.responseText
Opera trigger readyState ===3 only once!
But, it is called “readystatechange” event, right?
Polling xhr.responseText for Opera Browser
xhr.responseText is empty till readyState === 4
iframe Streaming
Tales of Two frames
The Parent Window
The Hidden iframe
Server Pushed Stream
Invoke JavaScript Functions
Progressive Rendering Response
…1K padding…<script type=“text/javascript”>
parent.push(‘msg1’);</script><script type=“text/javascript”>
parent.push(‘msg2’);</script>
…
Never Ending Loading Throbber
Trick for IE
var transDoc = new window.ActiveXObject('htmlfile');transDoc.open();transDoc.write('<html></html>');transDoc.close();
transDoc.parentWindow.push = push_callback;
var iframeDiv = transDoc.createElement('div');transDoc.body.appendChild(this.iframeDiv);iframeDiv.innerHTML = '<iframe src="' + url_to_stream +
'"></iframe>';
Can we do iframe streaming for other browser?
Hack
• There is one way for Firefox 2.x– When one message is pushed, add one empty
iframe to body and then remove it
• Not work for Firefox 3.x
Streaming is Leaking
Complete HTTP Streaming Solution
• XHR Streaming for all non-IE browsers– polling xhr.responseText for Opera
• iFraming Streaming for IE– with “htmlfile” hack
YUI Gallery Comet Streamhttp://yuilibrary.com/gallery/show/comet-stream
Real Time
Fewer HTTP Request
Complex
HTTP Proxy could bust it
HTTP Streaming: Pros and Cons
How to Cross Domain?
How to Identify Duplicate Pushed Message?
Future
SPDY
EventSource
WebSocket
SPDY
• Replacement of HTTP
• Only for Chrome now
• Server can push data
EventSource
• Server push message
• HTML5 feature
• Only Opera support it for the time being
• Broken in Opera 10.51
WebSocket
• Dual Way
• Cross-Domain
• HTML5 feature
Security Hole!!!
• Firefox 4 and Opera 11 disable WebSocket by default
• http://www.adambarth.com/experimental/websocket.pdf
Server Side
HTTP Chunked Response
Remember to Flush
Don’t Use Thread-Based Server
Do Use Event-Based Server
Bayeux Protocol
Ask Yourself Several Questions Before Proceed With Comet
Do You Really Need Comet?
Which Browsers Do You Want Support?
How to define real-time?
How About Your Server Capability?
Choose Comet Solution for Your App
Resources
• Comet Dailyhttp://cometdaily.com
• Socket.IOhttp://socket.io
• YUI Gallery Comet Stream http://yuilibrary.com/gallery/show/comet-stream
ThanksQ & A
