Comet_where_are_we_now_where_we_headed

2,619
-1

Published on

A introduction to Comet. Showing common patterns and introducing current solutions as ADF Faces or Bayeux(Jetty). Outlook to the "future" of push, e.g. Servlet 3.0 and HTML5.

Published in: Education
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,619
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

Comet_where_are_we_now_where_we_headed

  1. 1. Comet - Where Are We Now? Where Are We Headed? Matthias Wessendorf | matzew@apache.org http://matthiaswessendorf.wordpress.com http://twitter.com/mwessendorf
  2. 2. Matthias Wessendorf <ul><li>Oracle Corporation </li></ul><ul><li>Apache Software Foundation </li></ul><ul><ul><li>ASF Member </li></ul></ul><ul><ul><li>Committer and PMC @Apache MyFaces </li></ul></ul><ul><ul><li>Committer and PMC @Apache Shale </li></ul></ul><ul><li>Author </li></ul><ul><ul><li>(German) Java- and Eclipse-Magazine </li></ul></ul><ul><ul><li>Books on Struts, J2ME & WebServices </li></ul></ul><ul><li>Speaker </li></ul><ul><ul><li>AjaxWorld </li></ul></ul><ul><ul><li>Oracle Open World </li></ul></ul><ul><ul><li>ApacheCon </li></ul></ul><ul><ul><li>JavaOne </li></ul></ul><ul><ul><li>JAX, WJAX </li></ul></ul>
  3. 3. Agenda <ul><li>Introduction </li></ul><ul><li>Comet / Server-Side Push </li></ul><ul><li>Comet solutions </li></ul><ul><ul><li>Bayeux </li></ul></ul><ul><ul><li>Generic </li></ul></ul><ul><ul><li>JavaServer Faces </li></ul></ul><ul><li>comet.NEXT </li></ul><ul><li>Discussion </li></ul>
  4. 4. Agenda <ul><li>Introduction </li></ul><ul><li>Comet / Server-Side Push </li></ul><ul><li>Comet solutions </li></ul><ul><ul><li>Bayeux </li></ul></ul><ul><ul><li>Generic </li></ul></ul><ul><ul><li>JavaServer Faces </li></ul></ul><ul><li>comet.NEXT </li></ul><ul><li>Discussion </li></ul>
  5. 5. Why push ?
  6. 6. Introduction <ul><li>Polling </li></ul><ul><ul><li>annoying..., traffic on the server  chatty solution </li></ul></ul><ul><li>Push </li></ul><ul><ul><li>Don‘t call us, we call you ! </li></ul></ul><ul><li>Use Cases </li></ul><ul><ul><li>collaborative tooling </li></ul></ul><ul><ul><ul><li>sharing documents </li></ul></ul></ul><ul><ul><ul><li>chat </li></ul></ul></ul><ul><ul><li>streaming data (  football/soccer, ...) </li></ul></ul><ul><ul><li>trading systems (  auctions) </li></ul></ul><ul><ul><li>live reporting </li></ul></ul><ul><ul><li>monitoring (  server console) </li></ul></ul><ul><ul><li>pushing async data into the client (  credit card verification) </li></ul></ul>
  7. 7. collaborative tooling Push when you need it
  8. 8. Agenda <ul><li>Introduction </li></ul><ul><li>Comet / Server-Side Push </li></ul><ul><li>Comet solutions </li></ul><ul><ul><li>Bayeux </li></ul></ul><ul><ul><li>Generic </li></ul></ul><ul><ul><li>JavaServer Faces </li></ul></ul><ul><li>comet.NEXT </li></ul><ul><li>Discussion </li></ul>
  9. 9. Comet / server side push
  10. 10. Comet / server side push <ul><li>polling VS long-polling VS streaming </li></ul>*  depends on the interval... **  fallback to long-polling - - ++ live connection some issues ** OK OK proxy servers + + + - * latency push long-poll polling
  11. 11. Comet – Some problems... <ul><li>Scalability </li></ul><ul><ul><li>Java NIO ... </li></ul></ul><ul><ul><li>Container specific APIs </li></ul></ul><ul><li>Client side architecture </li></ul><ul><ul><li>How to integrate the pushed data ? </li></ul></ul><ul><li>pushed data callback: </li></ul><ul><li><script> _update_function(“ html_id “, JSONpayload); </script> </li></ul><ul><ul><li>client side framework </li></ul></ul>
  12. 12. Comet – simpler integration
  13. 13. Agenda <ul><li>Introduction </li></ul><ul><li>Comet / Server-Side Push </li></ul><ul><li>Comet solutions </li></ul><ul><ul><li>Bayeux </li></ul></ul><ul><ul><li>Generic </li></ul></ul><ul><ul><li>JavaServer Faces </li></ul></ul><ul><li>comet.NEXT </li></ul><ul><li>Discussion </li></ul>
  14. 14. Agenda <ul><li>Bayeux </li></ul>
  15. 15. Bayeux <ul><li>Bayeux Specification </li></ul><ul><ul><li>JSON-based protocol for transporting asynchronous msgs </li></ul></ul><ul><ul><ul><li>pub/sub  „JMS over http“ </li></ul></ul></ul><ul><ul><li>Client and Server APIs </li></ul></ul><ul><li>Client: </li></ul><ul><ul><li>connect (&quot;/context/servlet&quot;); </li></ul></ul><ul><ul><li>subscribe (&quot;/someChannel&quot;, javaScriptCallback); </li></ul></ul><ul><li>Server: </li></ul><ul><ul><li>Channel channel = bayeux .getChannel(&quot;/someChannel“); </li></ul></ul><ul><ul><li>Message msg = bayeux.newMessage(client); </li></ul></ul><ul><ul><li>msg.put(„ city &quot;, &quot;New York City&quot;); </li></ul></ul><ul><ul><li>msg.put(&quot; event &quot;, &quot;AjaxWorld 2009&quot;); </li></ul></ul><ul><ul><li>channel.publish(message); </li></ul></ul>
  16. 16. Bayeux <ul><li>Bayeux Implementations </li></ul><ul><ul><li>Server: </li></ul></ul><ul><ul><ul><li>Jetty </li></ul></ul></ul><ul><ul><ul><li>Tomcat (smaller and cleaner API) </li></ul></ul></ul><ul><ul><ul><li>Glassfish / Grizzly </li></ul></ul></ul><ul><ul><ul><li>Weblogic (HTTP Publish-Subscribe Server) Perl, Pyhton,... </li></ul></ul></ul><ul><ul><li>Client: </li></ul></ul><ul><ul><ul><li>dojo toolkit </li></ul></ul></ul><ul><ul><ul><li>jQuery-based (two are there) </li></ul></ul></ul><ul><li>Issues </li></ul><ul><ul><li>not a real Java standard (e.g. JSF / Servlet) </li></ul></ul><ul><ul><li>different APIs for all implementations... </li></ul></ul>
  17. 17. Bayeux <ul><li> DEMO  </li></ul>* Jetty  http://eclipse.org/jetty
  18. 18. Bayeux with JSF ? <ul><li>Not yet there </li></ul><ul><li>Steps for a possible JSF-Bayeux integration: </li></ul><ul><ul><li>pick a server-side API </li></ul></ul><ul><ul><ul><li>doing it again ? * </li></ul></ul></ul><ul><ul><li>pick a client-side API </li></ul></ul><ul><ul><ul><li>resue jQuery ? </li></ul></ul></ul><ul><ul><ul><li>reuse dojo ? </li></ul></ul></ul><ul><ul><li>Avoid users from writing JavaScript </li></ul></ul><ul><ul><li>Offer a (behavioral) tag: </li></ul></ul><ul><li><mylib:bayeux channel=&quot;/someChannel&quot; callback=&quot; myCallbackJavaScriptFunction &quot; </li></ul><ul><li>... /> </li></ul>* Servlet 3.0 will help here...
  19. 19. Agenda <ul><li>Generic solution </li></ul>
  20. 20. Atmosphere <ul><li>An Ajax Push (Comet) Framework </li></ul><ul><ul><li>„ Comet for the masses“ </li></ul></ul><ul><li>Solves the problem of different container APIs </li></ul><ul><ul><li>Servlet 3.0 will help, but ... </li></ul></ul><ul><ul><li>Atmosphere provides a generic API for different containers </li></ul></ul><ul><ul><li>No need to port your application to a specific server </li></ul></ul><ul><ul><li>Runs on any Servlet 2.5 container (  Apache Tomcat 6) </li></ul></ul><ul><li>Uses Java 5 @nnotations </li></ul><ul><li>Supports REST (JSR 311) </li></ul><ul><ul><li>Jersey implementation </li></ul></ul><ul><li>Open Source Framework (CDDL) </li></ul>
  21. 21. Atmosphere * URL  https://atmosphere.dev.java.net/  DEMO 
  22. 22. Agenda <ul><li>JavaServer Faces </li></ul>
  23. 23. JavaServer Faces What is it really ? <ul><li>Lightweight and extensible Web-Framework </li></ul><ul><ul><li>POJO, replace the bits (navigation, view-technology,...) </li></ul></ul><ul><li>API for UI Component Development </li></ul><ul><ul><li>Several 3rd party component suites available </li></ul></ul><ul><li>Goals </li></ul><ul><ul><li>Make Java-Web-Development simple </li></ul></ul><ul><ul><li>Tooling (JDeveloper, Netbeans, Eclipse, ...) </li></ul></ul><ul><li>Implementations </li></ul><ul><ul><li>Mojarra  RI, hosted on java.net </li></ul></ul><ul><ul><li>Apache MyFaces </li></ul></ul><ul><ul><li>Caucho Resin </li></ul></ul><ul><ul><li>OperaMasks.org </li></ul></ul>
  24. 24. JavaServer Faces Page Template Server Side <f:view> <h:form> <h:inputText value=“#{b.value}” /> <h:inputText … /> <h:inputText …. /> … <h:commandButton … /> </h:form> </f:view> Servlet JSF Lifecycle In Memory Tree View Root Form UI Component Renderer
  25. 25. JavaServer Faces and Comet <ul><li>Integration into JSF... </li></ul><ul><li>Polling: </li></ul><ul><ul><li>JSF lifecycle </li></ul></ul><ul><li>Push and long-polling: </li></ul><ul><ul><li>extra „channel“ for comet </li></ul></ul><ul><ul><li>client architecture ... </li></ul></ul><ul><ul><li>„ client side rendering“ </li></ul></ul>
  26. 26. JavaServer Faces and Comet
  27. 27. Comet solutions for JSF <ul><li>Good news! </li></ul><ul><ul><li>There are some JSF/Comet solutions already today! </li></ul></ul><ul><ul><ul><li>more to come ? </li></ul></ul></ul><ul><li>IceSoft  IceFaces </li></ul><ul><li>Oracle  ADF Faces Rich Client </li></ul>
  28. 28. IceFaces  reverse ajax <ul><li>Rich JSF and Web 2.0 component suite </li></ul><ul><ul><li>„ RIA toolkit“ </li></ul></ul><ul><ul><li>50+ widgets </li></ul></ul><ul><ul><li>Support for iPhone, etc. </li></ul></ul><ul><ul><li>OpenSource </li></ul></ul><ul><ul><li>CSS Themes </li></ul></ul><ul><ul><li>and more </li></ul></ul><ul><li>Push / Poll model </li></ul><ul><ul><li>Glassfish / Grizzly </li></ul></ul><ul><li>SessionRenderer </li></ul><ul><ul><li>SessionRenderer.render(...) </li></ul></ul><ul><ul><li>SessionRenderer.addCurrentSession(...) </li></ul></ul>
  29. 29. ADF Faces <ul><li>ADF Faces Rich Client </li></ul><ul><ul><li>Rich Widgets, Web 2.0 components </li></ul></ul><ul><li>more than 90 JSF components </li></ul><ul><ul><li>No InputSuggest ... </li></ul></ul><ul><li>more than 30 helpers </li></ul><ul><ul><li>printable view, validators, excel export, ... </li></ul></ul><ul><li>Ajax </li></ul><ul><ul><li>Ajax integration, API for server AND client </li></ul></ul><ul><li>Requirements </li></ul><ul><ul><li>JavaServer Faces 1.2 </li></ul></ul><ul><ul><li>Apache MyFaces Trinidad 1.2.x </li></ul></ul>
  30. 30. RIA – Rich Internet Applications <ul><ul><li>http://tinyurl.com/adf-faces-live </li></ul></ul>
  31. 31. ADF Faces <ul><li>ADF Faces Rich Client </li></ul><ul><ul><li>Rich Widgets, Web 2.0 components </li></ul></ul><ul><li>more than 90 JSF components </li></ul><ul><ul><li>No (yet) InputSuggest ... </li></ul></ul><ul><li>more than 30 helpers </li></ul><ul><ul><li>printable view, validators, excel export, ... </li></ul></ul><ul><li>Ajax </li></ul><ul><ul><li>Ajax integration, API for server AND client </li></ul></ul><ul><li>Requirements </li></ul><ul><ul><li>JavaServer Faces 1.2_x </li></ul></ul><ul><ul><li>Apache MyFaces Trinidad 1.2.x </li></ul></ul>
  32. 32. ADF Faces - Architecture Client Side Server Side Label1 Label2 Label3 OK DOM Peer Objects Document Form Element Servlet JSF Lifecycle In Memory Tree View Root Form UI Component Renderer
  33. 33. ADF Faces - Architecture client-side components Label1 Label2 OK <af:panelLabelAndMessage labelAndAccessKey=&quot;Label 2&quot;> <af:inputText autoTab=&quot;true&quot; simple=&quot;true&quot; id=&quot;id1&quot; maximumLength=&quot;3&quot; columns=&quot;3&quot; label=&quot;first&quot;/> <af:inputText autoTab=&quot;true&quot; simple=&quot;true&quot; id=&quot;id2&quot; maximumLength=&quot;3&quot; columns=&quot;3&quot; label=&quot;second&quot;/> <af:inputText autoTab=&quot;true&quot; simple=&quot;true&quot; id=&quot;id3&quot; maximumLength=&quot;3&quot; columns=&quot;3&quot; label=&quot;third&quot;/> </af:panelLabelAndMessage> <af:inputText id=&quot;idInputText&quot; label=&quot;Label 1&quot; value=&quot;#{myBean.value}&quot;/> id1 id2 Id3
  34. 34. ADF Faces – server-side Push <ul><li>Doing „comet“ is hard </li></ul><ul><ul><li>JavaScript guy... </li></ul></ul><ul><ul><li>Server-side guy... </li></ul></ul><ul><ul><ul><li>Tomcat vs. Jetty vs. WLS vs. Glashfish vs. WhatNot </li></ul></ul></ul><ul><li>Active Data Support is integrated into ADF </li></ul><ul><li>important interface(s): </li></ul><ul><ul><li>ActiveDataModel </li></ul></ul><ul><ul><li>ActiveDataListener </li></ul></ul><ul><li>custom implementation possible ... </li></ul><ul><li>based on JSF‘s declarative model </li></ul><ul><ul><li>no special handling in the view </li></ul></ul>
  35. 35. ADF Faces – server-side Push  DEMO 
  36. 36. Agenda <ul><li>Introduction </li></ul><ul><li>Comet / Server-Side Push </li></ul><ul><li>Comet solutions </li></ul><ul><ul><li>Bayeux </li></ul></ul><ul><ul><li>Generic </li></ul></ul><ul><ul><li>JavaServer Faces </li></ul></ul><ul><li>comet.NEXT </li></ul><ul><li>Discussion </li></ul>
  37. 37. comet.NEXT – Servlet 3.0 <ul><li>Part of Java EE 6 </li></ul><ul><ul><li>ready in September 2009 ??? </li></ul></ul><ul><li>ServletRequest interface </li></ul><ul><ul><li>startAsync() : AsyncContext </li></ul></ul><ul><ul><li>startAsync(request, response) : AsyncContext </li></ul></ul><ul><ul><li>isAsyncSupported() : boolean </li></ul></ul><ul><li>AsyncListener interface </li></ul><ul><ul><li>onComplete(asyncEvent) : void </li></ul></ul><ul><ul><li>onTimeout(asyncEvent) : void </li></ul></ul>
  38. 38. comet.NEXT – Servlet 3.0 <ul><li>Async example: </li></ul><ul><li>service(Request req, Response res) { </li></ul><ul><li>AsyncContext actx = req.startAsync(); </li></ul><ul><li>Runnable runnable = new Runnable() { </li></ul><ul><li>public void run() { </li></ul><ul><li>Message m = jmsTemplate.receive(); </li></ul><ul><li>res.write(m); </li></ul><ul><li>req.complete(); </li></ul><ul><li>} </li></ul><ul><li>}; </li></ul><ul><li>executor.submit(runnable); </li></ul><ul><li>} </li></ul>Defensive programming: request.isAsyncSupported(); request.isAsyncStarted(); request.getAsyncContext();
  39. 39. comet.NEXT – HTML 5 <ul><li>WebSockets </li></ul><ul><ul><li>var socket = new WebSocket(&quot;ws://myserver.com&quot;); </li></ul></ul><ul><ul><li>socket.onopen = function(evt) {...}; </li></ul></ul><ul><ul><li>socket.onmessage = function(evt) { alert( &quot;Received Message: &quot; + evt.data); </li></ul></ul><ul><ul><li>}; </li></ul></ul><ul><ul><li>socket.onclose = function(evt) {...}; </li></ul></ul><ul><li>Usage </li></ul><ul><ul><li>socket.postMsg(„Hallo Server“); </li></ul></ul><ul><ul><li>socket.disconnect(); </li></ul></ul>
  40. 40. comet.NEXT – HTML 5 <ul><li>Server-Send-Events </li></ul><ul><ul><li>standardizes the format of (continuous) data stream </li></ul></ul><ul><ul><li>native in the browser; cross-browser ... </li></ul></ul><ul><ul><li>new HTML element „eventsource“: </li></ul></ul><ul><ul><li><eventsource src=&quot;http://my.server.com&quot; onmessage=&quot;alert(event.data)&quot; /> </li></ul></ul><ul><ul><li>Data property, contains JSON: </li></ul></ul><ul><ul><li>data: {'conference' : {'city': 'New York', 'event': 'AjaxWorld 2009'}, 'id' : '12345679' } </li></ul></ul>
  41. 41. comet.NEXT – HTML 5 <ul><li>Today </li></ul><ul><ul><li>Lift Framework </li></ul></ul><ul><ul><li>Kaazing Gateway </li></ul></ul><ul><ul><li>Opera / Safari 4* / WebKit / Firefox Minefield * </li></ul></ul><ul><ul><li>Firefox-Plugin </li></ul></ul><ul><li>Future </li></ul><ul><ul><li>IE 11  </li></ul></ul><ul><li>UPDATE -> 2009/03/28 </li></ul><ul><ul><li>Shrinking of HTML5 spec: </li></ul></ul><ul><ul><ul><li>http://annevankesteren.nl/2009/03/more-shrinking-html5 </li></ul></ul></ul>* https://bugzilla.mozilla.org/show_bug.cgi?id=472529
  42. 42. Agenda <ul><li>Introduction </li></ul><ul><li>Comet / Server-Side Push </li></ul><ul><li>Comet solutions </li></ul><ul><ul><li>Bayeux </li></ul></ul><ul><ul><li>Generic </li></ul></ul><ul><ul><li>JavaServer Faces </li></ul></ul><ul><li>comet.NEXT </li></ul><ul><li>Discussion </li></ul>
  43. 43. Discussion <ul><li>Where are we today ? </li></ul><ul><li>Web 2.0 Applications  RIA </li></ul><ul><ul><li>more application, than WEB </li></ul></ul><ul><li>Adding „Hacks“  Comet </li></ul><ul><ul><li>Improving the UI experience </li></ul></ul><ul><li>Simulating FAT clients </li></ul><ul><li>The browser == Application Platform </li></ul>
  44. 44. Questions <ul><li>and (maybe) answers </li></ul>
  45. 45. Links and Resources <ul><li>ADF </li></ul><ul><ul><li>http://www.oracle.com/technology/products/adf/adffaces/index.html </li></ul></ul><ul><ul><li>http://tinyurl.com/adf-faces-live </li></ul></ul><ul><li>Bayeux / Cometd </li></ul><ul><ul><li>http://cometdproject.dojotoolkit.org/ </li></ul></ul><ul><ul><li>Blog </li></ul></ul><ul><li>HTML 5 WebSockets </li></ul><ul><ul><li>http://dev.w3.org/html5/spec/Overview.html#comms </li></ul></ul><ul><li>Slides: </li></ul><ul><ul><li>http://www.slideshare.net/mwessendorf </li></ul></ul>
  46. 46. Thank you! [email_address] BLOG: matthiaswessendorf.wordpress.com

×