SlideShare a Scribd company logo

Pushing Datatothe Browserwith Comet Ajax W

•
•
rajivmordani
rajivmordani

The document discusses pushing data from a server to a browser using Comet techniques like long polling and streaming. It describes how Comet allows for real-time updates without polling by keeping connections open. The Bayeux protocol is presented as an open standard for implementing Comet with publish/subscribe messaging on both the client-side and server-side in Java. Examples of using Comet for chat applications and sensor data updates are provided.

1 of 33
Download to read offline
Pushing Data to the Browser with Comet by Kevin Nilson http://www.javaclimber.com AjaxWorld 2008 http://ajaxworld.com Wednesday October 22, 2008 9:50 - 10:35am
Kevin Nilson Kevin Nilson is currently a Principal Software Architect for a Large Financial Institute in Silicon Valley. He is the co-lead of the Silicon Valley Web Developer JUG. He is also the co-lead of the Silicon Valley Google Technology User Group. Prior to his current work, Kevin had extensive industry software engineering and consulting experience with companies such as: Pfizer, Northrop Grumman, AT&T Corporation, etc. He also worked part-time as an adjunct professor at the College of San Mateo. Kevin received a Bachelor's degree in Computer Science with a Minor in Mathematics from Southern Illinois University in Carbondale and a Masters degree in Computer Science from Southern Illinois University in Edwardsville. He is a Sun Certified Java Programmer and Sun Certified Web Component Developer. You can learn more about Kevin on his website JavaClimber.com.
Ajax What is Ajax? Client Browser calling webpage to get data to update a page Many great JavaScript Ajax Framworks JSON often used
Uses of Ajax Fill Drop-downs to support selecting: State, County, then City Drill-down in reporting verify form data adding route to map
Ajax Limitations Based on Client Request, not server state change. Chat Application Stock Updates Temperature Update Server Load, Server Processes, Current Sessions JMS ... Polling is the best you can do with Ajax
What is Comet Allows data to be pushed to the browser from the server Sometimes called Reverse Ajax Challenge because HTTP is a connectionless protocol Long Polling and Streaming are considered Comet (next) Push data to the browser without install Requires accepting quot;scaryquot; dialog, configuration, .... Applet Flash
Uses of Comet Chat Application Stock Updates Temperature Update Server Load, Server Processes, Current Sessions JMS ...
Polling (Option 1)
Polling
Polling Demo
Long Polling (Option 2)
Long Polling
Long Polling - Chat ( javaclimber.com )
Long Polling Demo
Streaming (Option 3)
Streaming
Ajax vs Comet
Challenges Client Side 2 request limit per domain Server Side Servlet = 1 thread per request Continuation added to Servlet 3
Bayeux Only Open Standard for Comet, (Open Source) Publish / Subscribe In Draft Multiple Client and Server Implementations Client Dojo JQuery ExtJs flexcomet ... Server Jetty Tomcat WebSphere Weblogic Cometd-twisted (python) Cometd-perl
Bayeux Sensor Demo
Bayeux JavaScript - Publish var text = 'hello'; dojox.cometd.publish(quot;/chatquot;, { chat: text});
Bayeux JavaScript - Subscribe dojox.cometd.init(quot;http://localhost:8080/cometdquot;); dojox.cometd.subscribe(quot;/chatquot;, myapp, quot;chatMessagequot;); chatMessage: function(message){ if(!message.data){ alert(quot;bad chat data quot;+message); } else { updateChatDisplay(message.data.chat); } }
Bayeux - Reconnect myapp._meta=dojo.subscribe(quot;/cometd/metaquot;, dojo.hitch(this,function(event){ if (event.action==quot;handshakequot;) { } else if (event.action==quot;connectquot;) { if (event.successful && !this._connected){ //user is reconnected } if (!event.successful && this._connected){ //user is disconnected } this._connected=event.successful; } }));
Bayeux - Java - Publish public void publish(String channel, Map<String, Object> data) { if(getBayeux().hasChannel(channel)){ Channel c = getBayeux(). getChannel(channel, false); c.publish(getClient(), data,quot;fromserverquot;); }else{ //oops no subscribers } }
Bayeux - Java - Subscribe & Unsubscribe super.subscribe(channel, method); Channel c = bayeux.getChannel(channelStr, true); c.unsubscribe(getClient());
Bayeux - Java - Remove Notification client.addListener(new RemoveListener( ){ public void removed(String clientId, boolean timeout){ //do something to clean-up } });
Bayeux - Java - Security public interface SecurityPolicy { boolean canHandshake(Message message); boolean canCreate(Client client,String channel,Message message); boolean canSubscribe(Client client,String channel,Message messsage); boolean canPublish(Client client,String channel,Message messsage); }
Bayeux - Java - Request AbstractBayeux b = (AbstractBayeux) getBayeux(); if (b.isRequestAvailable()) HttpServletRequest request = b.getCurrentRequest(); web.xml, add to cometd servlet <init-param> <param-name>requestAvailable</param-name> <param-value>true</param-value> </init-param>
Bayeux - Java - Request AbstractBayeux b = (AbstractBayeux) getBayeux(); if (b.isRequestAvailable()) HttpServletRequest request = b.getCurrentRequest(); web.xml, add to cometd servlet <init-param> <param-name>requestAvailable</param-name> <param-value>true</param-value> </init-param>
Cometd Chat Demo
Bayeux - Misconceptions Many Believe Bayeux is only for Pub/Sub, but this is not true. Two special channels exist for RPC style requests meta channels service channels
Future HTML5 brings WebSockets Full Spec Completes 2022, but WebSockets spec is very mature Text based, so name is a bit confusing
Questions Article by Kevin Nilson Pushing Data to the Browser with Comet by Kevin Nilson http://www.developer.com/services/article. php/10928_3756841 Upcoming Speaking Events with Kevin Nilson The Chronicles of Web Standard: the HTML 5, the Comet and the WebSocket 10/29/2008 - Silicon Valley Web Builder http://tinyurl.com/webstandard An Introduction to Comet and Bayeux November 8-9, 2008 Silicon Valley Code Camp http://www.siliconvalley-codecamp.com

More Related Content

Pushing Datatothe Browserwith Comet Ajax W

  • 1. Pushing Data to the Browser with Comet by Kevin Nilson http://www.javaclimber.com AjaxWorld 2008 http://ajaxworld.com Wednesday October 22, 2008 9:50 - 10:35am
  • 2. Kevin Nilson Kevin Nilson is currently a Principal Software Architect for a Large Financial Institute in Silicon Valley. He is the co-lead of the Silicon Valley Web Developer JUG. He is also the co-lead of the Silicon Valley Google Technology User Group. Prior to his current work, Kevin had extensive industry software engineering and consulting experience with companies such as: Pfizer, Northrop Grumman, AT&T Corporation, etc. He also worked part-time as an adjunct professor at the College of San Mateo. Kevin received a Bachelor's degree in Computer Science with a Minor in Mathematics from Southern Illinois University in Carbondale and a Masters degree in Computer Science from Southern Illinois University in Edwardsville. He is a Sun Certified Java Programmer and Sun Certified Web Component Developer. You can learn more about Kevin on his website JavaClimber.com.
  • 3. Ajax What is Ajax? Client Browser calling webpage to get data to update a page Many great JavaScript Ajax Framworks JSON often used
  • 4. Uses of Ajax Fill Drop-downs to support selecting: State, County, then City Drill-down in reporting verify form data adding route to map
  • 5. Ajax Limitations Based on Client Request, not server state change. Chat Application Stock Updates Temperature Update Server Load, Server Processes, Current Sessions JMS ... Polling is the best you can do with Ajax
  • 6. What is Comet Allows data to be pushed to the browser from the server Sometimes called Reverse Ajax Challenge because HTTP is a connectionless protocol Long Polling and Streaming are considered Comet (next) Push data to the browser without install Requires accepting quot;scaryquot; dialog, configuration, .... Applet Flash
  • 7. Uses of Comet Chat Application Stock Updates Temperature Update Server Load, Server Processes, Current Sessions JMS ...
  • 13. Long Polling - Chat ( javaclimber.com )
  • 18. Challenges Client Side 2 request limit per domain Server Side Servlet = 1 thread per request Continuation added to Servlet 3
  • 19. Bayeux Only Open Standard for Comet, (Open Source) Publish / Subscribe In Draft Multiple Client and Server Implementations Client Dojo JQuery ExtJs flexcomet ... Server Jetty Tomcat WebSphere Weblogic Cometd-twisted (python) Cometd-perl
  • 21. Bayeux JavaScript - Publish var text = 'hello'; dojox.cometd.publish(quot;/chatquot;, { chat: text});
  • 22. Bayeux JavaScript - Subscribe dojox.cometd.init(quot;http://localhost:8080/cometdquot;); dojox.cometd.subscribe(quot;/chatquot;, myapp, quot;chatMessagequot;); chatMessage: function(message){ if(!message.data){ alert(quot;bad chat data quot;+message); } else { updateChatDisplay(message.data.chat); } }
  • 23. Bayeux - Reconnect myapp._meta=dojo.subscribe(quot;/cometd/metaquot;, dojo.hitch(this,function(event){ if (event.action==quot;handshakequot;) { } else if (event.action==quot;connectquot;) { if (event.successful && !this._connected){ //user is reconnected } if (!event.successful && this._connected){ //user is disconnected } this._connected=event.successful; } }));
  • 24. Bayeux - Java - Publish public void publish(String channel, Map<String, Object> data) { if(getBayeux().hasChannel(channel)){ Channel c = getBayeux(). getChannel(channel, false); c.publish(getClient(), data,quot;fromserverquot;); }else{ //oops no subscribers } }
  • 25. Bayeux - Java - Subscribe & Unsubscribe super.subscribe(channel, method); Channel c = bayeux.getChannel(channelStr, true); c.unsubscribe(getClient());
  • 26. Bayeux - Java - Remove Notification client.addListener(new RemoveListener( ){ public void removed(String clientId, boolean timeout){ //do something to clean-up } });
  • 27. Bayeux - Java - Security public interface SecurityPolicy { boolean canHandshake(Message message); boolean canCreate(Client client,String channel,Message message); boolean canSubscribe(Client client,String channel,Message messsage); boolean canPublish(Client client,String channel,Message messsage); }
  • 28. Bayeux - Java - Request AbstractBayeux b = (AbstractBayeux) getBayeux(); if (b.isRequestAvailable()) HttpServletRequest request = b.getCurrentRequest(); web.xml, add to cometd servlet <init-param> <param-name>requestAvailable</param-name> <param-value>true</param-value> </init-param>
  • 29. Bayeux - Java - Request AbstractBayeux b = (AbstractBayeux) getBayeux(); if (b.isRequestAvailable()) HttpServletRequest request = b.getCurrentRequest(); web.xml, add to cometd servlet <init-param> <param-name>requestAvailable</param-name> <param-value>true</param-value> </init-param>
  • 31. Bayeux - Misconceptions Many Believe Bayeux is only for Pub/Sub, but this is not true. Two special channels exist for RPC style requests meta channels service channels
  • 32. Future HTML5 brings WebSockets Full Spec Completes 2022, but WebSockets spec is very mature Text based, so name is a bit confusing
  • 33. Questions Article by Kevin Nilson Pushing Data to the Browser with Comet by Kevin Nilson http://www.developer.com/services/article. php/10928_3756841 Upcoming Speaking Events with Kevin Nilson The Chronicles of Web Standard: the HTML 5, the Comet and the WebSocket 10/29/2008 - Silicon Valley Web Builder http://tinyurl.com/webstandard An Introduction to Comet and Bayeux November 8-9, 2008 Silicon Valley Code Camp http://www.siliconvalley-codecamp.com