Interactive Websites: Comet and DWR
                     Joe Walker, SitePen
Agenda:

Comet 101

The Ultimate Hack

Passing the Pain

DWR 101

Demos
What is Comet?
What is Comet?




Long lived HTTP connections
 •Low latency data
 •For events outside the browser
Why?




Ajax made individual pages interactive places to explore

More and more of the data on the web is social and
ther...
Why?

               Time people
               spend on a
                  page



                 Time before
        ...
Comet turns the web into a network of people
 who interact more naturally than they could
     behind a request/response b...
Examples of Comet


Chat is everywhere: GMail, Meebo, Yahoo Mail ...
Collaborative Editing: GDocs, Thinkature, Jot
Streami...
Agenda:

Comet 101

The Ultimate Hack

Passing the Pain

DWR 101

Demos
But ...




It’s a hack - the web is biased against it
Client Issues

Maximum of 2 connections per browser per host (IE7/6)
 •Coordination using window.name in the client
 •or c...
Client How-to: Forever Frame

Client posts an iframe which doesn’t close quickly
 •Send text/plain and poll in browser (no...
Client How-to: Long Polling


Client makes an XHR request which does not return
immediately

IE disallows reading XHR.resp...
Client How-to: htmlfile


‘htmlfile’ is an ActiveX control like XHR:
 htmlfile = new ActiveXObject(quot;htmlfilequot;);
 htm...
Client How-to: Callback Polling




Create <script> blocks pointing to any domain

Create new script block when last compl...
Client How-to: Other Options

Mime Messaging:
 •Uses Multipart Mime in HTML: x-multipart-replace
 •Not in IE
 •Excellent p...
Server Tricks



Watch out for stream-stoppers
 •Apache: mod_jk
 •Buggy network proxies
 •Various application firewalls

Wa...
Does that stop us?




Ajax is also a hack, but that hasn’t stopped it

And Comet does work
Comet vs. Polling


For Polling:
  •More efficient for very low latencies
  •Simpler to implement

For Comet:
  •More effici...
Agenda:

Comet 101

The Ultimate Hack

Passing the Pain

DWR 101

Demos
Saving you the Pain

On the Server:
 •Jetty, Twisted Python, Grizzly, Lighttpd, Perbal, Juggernaut
 •Everyone except Apach...
Bayeux




Standard Protocol for Interoperable Comet

Supported by:
 •Cometd, Jetty, Dojo, DWR and servers in development
...
Bayeux on the Client via Cometd




Dojo client implementation:
dojox.cometd.init(serverUrl);
dojox.cometd.publish(quot;/t...
Bayeux on the Server


package dojox.cometd;

public interface Bayeux
{
  Client newClient(String idprefix, Listener liste...
Bayeux Performance
Agenda:

Comet 101

The Ultimate Hack

Passing the Pain

DWR 101

Demos
On the Server

public class SomeObject {

    public String sayHello(String n) {
      return quot;Hello, quot; + n;
    }...
On the Server
@RemoteProxy
public class SomeObject {
  @RemoteMethod
  public String sayHello(String n) {
    return quot;...
On the Server                            On the Client

public class SomeObject {                <script
                 ...
On the Server                            On the Client

public class SomeObject {                <script
                 ...
On the Server                            On the Client

public class SomeObject {                <script
                 ...
DWR can marshall:


  Primitive types, and their Object counterparts
     int, boolean, long, float, double, etc
  Obvious ...
Terms



         Comet = long lived HTTP connections

        Polling = regular short HTTP connections

    Piggyback = d...
On the Client

share.html

<p>Share price:
 <span id='price'>
 </span>
</p>
On the Client        On the Server

share.html           ServerContext ctx = ServerContextFactory.get();
                 ...
On the Client        On the Server

share.html           ServerContext ctx = ServerContextFactory.get();
                 ...
On the Client        On the Server

share.html           ServerContext ctx = ServerContextFactory.get();
                 ...
On the Client        On the Server

share.html           ServerContext ctx = ServerContextFactory.get();
                 ...
On the Client        On the Server

share.html           ServerContext ctx = ServerContextFactory.get();
                 ...
On the Client        On the Server

share.html           ServerContext ctx = ServerContextFactory.get();
                 ...
New in DWR 3.0


Converters: Image/Binary file upload/download

Busses: JMS, OpenAjax Hub

JSON / Bayeux support

Drapgen: ...
Pub-Sub


Hub hub = HubFactory.get();

hub.publish(TOPIC_TEXT, info);

hub.subscribe(TOPIC_PEOPLE, new MessageListener() {...
Gears

For a certain set of applications, offline comes free

Remote calls can be optional
 •‘Refresh’ is a common optional...
Agenda:

Comet 101

The Ultimate Hack

Passing the Pain

DWR 101

Demos
Questions?
http://cometdaily.com/   http://getahead.org/blog/joe/
http://cometd.com/       http://directwebremoting.org/
Joe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand Dwr
Upcoming SlideShare
Loading in...5
×

Joe Walker Interactivewebsites Cometand Dwr

3,811

Published on

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

No Downloads
Views
Total Views
3,811
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
46
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Joe Walker Interactivewebsites Cometand Dwr

  1. 1. Interactive Websites: Comet and DWR Joe Walker, SitePen
  2. 2. Agenda: Comet 101 The Ultimate Hack Passing the Pain DWR 101 Demos
  3. 3. What is Comet?
  4. 4. What is Comet? Long lived HTTP connections •Low latency data •For events outside the browser
  5. 5. Why? Ajax made individual pages interactive places to explore More and more of the data on the web is social and therefore changing
  6. 6. Why? Time people spend on a page Time before a page changes Evolution of the Web
  7. 7. Comet turns the web into a network of people who interact more naturally than they could behind a request/response barrier.
  8. 8. Examples of Comet Chat is everywhere: GMail, Meebo, Yahoo Mail ... Collaborative Editing: GDocs, Thinkature, Jot Streaming Financial Data: Lightstreamer, Caplin Asynch Updates: GMail, Yes.com Online Gaming: GPokr Async Server Processing: Polar Rose
  9. 9. Agenda: Comet 101 The Ultimate Hack Passing the Pain DWR 101 Demos
  10. 10. But ... It’s a hack - the web is biased against it
  11. 11. Client Issues Maximum of 2 connections per browser per host (IE7/6) •Coordination using window.name in the client •or cookies using a server •or use multi-home DNS HTTP streaming is download only (chunked mode) TCP connections are kept alive under HTTP 1.1 Server detection of failed connections
  12. 12. Client How-to: Forever Frame Client posts an iframe which doesn’t close quickly •Send text/plain and poll in browser (not IE) •Send text/plain with 4k whitespace to flush IE •Flush with a <script> tag for each data block The iframe will need killing and restarting to avoid memory leak But IE clicks when iframe starts
  13. 13. Client How-to: Long Polling Client makes an XHR request which does not return immediately IE disallows reading XHR.responseText until connection is closed Although you can keep XHR frames open forever, generally you poll
  14. 14. Client How-to: htmlfile ‘htmlfile’ is an ActiveX control like XHR: htmlfile = new ActiveXObject(quot;htmlfilequot;); htmlfile.open(); htmlfile.write(quot;<html><iframe src='javascript:void(0)' onload='cleanup();'></iframe></html>quot;); htmlfile.close(); htmlfile.parentWindow.dwr = dwr; Avoids ‘clicking’, but doesn’t work in IE/Server 2003 Not supported in Firefox, Safari, Opera, etc.
  15. 15. Client How-to: Callback Polling Create <script> blocks pointing to any domain Create new script block when last completes
  16. 16. Client How-to: Other Options Mime Messaging: •Uses Multipart Mime in HTML: x-multipart-replace •Not in IE •Excellent performance Server-Sent Events: WHATWG, but currently Opera only Flash: We probably have enough other options that we don’t need to get into plugins
  17. 17. Server Tricks Watch out for stream-stoppers •Apache: mod_jk •Buggy network proxies •Various application firewalls Watch out for thread starvation
  18. 18. Does that stop us? Ajax is also a hack, but that hasn’t stopped it And Comet does work
  19. 19. Comet vs. Polling For Polling: •More efficient for very low latencies •Simpler to implement For Comet: •More efficient for all but very low latencies •More adaptable
  20. 20. Agenda: Comet 101 The Ultimate Hack Passing the Pain DWR 101 Demos
  21. 21. Saving you the Pain On the Server: •Jetty, Twisted Python, Grizzly, Lighttpd, Perbal, Juggernaut •Everyone except Apache Event Buses •Cometd, mod_pubsub, mod_repubsub, Lightstreamer, KnowHow, HAppS Frameworks •DWR, Juggernaut, Nevow
  22. 22. Bayeux Standard Protocol for Interoperable Comet Supported by: •Cometd, Jetty, Dojo, DWR and servers in development from BEA, IBM and Sun
  23. 23. Bayeux on the Client via Cometd Dojo client implementation: dojox.cometd.init(serverUrl); dojox.cometd.publish(quot;/topicquot;, {/* payload */}); dojox.cometd.subscribe(quot;/topicquot;, function(){/* ... */ });
  24. 24. Bayeux on the Server package dojox.cometd; public interface Bayeux { Client newClient(String idprefix, Listener listener); void publish(Client fromClient, String toChannel, Object data, String msgId); void subscribe(String toChannel, Client subscriber); ... }
  25. 25. Bayeux Performance
  26. 26. Agenda: Comet 101 The Ultimate Hack Passing the Pain DWR 101 Demos
  27. 27. On the Server public class SomeObject { public String sayHello(String n) { return quot;Hello, quot; + n; } public Set<Car> find(long reg) { // ... return cars; } }
  28. 28. On the Server @RemoteProxy public class SomeObject { @RemoteMethod public String sayHello(String n) { return quot;Hello, quot; + n; } @RemoteMethod public Set<Car> find(long reg) { // ... return cars; } }
  29. 29. On the Server On the Client public class SomeObject { <script src='dwr/interface/SomeObject.js'> public String sayHello(String n) { return quot;Hello, quot; + n; } public Set<Car> find(long reg) { // ... return cars; } }
  30. 30. On the Server On the Client public class SomeObject { <script src='dwr/interface/SomeObject.js'> public String sayHello(String n) { return quot;Hello, quot; + n; <script> } SomeObject.sayHello('Joe', update); public Set<Car> find(long reg) { function update(data) { // ... $('field').innerHtml = data; return cars; } } </script> }
  31. 31. On the Server On the Client public class SomeObject { <script src='dwr/interface/SomeObject.js'> public String sayHello(String n) { return quot;Hello, quot; + n; <script> } SomeObject.find('a1', function(cars) { dwr.util.addRows(‘table’, cars, ...); public Set<Car> find(long reg) { }); // ... return cars; } </script> }
  32. 32. DWR can marshall: Primitive types, and their Object counterparts int, boolean, long, float, double, etc Obvious classes (String, Date, BigDecimal, BigInteger, Enum, etc) Arrays and Collections (Map, List, Set, Iterator, ...) JavaBeans and Objects XML objects (DOM, XOM, JDom, Dom4J) Images and Binary Files in version 3.0 (in short, basically anything ...)
  33. 33. Terms Comet = long lived HTTP connections Polling = regular short HTTP connections Piggyback = data smuggled on other connections Reverse Ajax = any of the above
  34. 34. On the Client share.html <p>Share price: <span id='price'> </span> </p>
  35. 35. On the Client On the Server share.html ServerContext ctx = ServerContextFactory.get(); Collection sessions = <p>Share price: ctx.getScriptSessionsByPage(quot;share.htmlquot;); <span id='price'> </span> </p>
  36. 36. On the Client On the Server share.html ServerContext ctx = ServerContextFactory.get(); Collection sessions = <p>Share price: ctx.getScriptSessionsByPage(quot;share.htmlquot;); <span id='price'> </span> String s = quot;dwr.util.setValue('price', 42)quot;; </p> ScriptBuffer b = new ScriptBuffer(s); for (ScriptSession session : sessions) { session.addScript(b); }
  37. 37. On the Client On the Server share.html ServerContext ctx = ServerContextFactory.get(); Collection sessions = <p>Share price: ctx.getScriptSessionsByPage(quot;share.htmlquot;); <span id='price'> </span> Util pages = new Util(sessions); </p> pages.setValue(quot;pricequot;, 42);
  38. 38. On the Client On the Server share.html ServerContext ctx = ServerContextFactory.get(); Collection sessions = <p>Share price: ctx.getScriptSessionsByPage(quot;share.htmlquot;); <span id='price'> </span> import org....scriptaculous.Effect </p> Effect e = new Effect(sessions); e.shake(quot;pricequot;);
  39. 39. On the Client On the Server share.html ServerContext ctx = ServerContextFactory.get(); Collection sessions = <p>Share price: ctx.getScriptSessionsByPage(quot;share.htmlquot;); <span id='price'> </span> import jsx3.gui.* </p> Server s = GI.getServer(sessions, quot;appquot;); Button b = s.getJSXById(quot;idquot;, Button.class); b.setEnabled(Form.STATEDISABLED, true);
  40. 40. On the Client On the Server share.html ServerContext ctx = ServerContextFactory.get(); Collection sessions = <p>Share price: ctx.getScriptSessionsByPage(quot;share.htmlquot;); <span id='price'> </span> import org.dojotoolkit.dijit.Dijit; </p> import org.dojotoolkit.dijit.Editor; Dijit dijit = new Dijit(sessions); Editor e = dijit.byId(quot;pricequot;, Editor.class); e.setValue(42);
  41. 41. New in DWR 3.0 Converters: Image/Binary file upload/download Busses: JMS, OpenAjax Hub JSON / Bayeux support Drapgen: GI and maybe Dojo in Java Gears: Auto offline
  42. 42. Pub-Sub Hub hub = HubFactory.get(); hub.publish(TOPIC_TEXT, info); hub.subscribe(TOPIC_PEOPLE, new MessageListener() { public void onMessage(MessageEvent message) { Person p = message.getData(Person.class); // ... } });
  43. 43. Gears For a certain set of applications, offline comes free Remote calls can be optional •‘Refresh’ is a common optional operation •‘Save’ is a common mandatory option If offline, DWR will queue the mandatory ones for later, and let you carry on without the optional ones.
  44. 44. Agenda: Comet 101 The Ultimate Hack Passing the Pain DWR 101 Demos
  45. 45. Questions? http://cometdaily.com/ http://getahead.org/blog/joe/ http://cometd.com/ http://directwebremoting.org/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×