Your SlideShare is downloading. ×
Comet Server Push Over Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Comet Server Push Over Web

4,969

Published on

Comet: Server push over Web

Comet: Server push over Web

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

No Downloads
Views
Total Views
4,969
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
73
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

    ×