SlideShare une entreprise Scribd logo
1  sur  66
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

Contenu connexe

Tendances

Realtime Communication Techniques with PHP
Realtime Communication Techniques with PHPRealtime Communication Techniques with PHP
Realtime Communication Techniques with PHP
WaterSpout
 
Unity and WebSockets
Unity and WebSocketsUnity and WebSockets
Unity and WebSockets
Josh Glover
 
Varnish: Making eZ Publish sites fly
Varnish: Making eZ Publish sites flyVarnish: Making eZ Publish sites fly
Varnish: Making eZ Publish sites fly
Peter Keung
 
0-60 with Goliath: Building High Performance Ruby Web-Services
0-60 with Goliath: Building High Performance Ruby Web-Services0-60 with Goliath: Building High Performance Ruby Web-Services
0-60 with Goliath: Building High Performance Ruby Web-Services
Ilya Grigorik
 

Tendances (20)

LogStash - Yes, logging can be awesome
LogStash - Yes, logging can be awesomeLogStash - Yes, logging can be awesome
LogStash - Yes, logging can be awesome
 
When dynamic becomes static: the next step in web caching techniques
When dynamic becomes static: the next step in web caching techniquesWhen dynamic becomes static: the next step in web caching techniques
When dynamic becomes static: the next step in web caching techniques
 
Realtime Communication Techniques with PHP
Realtime Communication Techniques with PHPRealtime Communication Techniques with PHP
Realtime Communication Techniques with PHP
 
Html5, css3, canvas, svg and webgl
Html5, css3, canvas, svg and webglHtml5, css3, canvas, svg and webgl
Html5, css3, canvas, svg and webgl
 
Unity and WebSockets
Unity and WebSocketsUnity and WebSockets
Unity and WebSockets
 
MeshU Thin & Rack
MeshU Thin & RackMeshU Thin & Rack
MeshU Thin & Rack
 
Varnish Cache and Django (Falcon, Flask etc)
Varnish Cache and Django (Falcon, Flask etc)Varnish Cache and Django (Falcon, Flask etc)
Varnish Cache and Django (Falcon, Flask etc)
 
The Atmosphere Framework
The Atmosphere FrameworkThe Atmosphere Framework
The Atmosphere Framework
 
Nmap Scripting Engine and http-enumeration
Nmap Scripting Engine and http-enumerationNmap Scripting Engine and http-enumeration
Nmap Scripting Engine and http-enumeration
 
Nessus scan report using microsoft patchs scan policy - Tareq Hanaysha
Nessus scan report using microsoft patchs scan policy - Tareq HanayshaNessus scan report using microsoft patchs scan policy - Tareq Hanaysha
Nessus scan report using microsoft patchs scan policy - Tareq Hanaysha
 
Building Real-Time Applications with Android and WebSockets
Building Real-Time Applications with Android and WebSocketsBuilding Real-Time Applications with Android and WebSockets
Building Real-Time Applications with Android and WebSockets
 
Groovy example in mule
Groovy example in muleGroovy example in mule
Groovy example in mule
 
Migrating a large code-base to containers by Doug Johnson and Jonathan Lozins...
Migrating a large code-base to containers by Doug Johnson and Jonathan Lozins...Migrating a large code-base to containers by Doug Johnson and Jonathan Lozins...
Migrating a large code-base to containers by Doug Johnson and Jonathan Lozins...
 
On Centralizing Logs
On Centralizing LogsOn Centralizing Logs
On Centralizing Logs
 
Varnish: Making eZ Publish sites fly
Varnish: Making eZ Publish sites flyVarnish: Making eZ Publish sites fly
Varnish: Making eZ Publish sites fly
 
0-60 with Goliath: Building High Performance Ruby Web-Services
0-60 with Goliath: Building High Performance Ruby Web-Services0-60 with Goliath: Building High Performance Ruby Web-Services
0-60 with Goliath: Building High Performance Ruby Web-Services
 
Writing highly scalable WebSocket using the Atmosphere Framework and Scala
Writing highly scalable WebSocket using the Atmosphere Framework and ScalaWriting highly scalable WebSocket using the Atmosphere Framework and Scala
Writing highly scalable WebSocket using the Atmosphere Framework and Scala
 
skipfish
skipfishskipfish
skipfish
 
Leverage HTTP to deliver cacheable websites - Thijs Feryn - Codemotion Rome 2018
Leverage HTTP to deliver cacheable websites - Thijs Feryn - Codemotion Rome 2018Leverage HTTP to deliver cacheable websites - Thijs Feryn - Codemotion Rome 2018
Leverage HTTP to deliver cacheable websites - Thijs Feryn - Codemotion Rome 2018
 
