• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Comet Server Push Over Web
 

Comet Server Push Over Web

on

  • 4,935 views

Comet: Server push over Web

Comet: Server push over Web

Statistics

Views

Total Views
4,935
Views on SlideShare
4,876
Embed Views
59

Actions

Likes
2
Downloads
63
Comments
0

4 Embeds 59

http://www.lifeyun.com 50
http://jordanliuhao.wordpress.com 6
http://cache.baidu.com 2
http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • HTTP 1.1 RFC2616 in 1999 is still widely used.

Comet Server Push Over Web Comet Server Push Over Web Presentation Transcript

  • Comet: Server-Push in Web
    @morgancheng
    March 2nd, 2011
  • 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
  • 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 OK
    Content-Type: multipart/x-mixed-replace;boundary=ABCXYZ
    --ABCXYZ
    Content-Type:application/octet-stream
    Hello
    --ABCXYZ
    Content-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
    Any Update?
    NO
    Any Update?
    Yes. Here you are
    Browser
  • Poll: Pros and Cons
    Simple
    Not Real Time
    Too Many Requests
  • 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
    Here you are
    Give me update
    when you have it
    Give me update
    when you have it
    Browser
  • Long Poll: Pros and Cons
    More Efficient Than Poll
    Easy to Implement
    Cross-Browser
    Still Too Many Requests
    Not so real time
  • Can we reuse single HTTP channel for multiple pushing?
  • Server Streaming
    Server
    Here you are
    Here you are, again
    Give me update
    when you have it
    Browser
  • 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 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
  • 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
    Server Pushed Stream
    The Hidden iframe
    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
    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>';
  • 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 Stream
    http://yuilibrary.com/gallery/show/comet-stream
  • HTTP Streaming: Pros and Cons
    Real Time
    Fewer HTTP Request
    Complex
    HTTP Proxy could bust it
  • 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 Daily
    http://cometdaily.com
    Socket.IO
    http://socket.io
    YUI Gallery Comet Stream
    http://yuilibrary.com/gallery/show/comet-stream
  • ThanksQ & A