Comet: Server-Push in Web<br />@morgancheng<br />March 2nd, 2011<br />
Pull with HTTP<br />GET / HTTP/1.1<br />Host: www.yahoo.com<br />Connection: keep-alive<br />Request<br />HTTP/1.1 200 OK<...
What If Web Server Want To Push?<br />
Comet<br />
Actually, it is named after…<br />
Who is using Comet?<br />
Battlefields: Browsers<br />
History<br />Today<br />Future<br />
History<br />multipart/x-mixed-replace<br />
First Browser War<br />VS<br />
NetScape: multipart/x-mixed-replace<br />HTTP/1.1 200 OK<br />Content-Type: multipart/x-mixed-replace;boundary=ABCXYZ<br /...
Fallout<br />Firefox inherits multipart/x-mixed-replace<br />Safari & Chrome supports this type as well, but not in XMLHtt...
Today<br />Poll<br />Flash, Java & SilverLight<br />Long Poll<br />HTTP Streaming<br />
Poll<br />setInterval( function() {<br />send_request_to_server_for_update();<br />}, 1000)<br />
How Poll Works<br />Server<br />Any Update?<br />NO<br />Any Update?<br />Yes. Here you are<br />Browser<br />
Poll: Pros and Cons<br />Simple<br />Not Real Time<br /> Too Many Requests<br />
What if server holds HTTP response if no update available?<br />
Long Poll<br />function long_poll () {<br />send_request_to_server(function(data) {<br />process(data);<br />long_poll();<...
How Long Poll Works<br />Server<br />Here you are<br />Give me update<br />when you have it<br />Give me update<br />when ...
Long Poll: Pros and Cons<br />More Efficient Than Poll<br />Easy to Implement<br />Cross-Browser<br /> Still Too Many Requ...
Can we reuse single HTTP channel for multiple pushing?<br />
Server Streaming<br />Server<br />Here you are<br />Here you are, again<br />Give me update<br />when you have it<br />Bro...
Time to get your hands dirty<br />
Ideally, XHR streaming it is<br />
Create XHR<br />function createXHR() {<br />    return window.XMLHttpRequest?<br />                     new XMLHttpRequest...
Create XHR<br />function createXHR() {<br />    return new XMLHttpRequest() ;<br />}<br />
xhr.readyState<br />0   	 open() has not been called yet<br />send() has not been called yet<br />2	send() has been called...
readystatechange event<br />xhr = createXHR();<br />xhr.onreadystatechange = function() {<br />    if ((xhr.readyState >= ...
Need a format protocol of xhr.responseText<br />
Opera trigger <br />readyState ===3 only once!<br />
But, it is called “readystatechange” event, right?<br />
Polling xhr.responseText for Opera Browser<br />
xhr.responseText is empty till readyState === 4<br />
iframe Streaming<br />
Tales of Two frames<br />The Parent Window<br />Server Pushed Stream<br />The Hidden iframe<br />Invoke JavaScript Functio...
Progressive Rendering Response<br />…<br />1K padding<br />…<br /><script type=“text/javascript”><br />	parent.push(‘msg1’...
Never Ending Loading Throbber<br />
Trick for IE<br />vartransDoc = new window.ActiveXObject('htmlfile');<br />transDoc.open();<br />transDoc.write('<html></h...
Can we do iframe streaming for other browser?<br />
Hack<br />There is one way for Firefox 2.x<br />When one message is pushed, add one empty iframe to body and then remove i...
Streaming is Leaking<br />
Complete HTTP Streaming Solution<br />XHR Streaming for all non-IE browsers<br />polling xhr.responseText for Opera<br />i...
HTTP Streaming: Pros and Cons<br /> Real Time<br /> Fewer HTTP Request<br />Complex<br />HTTP Proxy could bust it<br />
How to Cross Domain?<br />
How to Identify Duplicate Pushed Message?<br />
Future<br />SPDY<br />EventSource<br />WebSocket<br />
SPDY<br />Replacement of HTTP<br />Only for Chrome now<br />Server can push data<br />
EventSource<br />Server push message<br />HTML5 feature <br />Only Opera support it for the time being<br />Broken in Oper...
WebSocket<br />Dual Way<br />Cross-Domain<br />HTML5 feature <br />
Security Hole!!!<br />
Firefox 4 and Opera 11 disable WebSocket by default<br />http://www.adambarth.com/experimental/websocket.pdf<br />
Server Side<br />
HTTP Chunked Response<br />
Remember to Flush<br />
Don’t Use Thread-Based Server<br />
Do Use Event-Based Server<br />
Bayeux Protocol<br />
Ask Yourself Several Questions Before Proceed With Comet<br />
Do You Really Need Comet?<br />
Which Browsers Do You Want Support?<br />
How to define real-time?<br />
How About Your Server Capability?<br />
Choose Comet Solution for Your App<br />
Resources<br />Comet Daily<br />http://cometdaily.com<br />Socket.IO<br />http://socket.io<br />YUI Gallery Comet Stream<b...
ThanksQ & A<br />
Upcoming SlideShare
Loading in...5
×

Comet Server Push Over Web

5,044

Published on

Comet: Server push over Web

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,044
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
76
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • HTTP 1.1 RFC2616 in 1999 is still widely used.
  • Comet Server Push Over Web

    1. 1. Comet: Server-Push in Web<br />@morgancheng<br />March 2nd, 2011<br />
    2. 2.
    3. 3. Pull with HTTP<br />GET / HTTP/1.1<br />Host: www.yahoo.com<br />Connection: keep-alive<br />Request<br />HTTP/1.1 200 OK<br />Content-Type: text/html;charset=utf-8<br />Transfer-Encoding: chunked<br /><!DOCTYPE html><br /><html><br />… <br />Response<br />
    4. 4. What If Web Server Want To Push?<br />
    5. 5. Comet<br />
    6. 6. Actually, it is named after…<br />
    7. 7. Who is using Comet?<br />
    8. 8. Battlefields: Browsers<br />
    9. 9. History<br />Today<br />Future<br />
    10. 10. History<br />multipart/x-mixed-replace<br />
    11. 11. First Browser War<br />VS<br />
    12. 12. NetScape: multipart/x-mixed-replace<br />HTTP/1.1 200 OK<br />Content-Type: multipart/x-mixed-replace;boundary=ABCXYZ<br />--ABCXYZ<br />Content-Type:application/octet-stream<br />Hello<br />--ABCXYZ<br />Content-Type:application/octet-stream<br />World<br />--ABCXYZ—<br />
    13. 13. Fallout<br />Firefox inherits multipart/x-mixed-replace<br />Safari & Chrome supports this type as well, but not in XMLHttpRequest<br />
    14. 14. Today<br />Poll<br />Flash, Java & SilverLight<br />Long Poll<br />HTTP Streaming<br />
    15. 15. Poll<br />setInterval( function() {<br />send_request_to_server_for_update();<br />}, 1000)<br />
    16. 16. How Poll Works<br />Server<br />Any Update?<br />NO<br />Any Update?<br />Yes. Here you are<br />Browser<br />
    17. 17. Poll: Pros and Cons<br />Simple<br />Not Real Time<br /> Too Many Requests<br />
    18. 18. What if server holds HTTP response if no update available?<br />
    19. 19. Long Poll<br />function long_poll () {<br />send_request_to_server(function(data) {<br />process(data);<br />long_poll();<br /> });<br />}<br />long_poll();<br />
    20. 20. How Long Poll Works<br />Server<br />Here you are<br />Give me update<br />when you have it<br />Give me update<br />when you have it<br />Browser<br />
    21. 21. Long Poll: Pros and Cons<br />More Efficient Than Poll<br />Easy to Implement<br />Cross-Browser<br /> Still Too Many Requests<br /> Not so real time<br />
    22. 22. Can we reuse single HTTP channel for multiple pushing?<br />
    23. 23. Server Streaming<br />Server<br />Here you are<br />Here you are, again<br />Give me update<br />when you have it<br />Browser<br />
    24. 24. Time to get your hands dirty<br />
    25. 25. Ideally, XHR streaming it is<br />
    26. 26. Create XHR<br />function createXHR() {<br /> return window.XMLHttpRequest?<br /> new XMLHttpRequest() :<br /> new ActiveXObject(‘Microsoft.XMLHTTP’);<br />}<br />IE failed us again in XHR Streaming<br />
    27. 27. Create XHR<br />function createXHR() {<br /> return new XMLHttpRequest() ;<br />}<br />
    28. 28. xhr.readyState<br />0 open() has not been called yet<br />send() has not been called yet<br />2 send() has been called, headers and status are available<br />3 Downloading, responseText holds the partial data<br />4 Finished with all operations<br />
    29. 29. readystatechange event<br />xhr = createXHR();<br />xhr.onreadystatechange = function() {<br /> if ((xhr.readyState >= 3) && (xhr.status === 200)) {<br /> // xhr.responseText is all pushed data<br /> }<br />};<br />xhr.open(‘GET’, streamUrl, true);<br />xhr.send();<br />
    30. 30. Need a format protocol of xhr.responseText<br />
    31. 31. Opera trigger <br />readyState ===3 only once!<br />
    32. 32. But, it is called “readystatechange” event, right?<br />
    33. 33. Polling xhr.responseText for Opera Browser<br />
    34. 34. xhr.responseText is empty till readyState === 4<br />
    35. 35. iframe Streaming<br />
    36. 36. Tales of Two frames<br />The Parent Window<br />Server Pushed Stream<br />The Hidden iframe<br />Invoke JavaScript Functions<br />
    37. 37. Progressive Rendering Response<br />…<br />1K padding<br />…<br /><script type=“text/javascript”><br /> parent.push(‘msg1’);<br /></script><br /><script type=“text/javascript”><br /> parent.push(‘msg2’);<br /></script><br />…<br />
    38. 38. Never Ending Loading Throbber<br />
    39. 39. Trick for IE<br />vartransDoc = new window.ActiveXObject('htmlfile');<br />transDoc.open();<br />transDoc.write('<html></html>');<br />transDoc.close();<br />transDoc.parentWindow.push = push_callback;<br />variframeDiv = transDoc.createElement('div');<br />transDoc.body.appendChild(this.iframeDiv);<br />iframeDiv.innerHTML = '<iframesrc="' + url_to_stream + '"></iframe>';<br />
    40. 40. Can we do iframe streaming for other browser?<br />
    41. 41. Hack<br />There is one way for Firefox 2.x<br />When one message is pushed, add one empty iframe to body and then remove it<br />Not work for Firefox 3.x<br />
    42. 42. Streaming is Leaking<br />
    43. 43. Complete HTTP Streaming Solution<br />XHR Streaming for all non-IE browsers<br />polling xhr.responseText for Opera<br />iFraming Streaming for IE<br />with “htmlfile” hack<br />YUI Gallery Comet Stream<br />http://yuilibrary.com/gallery/show/comet-stream<br />
    44. 44. HTTP Streaming: Pros and Cons<br /> Real Time<br /> Fewer HTTP Request<br />Complex<br />HTTP Proxy could bust it<br />
    45. 45. How to Cross Domain?<br />
    46. 46. How to Identify Duplicate Pushed Message?<br />
    47. 47. Future<br />SPDY<br />EventSource<br />WebSocket<br />
    48. 48. SPDY<br />Replacement of HTTP<br />Only for Chrome now<br />Server can push data<br />
    49. 49. EventSource<br />Server push message<br />HTML5 feature <br />Only Opera support it for the time being<br />Broken in Opera 10.51<br />
    50. 50. WebSocket<br />Dual Way<br />Cross-Domain<br />HTML5 feature <br />
    51. 51. Security Hole!!!<br />
    52. 52. Firefox 4 and Opera 11 disable WebSocket by default<br />http://www.adambarth.com/experimental/websocket.pdf<br />
    53. 53. Server Side<br />
    54. 54. HTTP Chunked Response<br />
    55. 55. Remember to Flush<br />
    56. 56. Don’t Use Thread-Based Server<br />
    57. 57. Do Use Event-Based Server<br />
    58. 58. Bayeux Protocol<br />
    59. 59. Ask Yourself Several Questions Before Proceed With Comet<br />
    60. 60. Do You Really Need Comet?<br />
    61. 61. Which Browsers Do You Want Support?<br />
    62. 62. How to define real-time?<br />
    63. 63. How About Your Server Capability?<br />
    64. 64. Choose Comet Solution for Your App<br />
    65. 65. Resources<br />Comet Daily<br />http://cometdaily.com<br />Socket.IO<br />http://socket.io<br />YUI Gallery Comet Stream<br />http://yuilibrary.com/gallery/show/comet-stream<br />
    66. 66. ThanksQ & A<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×