Your SlideShare is downloading. ×
0
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
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 and the Rise of Highly Interactive Websites

3,296

Published on

Comet talk from the Ajax Experience 2008

Comet talk from the Ajax Experience 2008

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

No Downloads
Views
Total Views
3,296
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
144
Comments
0
Likes
4
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

Transcript

  • 1. 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
  • 5. © SitePen, Inc. 2008. All Rights Reserved
  • 6. © 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
  • 16. Performance © SitePen, Inc. 2008. All Rights Reserved
  • 17. Introduction Perspectives Technical Architectures © SitePen, Inc. 2008. All Rights Reserved
  • 18. BUT © 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
  • 33. Inboard vs Outboard © 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
  • 38. API Styles: © 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

×