Comet Server Push Over Web

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?

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

http://www.lifeyun.com	47
http://cache.baidu.com	2
http://twitter.com	1

Comet Server Push Over Web

by mocheng on Mar 02, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 50

Statistics

Comet Server Push Over Web — Presentation Transcript