Comet Server Push Over Web

  • 4,822 views
Uploaded on

Comet: Server push over Web

Comet: Server push over Web

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,822
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
71
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • HTTP 1.1 RFC2616 in 1999 is still widely used.

Transcript

  • 1. Comet: Server-Push in Web
    @morgancheng
    March 2nd, 2011
  • 2.
  • 3. Pull with HTTP
    GET / HTTP/1.1
    Host: www.yahoo.com
    Connection: keep-alive
    Request
    HTTP/1.1 200 OK
    Content-Type: text/html;charset=utf-8
    Transfer-Encoding: chunked
    <!DOCTYPE html>
    <html>

    Response
  • 4. What If Web Server Want To Push?
  • 5. Comet
  • 6. Actually, it is named after…
  • 7. Who is using Comet?
  • 8. Battlefields: Browsers
  • 9. History
    Today
    Future
  • 10. History
    multipart/x-mixed-replace
  • 11. First Browser War
    VS
  • 12. NetScape: multipart/x-mixed-replace
    HTTP/1.1 200 OK
    Content-Type: multipart/x-mixed-replace;boundary=ABCXYZ
    --ABCXYZ
    Content-Type:application/octet-stream
    Hello
    --ABCXYZ
    Content-Type:application/octet-stream
    World
    --ABCXYZ—
  • 13. Fallout
    Firefox inherits multipart/x-mixed-replace
    Safari & Chrome supports this type as well, but not in XMLHttpRequest
  • 14. Today
    Poll
    Flash, Java & SilverLight
    Long Poll
    HTTP Streaming
  • 15. Poll
    setInterval( function() {
    send_request_to_server_for_update();
    }, 1000)
  • 16. How Poll Works
    Server
    Any Update?
    NO
    Any Update?
    Yes. Here you are
    Browser
  • 17. Poll: Pros and Cons
    Simple
    Not Real Time
    Too Many Requests
  • 18. What if server holds HTTP response if no update available?
  • 19. Long Poll
    function long_poll () {
    send_request_to_server(function(data) {
    process(data);
    long_poll();
    });
    }
    long_poll();
  • 20. How Long Poll Works
    Server
    Here you are
    Give me update
    when you have it
    Give me update
    when you have it
    Browser
  • 21. Long Poll: Pros and Cons
    More Efficient Than Poll
    Easy to Implement
    Cross-Browser
    Still Too Many Requests
    Not so real time
  • 22. Can we reuse single HTTP channel for multiple pushing?
  • 23. Server Streaming
    Server
    Here you are
    Here you are, again
    Give me update
    when you have it
    Browser
  • 24. Time to get your hands dirty
  • 25. Ideally, XHR streaming it is
  • 26. Create XHR
    function createXHR() {
    return window.XMLHttpRequest?
    new XMLHttpRequest() :
    new ActiveXObject(‘Microsoft.XMLHTTP’);
    }
    IE failed us again in XHR Streaming
  • 27. Create XHR
    function createXHR() {
    return new XMLHttpRequest() ;
    }
  • 28. xhr.readyState
    0 open() has not been called yet
    send() has not been called yet
    2 send() has been called, headers and status are available
    3 Downloading, responseText holds the partial data
    4 Finished with all operations
  • 29. 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();
  • 30. Need a format protocol of xhr.responseText
  • 31. Opera trigger
    readyState ===3 only once!
  • 32. But, it is called “readystatechange” event, right?
  • 33. Polling xhr.responseText for Opera Browser
  • 34. xhr.responseText is empty till readyState === 4
  • 35. iframe Streaming
  • 36. Tales of Two frames
    The Parent Window
    Server Pushed Stream
    The Hidden iframe
    Invoke JavaScript Functions
  • 37. Progressive Rendering Response

    1K padding

    <script type=“text/javascript”>
    parent.push(‘msg1’);
    </script>
    <script type=“text/javascript”>
    parent.push(‘msg2’);
    </script>

  • 38. Never Ending Loading Throbber
  • 39. Trick for IE
    vartransDoc = new window.ActiveXObject('htmlfile');
    transDoc.open();
    transDoc.write('<html></html>');
    transDoc.close();
    transDoc.parentWindow.push = push_callback;
    variframeDiv = transDoc.createElement('div');
    transDoc.body.appendChild(this.iframeDiv);
    iframeDiv.innerHTML = '<iframesrc="' + url_to_stream + '"></iframe>';
  • 40. Can we do iframe streaming for other browser?
  • 41. 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
  • 42. Streaming is Leaking
  • 43. 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 Stream
    http://yuilibrary.com/gallery/show/comet-stream
  • 44. HTTP Streaming: Pros and Cons
    Real Time
    Fewer HTTP Request
    Complex
    HTTP Proxy could bust it
  • 45. How to Cross Domain?
  • 46. How to Identify Duplicate Pushed Message?
  • 47. Future
    SPDY
    EventSource
    WebSocket
  • 48. SPDY
    Replacement of HTTP
    Only for Chrome now
    Server can push data
  • 49. EventSource
    Server push message
    HTML5 feature
    Only Opera support it for the time being
    Broken in Opera 10.51
  • 50. WebSocket
    Dual Way
    Cross-Domain
    HTML5 feature
  • 51. Security Hole!!!
  • 52. Firefox 4 and Opera 11 disable WebSocket by default
    http://www.adambarth.com/experimental/websocket.pdf
  • 53. Server Side
  • 54. HTTP Chunked Response
  • 55. Remember to Flush
  • 56. Don’t Use Thread-Based Server
  • 57. Do Use Event-Based Server
  • 58. Bayeux Protocol
  • 59. Ask Yourself Several Questions Before Proceed With Comet
  • 60. Do You Really Need Comet?
  • 61. Which Browsers Do You Want Support?
  • 62. How to define real-time?
  • 63. How About Your Server Capability?
  • 64. Choose Comet Solution for Your App
  • 65. Resources
    Comet Daily
    http://cometdaily.com
    Socket.IO
    http://socket.io
    YUI Gallery Comet Stream
    http://yuilibrary.com/gallery/show/comet-stream
  • 66. ThanksQ & A