comet server push over web
DESCRIPTION
Comet: Server push over WebTRANSCRIPT
![Page 1: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/1.jpg)
Comet: Server-Push in Web
@morganchengMarch 2nd, 2011
![Page 2: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/2.jpg)
![Page 3: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/3.jpg)
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
![Page 4: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/4.jpg)
What If Web Server Want To Push?
![Page 5: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/5.jpg)
Comet
![Page 6: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/6.jpg)
Actually, it is named after…
![Page 7: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/7.jpg)
Who is using Comet?
![Page 8: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/8.jpg)
Battlefields: Browsers
![Page 9: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/9.jpg)
History Today Future
![Page 10: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/10.jpg)
History
multipart/x-mixed-replace
![Page 11: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/11.jpg)
First Browser War
VS
![Page 12: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/12.jpg)
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—
![Page 13: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/13.jpg)
Fallout
• Firefox inherits multipart/x-mixed-replace
• Safari & Chrome supports this type as well, but not in XMLHttpRequest
![Page 14: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/14.jpg)
Today
Poll
Flash, Java & SilverLight
Long Poll
HTTP Streaming
![Page 15: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/15.jpg)
Poll
setInterval( function() { send_request_to_server_for_update();}, 1000)
![Page 16: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/16.jpg)
How Poll Works
Server
Browser
Any Update? NO Any Update? Yes. Here you are
![Page 17: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/17.jpg)
Simple Not Real Time
Too Many Requests
Poll: Pros and Cons
![Page 18: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/18.jpg)
What if server holds HTTP response if no update available?
![Page 19: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/19.jpg)
Long Poll
function long_poll () { send_request_to_server(function(data) { process(data); long_poll(); });}
long_poll();
![Page 20: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/20.jpg)
How Long Poll Works
Server
Browser
Give me updatewhen you have it
Here you are
Give me updatewhen you have it
![Page 21: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/21.jpg)
More Efficient Than Poll
Easy to Implement
Cross-Browser
Still Too Many Requests
Not so real time
Long Poll: Pros and Cons
![Page 22: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/22.jpg)
Can we reuse single HTTP channel for multiple pushing?
![Page 23: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/23.jpg)
Server Streaming
Server
Browser
Give me updatewhen you have it
Here you are Here you are, again
![Page 24: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/24.jpg)
Time to get your hands dirty
![Page 25: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/25.jpg)
Ideally, XHR streaming it is
![Page 26: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/26.jpg)
Create XHR
function createXHR() { return window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP’);}
IE failed us again in XHR Streaming
![Page 27: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/27.jpg)
Create XHR
function createXHR() { return new XMLHttpRequest() ;}
![Page 28: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/28.jpg)
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
![Page 29: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/29.jpg)
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();
![Page 30: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/30.jpg)
Need a format protocol of xhr.responseText
![Page 31: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/31.jpg)
Opera trigger readyState ===3 only once!
![Page 32: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/32.jpg)
But, it is called “readystatechange” event, right?
![Page 33: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/33.jpg)
Polling xhr.responseText for Opera Browser
![Page 34: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/34.jpg)
xhr.responseText is empty till readyState === 4
![Page 35: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/35.jpg)
iframe Streaming
![Page 36: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/36.jpg)
Tales of Two frames
The Parent Window
The Hidden iframe
Server Pushed Stream
Invoke JavaScript Functions
![Page 37: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/37.jpg)
Progressive Rendering Response
…1K padding…<script type=“text/javascript”>
parent.push(‘msg1’);</script><script type=“text/javascript”>
parent.push(‘msg2’);</script>
…
![Page 38: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/38.jpg)
Never Ending Loading Throbber
![Page 39: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/39.jpg)
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>';
![Page 40: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/40.jpg)
Can we do iframe streaming for other browser?
![Page 41: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/41.jpg)
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
![Page 42: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/42.jpg)
Streaming is Leaking
![Page 43: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/43.jpg)
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
![Page 44: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/44.jpg)
Real Time
Fewer HTTP Request
Complex
HTTP Proxy could bust it
HTTP Streaming: Pros and Cons
![Page 45: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/45.jpg)
How to Cross Domain?
![Page 46: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/46.jpg)
How to Identify Duplicate Pushed Message?
![Page 47: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/47.jpg)
Future
SPDY
EventSource
WebSocket
![Page 48: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/48.jpg)
SPDY
• Replacement of HTTP
• Only for Chrome now
• Server can push data
![Page 49: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/49.jpg)
EventSource
• Server push message
• HTML5 feature
• Only Opera support it for the time being
• Broken in Opera 10.51
![Page 50: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/50.jpg)
WebSocket
• Dual Way
• Cross-Domain
• HTML5 feature
![Page 51: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/51.jpg)
Security Hole!!!
![Page 52: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/52.jpg)
• Firefox 4 and Opera 11 disable WebSocket by default
• http://www.adambarth.com/experimental/websocket.pdf
![Page 53: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/53.jpg)
Server Side
![Page 54: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/54.jpg)
HTTP Chunked Response
![Page 55: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/55.jpg)
Remember to Flush
![Page 56: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/56.jpg)
Don’t Use Thread-Based Server
![Page 57: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/57.jpg)
Do Use Event-Based Server
![Page 58: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/58.jpg)
Bayeux Protocol
![Page 59: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/59.jpg)
Ask Yourself Several Questions Before Proceed With Comet
![Page 60: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/60.jpg)
Do You Really Need Comet?
![Page 61: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/61.jpg)
Which Browsers Do You Want Support?
![Page 62: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/62.jpg)
How to define real-time?
![Page 63: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/63.jpg)
How About Your Server Capability?
![Page 64: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/64.jpg)
Choose Comet Solution for Your App
![Page 65: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/65.jpg)
Resources
• Comet Dailyhttp://cometdaily.com
• Socket.IOhttp://socket.io
• YUI Gallery Comet Stream http://yuilibrary.com/gallery/show/comet-stream
![Page 66: Comet Server Push Over Web](https://reader034.vdocuments.mx/reader034/viewer/2022051616/55516974b4c905a8768b570e/html5/thumbnails/66.jpg)
ThanksQ & A