More Related Content Similar to Comet and the Rise of Highly Interactive Websites (20) Comet and the Rise of Highly Interactive Websites1. Comet
The Rise of Highly Interactive Websites
Joe Walker
DWR Lead Developer
Director, Support and Development, SitePen UK
2. Introduction
Perspectives
Technical
Architectures
© SitePen, Inc. 2008. All Rights Reserved
3. Pushing data to the browser without
needing the browser to ask
© SitePen, Inc. 2008. All Rights Reserved
4. Long lived HTTP (i.e. not polling)
A pattern not a protocol
Reverse Ajax == Comet + Polling
© SitePen, Inc. 2008. All Rights Reserved
7. Why now?
Ajax made individual pages interactive
The web is getting more social
== more transient
© SitePen, Inc. 2008. All Rights Reserved
8. Time people
spend on a
page
Time
before a
page
changes
Evolution of the Web
© SitePen, Inc. 2008. All Rights Reserved
9. Introduction
Perspectives
Technical
Architectures
© SitePen, Inc. 2008. All Rights Reserved
10. Comet is for ...
keeping me up to date
... with ...
everyone else, and
everything else
© SitePen, Inc. 2008. All Rights Reserved
11. Everyone else
What are the other guys are doing?
• Editing things that interest you
• Talking to / about you
• Saying and doing interesting things
• Playing games
© SitePen, Inc. 2008. All Rights Reserved
12. Everything else
What is System X doing?
• Data streaming
• Async processing
• Transaction fulfillment
© SitePen, Inc. 2008. All Rights Reserved
13. Chat is everywhere: GMail, Meebo, Facebook ...
Collaborative Editing: GDocs, Thinkature
Streaming Financial Data: Lightstreamer, Caplin
Asynch Updates: GMail, Yes.com
Online Gaming: GPokr, Chess.com
Async Server Processing: Polar Rose
© SitePen, Inc. 2008. All Rights Reserved
14. The web was designed connectionless
Comet gives you the connection back
© SitePen, Inc. 2008. All Rights Reserved
15. The web was designed
client-server
Comet starts to make it look
far more peer-to-peer
© SitePen, Inc. 2008. All Rights Reserved
17. Introduction
Perspectives
Technical
Architectures
© SitePen, Inc. 2008. All Rights Reserved
19. Connection Options
Long polling: XHR
Forever Frame: iframe
Script tags
WebSockets
ActiveXObject(“htmlfile”)
Mime Messaging
Flash Remoting
© SitePen, Inc. 2008. All Rights Reserved
20. Long Polling
‘Slow’ XHR request
But:
• Restart required
• XHR.responseText on IE
© SitePen, Inc. 2008. All Rights Reserved
21. Client How-to: Forever Frame
Open a slow iframe, poll for content
IE lies about the content
• Send text/plain + 4k whitespace to flush IE
• Flush with <script> tag for each data block
iframe needs restarting to avoid memory leak
But IE clicks when iframe starts
© SitePen, Inc. 2008. All Rights Reserved
22. Client How-to: htmlfile
‘htmlfile’ is an ActiveX control like XHR:
hf = new ActiveXObject(quot;htmlfilequot;);
hf.open();
hf.write(quot;<html><iframe/></html>quot;);
hf.close();
hf.parentWindow.dwr = dwr;
Avoids ‘clicking’, but not IE/Server 2003
Not supported in Firefox, Safari, Opera, etc.
© SitePen, Inc. 2008. All Rights Reserved
23. Client How-to: Callback Polling
Dynamic <script> blocks
Can point to any domain
Does not stream
© SitePen, Inc. 2008. All Rights Reserved
24. Client How-to: Web Standards
HTML 5 makes it better:
• WebSockets
• DOM Storage provides way to synchronize across tabs
and frames
© SitePen, Inc. 2008. All Rights Reserved
25. Other Options
Mime Messaging
• Multipart Mime: x-multipart-replace
• Not IE
• Excellent performance
Flash Remoting
© SitePen, Inc. 2008. All Rights Reserved
26. 2 Connection Issue
Coordination using:
• window.name
• cookies
Multi-home DNS
All modern browsers raise number of connections
© SitePen, Inc. 2008. All Rights Reserved
27. Other Issues
HTTP streaming is download only (except WebSockets)
Detection of failed connections
© SitePen, Inc. 2008. All Rights Reserved
28. Server Tricks
Stream-stoppers:
• Apache: mod_jk
• Buggy network proxies
• Application firewalls
Thread starvation (Servlet 3.0)
Multi-threading
© SitePen, Inc. 2008. All Rights Reserved
29. Does that stop us?
So it’s a hack ...
• But that hasn’t stopped Ajax
• And Comet does work
© SitePen, Inc. 2008. All Rights Reserved
30. Library Solutions
Open Solutions:
• DWR http://directwebremoting.org
• Jetty http://jetty.mortbay.org (Cometd)
• Orbited http://orbited.org
• Ice Faces http://icefaces.org
• Atmosphere http://atmosphere.dev.java.net
© SitePen, Inc. 2008. All Rights Reserved
31. Comet vs. Polling
For Polling:
• More efficient for very low latencies
• Simpler to implement
For Comet:
• More efficient in general case
• More adaptable
© SitePen, Inc. 2008. All Rights Reserved
32. Introduction
Perspectives
Technical
Architectures
© SitePen, Inc. 2008. All Rights Reserved
34. Inboard Comet
Comet is part of the main
web server infrastructure
© SitePen, Inc. 2008. All Rights Reserved
35. Inboard (e.g. DWR)
• Simpler for new development
• Harder scaling
• Comet is just part of the infrastructure
© SitePen, Inc. 2008. All Rights Reserved
36. Outboard (e.g. Cometd)
Comet is deployed to a
separate set of servers
© SitePen, Inc. 2008. All Rights Reserved
37. Outboard (e.g. Cometd)
• Add-on that doesn’t affect the server
• Easier to add to existing apps
• Harder to get started
© SitePen, Inc. 2008. All Rights Reserved
39. API Styles:
Level 0: P2P Data
© SitePen, Inc. 2008. All Rights Reserved
40. Level 0: P2P Data with WebSocket
var s = new WebSocket(quot;ws://eg.com/demoquot;);
s.onOpen = function(e) { alert(quot;Openquot;); }
s.onRead = function(e) { alert(e.data); }
s.onClose = function(e) { alert(quot;Closequot;); }
s.send(quot;Hello Worldquot;);
© SitePen, Inc. 2008. All Rights Reserved
41. API Styles:
Level 1: Pub / Sub
© SitePen, Inc. 2008. All Rights Reserved
42. Level 1: Pub/Sub with Bayeux / Jetty
// Bayeux Example
// Get a channel
dojox.cometd.Channel c =
bayeux.getChannel(chanName, true);
// Subscribe to things published
c.subscribe(client);
// Publish something ourselves
c.publish(fromClient, data, msgId);
© SitePen, Inc. 2008. All Rights Reserved
43. Level 1: Pub/Sub with Atmosphere
@Grizzlet(Grizzlet.Scope.APPLICATION)
@Path(quot;myGrizzletquot;)
public class MyGrizzlet {
@Broadcaster(Grizzlet.Scope.VM)
private Broadcaster bc;
@Suspend(6000) @GET @Push
public String onGet() {
bc.brodcast(quot;New userquot;);
return quot;Suspending the connectionquot;;
}
}
© SitePen, Inc. 2008. All Rights Reserved
44. Pub / Sub Advantages
• Low coupling
• Inter-language interoperability
© SitePen, Inc. 2008. All Rights Reserved
45. API Styles:
Level 2: API Based
© SitePen, Inc. 2008. All Rights Reserved
46. Level 2: API Based
<span id=quot;pricequot;></span>
<script>
dwr.util.setValue(quot;pricequot;, 42);
</script>
© SitePen, Inc. 2008. All Rights Reserved
47. Level 2: API Based
<span id=quot;pricequot;></span>
// on the server
import org.directwebremoting.ui.dwr.Util;
Util.setValue(quot;pricequot;, 42);
© SitePen, Inc. 2008. All Rights Reserved
48. Level 2: API Based
<span id=quot;pricequot;></span>
// on the server
import org....scriptaculous.Effect;
Effect.shake(quot;pricequot;);
© SitePen, Inc. 2008. All Rights Reserved
49. Level 2: API Based
import org.dojotoolkit.dijit.Dijit;
import org.dojotoolkit.dijit.Editor;
Editor e = Dijit.byId(quot;pricequot;,Editor.class);
e.setValue(42);
© SitePen, Inc. 2008. All Rights Reserved
50. Level 2: API Based
• Tighter coupling
• Richer API
© SitePen, Inc. 2008. All Rights Reserved
51. API Styles:
Level 3: Data Sync Based
© SitePen, Inc. 2008. All Rights Reserved
52. Level 3: Data Sync API
dataStore.add(person);
© SitePen, Inc. 2008. All Rights Reserved
53. Level 3: Data Sync Based
• Trivial to understand
• Enables smart network control
• Very hard to get 100%
© SitePen, Inc. 2008. All Rights Reserved
54. Comet
The Rise of Highly Interactive Websites
http://directwebremoting.org/
http://cometdaily.org/
http://sitepen.com/
© SitePen, Inc. 2008. All Rights Reserved