Leverage HTTP to deliver cacheable websites - Codemotion Rome 2018
Leverage HTTP to deliver cacheable websites - Codemotion Rome 2018Leverage HTTP to deliver cacheable websites - Codemotion Rome 2018
Leverage HTTP to deliver cacheable websites - Codemotion Rome 2018
 

Similaire à Comet Server Push Over Web

Interactive web. O rly?
Interactive web. O rly?Interactive web. O rly?
Interactive web. O rly?
timbc
 
Websockets - DevFestX May 19, 2012
Websockets - DevFestX May 19, 2012Websockets - DevFestX May 19, 2012
Websockets - DevFestX May 19, 2012
Sameer Segal
 

Similaire à Comet Server Push Over Web (20)

AJAX Transport Layer
AJAX Transport LayerAJAX Transport Layer
AJAX Transport Layer
 
Web Real-time Communications
Web Real-time CommunicationsWeb Real-time Communications
Web Real-time Communications
 
Interactive web. O rly?
Interactive web. O rly?Interactive web. O rly?
Interactive web. O rly?
 
Going Live! with Comet
Going Live! with CometGoing Live! with Comet
Going Live! with Comet
 
Core Java tutorial at Unit Nexus
Core Java tutorial at Unit NexusCore Java tutorial at Unit Nexus
Core Java tutorial at Unit Nexus
 
Implementing Comet using PHP
Implementing Comet using PHPImplementing Comet using PHP
Implementing Comet using PHP
 
Rapid java backend and api development for mobile devices
Rapid java backend and api development for mobile devicesRapid java backend and api development for mobile devices
Rapid java backend and api development for mobile devices
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
The Real Time Web with XMPP
The Real Time Web with XMPPThe Real Time Web with XMPP
The Real Time Web with XMPP
 
AJAX.pptx
AJAX.pptxAJAX.pptx
AJAX.pptx
 
RIA and Ajax
RIA and AjaxRIA and Ajax
RIA and Ajax
 
Failsafe Mechanism for Yahoo Homepage
Failsafe Mechanism for Yahoo HomepageFailsafe Mechanism for Yahoo Homepage
Failsafe Mechanism for Yahoo Homepage
 
Ajax
AjaxAjax
Ajax
 
Websockets - DevFestX May 19, 2012
Websockets - DevFestX May 19, 2012Websockets - DevFestX May 19, 2012
Websockets - DevFestX May 19, 2012
 
Ajax
AjaxAjax
Ajax
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moon
 
Pascarello_Investigating JavaScript and Ajax Security
Pascarello_Investigating JavaScript and Ajax SecurityPascarello_Investigating JavaScript and Ajax Security
Pascarello_Investigating JavaScript and Ajax Security
 
Time for Comet?
Time for Comet?Time for Comet?
Time for Comet?
 
Introduction about-ajax-framework
Introduction about-ajax-frameworkIntroduction about-ajax-framework
Introduction about-ajax-framework
 

Plus de Morgan Cheng (13)

React & Redux in Hulu
React & Redux in HuluReact & Redux in Hulu
React & Redux in Hulu
 
Flux and redux
Flux and reduxFlux and redux
Flux and redux
 
Critical thinking in Node.js
Critical thinking in Node.jsCritical thinking in Node.js
Critical thinking in Node.js
 
Engineering excellence 卓越工程
Engineering excellence 卓越工程Engineering excellence 卓越工程
Engineering excellence 卓越工程
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile Web
 
YUI vs jQuery: to Build Large Scale JavaScript App
YUI vs jQuery: to Build Large Scale JavaScript AppYUI vs jQuery: to Build Large Scale JavaScript App
YUI vs jQuery: to Build Large Scale JavaScript App
 
Single Page WebApp Architecture
Single Page WebApp ArchitectureSingle Page WebApp Architecture
Single Page WebApp Architecture
 
Secrets of Effective Presentation
Secrets of Effective PresentationSecrets of Effective Presentation
Secrets of Effective Presentation
 
Build Lightweight Web Module
Build Lightweight Web ModuleBuild Lightweight Web Module
Build Lightweight Web Module
 
Optimize URL for Performance
Optimize URL for PerformanceOptimize URL for Performance
Optimize URL for Performance
 
F2E's Creeds
F2E's CreedsF2E's Creeds
F2E's Creeds
 
Mobile Web on Touch Event and YUI
Mobile Web on Touch Event and YUIMobile Web on Touch Event and YUI
Mobile Web on Touch Event and YUI
 
Embracing YUI3 and Frontend Perf
Embracing YUI3 and Frontend PerfEmbracing YUI3 and Frontend Perf
Embracing YUI3 and Frontend Perf
 

Dernier

Dernier (20)

GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 

Comet Server Push Over Web

Notes de l'éditeur

  1. HTTP 1.1 RFC2616 in 1999 is still widely used.