Comet - Where Are We Now? Where Are We Headed? Matthias Wessendorf | matzew@apache.org http://matthiaswessendorf.wordpress.com http://twitter.com/mwessendorf

Matthias Wessendorf Oracle Corporation Apache Software Foundation ASF Member Committer and PMC @Apache MyFaces Committer and PMC @Apache Shale Author (German) Java- and Eclipse-Magazine Books on Struts, J2ME & WebServices Speaker AjaxWorld Oracle Open World ApacheCon JavaOne JAX, WJAX

Oracle Corporation

Apache Software Foundation

ASF Member

Committer and PMC @Apache MyFaces

Committer and PMC @Apache Shale

Author

(German) Java- and Eclipse-Magazine

Books on Struts, J2ME & WebServices

Speaker

AjaxWorld

Oracle Open World

ApacheCon

JavaOne

JAX, WJAX

Agenda Introduction Comet / Server-Side Push Comet solutions Bayeux Generic JavaServer Faces comet.NEXT Discussion

Introduction

Comet / Server-Side Push

Comet solutions

Bayeux

Generic

JavaServer Faces

comet.NEXT

Discussion

Agenda Introduction Comet / Server-Side Push Comet solutions Bayeux Generic JavaServer Faces comet.NEXT Discussion

Introduction

Comet / Server-Side Push

Comet solutions

Bayeux

Generic

JavaServer Faces

comet.NEXT

Discussion

Why push ?

Introduction Polling annoying..., traffic on the server  chatty solution Push Don‘t call us, we call you ! Use Cases collaborative tooling sharing documents chat streaming data (  football/soccer, ...) trading systems (  auctions) live reporting monitoring (  server console) pushing async data into the client (  credit card verification)

Polling

annoying..., traffic on the server  chatty solution

Push

Don‘t call us, we call you !

Use Cases

collaborative tooling

sharing documents

chat

streaming data (  football/soccer, ...)

trading systems (  auctions)

live reporting

monitoring (  server console)

pushing async data into the client (  credit card verification)

collaborative tooling Push when you need it

Agenda Introduction Comet / Server-Side Push Comet solutions Bayeux Generic JavaServer Faces comet.NEXT Discussion

Introduction

Comet / Server-Side Push

Comet solutions

Bayeux

Generic

JavaServer Faces

comet.NEXT

Discussion

Comet / server side push

Comet / server side push polling VS long-polling VS streaming *  depends on the interval... **  fallback to long-polling - - ++ live connection some issues ** OK OK proxy servers + + + - * latency push long-poll polling

polling VS long-polling VS streaming

Comet – Some problems... Scalability Java NIO ... Container specific APIs Client side architecture How to integrate the pushed data ? pushed data callback: <script> _update_function(“ html_id “, JSONpayload); </script> client side framework

Scalability

Java NIO ...

Container specific APIs

Client side architecture

How to integrate the pushed data ?

pushed data callback:

<script> _update_function(“ html_id “, JSONpayload); </script>

client side framework

Comet – simpler integration

Agenda Introduction Comet / Server-Side Push Comet solutions Bayeux Generic JavaServer Faces comet.NEXT Discussion

Introduction

Comet / Server-Side Push

Comet solutions

Bayeux

Generic

JavaServer Faces

comet.NEXT

Discussion

Agenda Bayeux

Bayeux

Bayeux Bayeux Specification JSON-based protocol for transporting asynchronous msgs pub/sub  „JMS over http“ Client and Server APIs Client: connect (&quot;/context/servlet&quot;); subscribe (&quot;/someChannel&quot;, javaScriptCallback); Server: Channel channel = bayeux .getChannel(&quot;/someChannel“); Message msg = bayeux.newMessage(client); msg.put(„ city &quot;, &quot;New York City&quot;); msg.put(&quot; event &quot;, &quot;AjaxWorld 2009&quot;); channel.publish(message);

Bayeux Specification

JSON-based protocol for transporting asynchronous msgs

pub/sub  „JMS over http“

Client and Server APIs

Client:

connect (&quot;/context/servlet&quot;);

subscribe (&quot;/someChannel&quot;, javaScriptCallback);

Server:

Channel channel = bayeux .getChannel(&quot;/someChannel“);

Message msg = bayeux.newMessage(client);

msg.put(„ city &quot;, &quot;New York City&quot;);

msg.put(&quot; event &quot;, &quot;AjaxWorld 2009&quot;);

channel.publish(message);

Bayeux Bayeux Implementations Server: Jetty Tomcat (smaller and cleaner API) Glassfish / Grizzly Weblogic (HTTP Publish-Subscribe Server) Perl, Pyhton,... Client: dojo toolkit jQuery-based (two are there) Issues not a real Java standard (e.g. JSF / Servlet) different APIs for all implementations...

Bayeux Implementations

Server:

Jetty

Tomcat (smaller and cleaner API)

Glassfish / Grizzly

Weblogic (HTTP Publish-Subscribe Server) Perl, Pyhton,...

Client:

dojo toolkit

jQuery-based (two are there)

Issues

not a real Java standard (e.g. JSF / Servlet)

different APIs for all implementations...

Bayeux  DEMO  * Jetty  http://eclipse.org/jetty

 DEMO 

Bayeux with JSF ? Not yet there Steps for a possible JSF-Bayeux integration: pick a server-side API doing it again ? * pick a client-side API resue jQuery ? reuse dojo ? Avoid users from writing JavaScript Offer a (behavioral) tag: <mylib:bayeux channel=&quot;/someChannel&quot; callback=&quot; myCallbackJavaScriptFunction &quot; ... /> * Servlet 3.0 will help here...

Not yet there

Steps for a possible JSF-Bayeux integration:

pick a server-side API

doing it again ? *

pick a client-side API

resue jQuery ?

reuse dojo ?

Avoid users from writing JavaScript

Offer a (behavioral) tag:

<mylib:bayeux channel=&quot;/someChannel&quot; callback=&quot; myCallbackJavaScriptFunction &quot;

... />

Agenda Generic solution

Generic solution

Atmosphere An Ajax Push (Comet) Framework „ Comet for the masses“ Solves the problem of different container APIs Servlet 3.0 will help, but ... Atmosphere provides a generic API for different containers No need to port your application to a specific server Runs on any Servlet 2.5 container (  Apache Tomcat 6) Uses Java 5 @nnotations Supports REST (JSR 311) Jersey implementation Open Source Framework (CDDL)

An Ajax Push (Comet) Framework

„ Comet for the masses“

Solves the problem of different container APIs

Servlet 3.0 will help, but ...

Atmosphere provides a generic API for different containers

No need to port your application to a specific server

Runs on any Servlet 2.5 container (  Apache Tomcat 6)

Uses Java 5 @nnotations

Supports REST (JSR 311)

Jersey implementation

Open Source Framework (CDDL)

Atmosphere * URL  https://atmosphere.dev.java.net/  DEMO 

Agenda JavaServer Faces

JavaServer Faces

JavaServer Faces What is it really ? Lightweight and extensible Web-Framework POJO, replace the bits (navigation, view-technology,...) API for UI Component Development Several 3rd party component suites available Goals Make Java-Web-Development simple Tooling (JDeveloper, Netbeans, Eclipse, ...) Implementations Mojarra  RI, hosted on java.net Apache MyFaces Caucho Resin OperaMasks.org

Lightweight and extensible Web-Framework

POJO, replace the bits (navigation, view-technology,...)

API for UI Component Development

Several 3rd party component suites available

Goals

Make Java-Web-Development simple

Tooling (JDeveloper, Netbeans, Eclipse, ...)

Implementations

Mojarra  RI, hosted on java.net

Apache MyFaces

Caucho Resin

OperaMasks.org

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

JavaServer Faces and Comet Integration into JSF... Polling: JSF lifecycle Push and long-polling: extra „channel“ for comet client architecture ... „ client side rendering“

Integration into JSF...

Polling:

JSF lifecycle

Push and long-polling:

extra „channel“ for comet

client architecture ...

„ client side rendering“

JavaServer Faces and Comet

Comet solutions for JSF Good news! There are some JSF/Comet solutions already today! more to come ? IceSoft  IceFaces Oracle  ADF Faces Rich Client

Good news!

There are some JSF/Comet solutions already today!

more to come ?

IceSoft  IceFaces

Oracle  ADF Faces Rich Client

IceFaces  reverse ajax Rich JSF and Web 2.0 component suite „ RIA toolkit“ 50+ widgets Support for iPhone, etc. OpenSource CSS Themes and more Push / Poll model Glassfish / Grizzly SessionRenderer SessionRenderer.render(...) SessionRenderer.addCurrentSession(...)

Rich JSF and Web 2.0 component suite

„ RIA toolkit“

50+ widgets

Support for iPhone, etc.

OpenSource

CSS Themes

and more

Push / Poll model

Glassfish / Grizzly

SessionRenderer

SessionRenderer.render(...)

SessionRenderer.addCurrentSession(...)

ADF Faces ADF Faces Rich Client Rich Widgets, Web 2.0 components more than 90 JSF components No InputSuggest ... more than 30 helpers printable view, validators, excel export, ... Ajax Ajax integration, API for server AND client Requirements JavaServer Faces 1.2 Apache MyFaces Trinidad 1.2.x

ADF Faces Rich Client

Rich Widgets, Web 2.0 components

more than 90 JSF components

No InputSuggest ...

more than 30 helpers

printable view, validators, excel export, ...

Ajax

Ajax integration, API for server AND client

Requirements

JavaServer Faces 1.2

Apache MyFaces Trinidad 1.2.x

RIA – Rich Internet Applications http://tinyurl.com/adf-faces-live

http://tinyurl.com/adf-faces-live

ADF Faces ADF Faces Rich Client Rich Widgets, Web 2.0 components more than 90 JSF components No (yet) InputSuggest ... more than 30 helpers printable view, validators, excel export, ... Ajax Ajax integration, API for server AND client Requirements JavaServer Faces 1.2_x Apache MyFaces Trinidad 1.2.x

ADF Faces Rich Client

Rich Widgets, Web 2.0 components

more than 90 JSF components

No (yet) InputSuggest ...

more than 30 helpers

printable view, validators, excel export, ...

Ajax

Ajax integration, API for server AND client

Requirements

JavaServer Faces 1.2_x

Apache MyFaces Trinidad 1.2.x

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

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

ADF Faces – server-side Push Doing „comet“ is hard JavaScript guy... Server-side guy... Tomcat vs. Jetty vs. WLS vs. Glashfish vs. WhatNot Active Data Support is integrated into ADF important interface(s): ActiveDataModel ActiveDataListener custom implementation possible ... based on JSF‘s declarative model no special handling in the view

Doing „comet“ is hard

JavaScript guy...

Server-side guy...

Tomcat vs. Jetty vs. WLS vs. Glashfish vs. WhatNot

Active Data Support is integrated into ADF

important interface(s):

ActiveDataModel

ActiveDataListener

custom implementation possible ...

based on JSF‘s declarative model

no special handling in the view

ADF Faces – server-side Push  DEMO 

Agenda Introduction Comet / Server-Side Push Comet solutions Bayeux Generic JavaServer Faces comet.NEXT Discussion

Introduction

Comet / Server-Side Push

Comet solutions

Bayeux

Generic

JavaServer Faces

comet.NEXT

Discussion

comet.NEXT – Servlet 3.0 Part of Java EE 6 ready in September 2009 ??? ServletRequest interface startAsync() : AsyncContext startAsync(request, response) : AsyncContext isAsyncSupported() : boolean AsyncListener interface onComplete(asyncEvent) : void onTimeout(asyncEvent) : void

Part of Java EE 6

ready in September 2009 ???

ServletRequest interface

startAsync() : AsyncContext

startAsync(request, response) : AsyncContext

isAsyncSupported() : boolean

AsyncListener interface

onComplete(asyncEvent) : void

onTimeout(asyncEvent) : void

comet.NEXT – Servlet 3.0 Async example: service(Request req, Response res) { AsyncContext actx = req.startAsync(); Runnable runnable = new Runnable() { public void run() { Message m = jmsTemplate.receive(); res.write(m); req.complete(); } }; executor.submit(runnable); } Defensive programming: request.isAsyncSupported(); request.isAsyncStarted(); request.getAsyncContext();

Async example:

service(Request req, Response res) {

AsyncContext actx = req.startAsync();

Runnable runnable = new Runnable() {

public void run() {

Message m = jmsTemplate.receive();

res.write(m);

req.complete();

}

};

executor.submit(runnable);

}

comet.NEXT – HTML 5 WebSockets var socket = new WebSocket(&quot;ws://myserver.com&quot;); socket.onopen = function(evt) {...}; socket.onmessage = function(evt) { alert( &quot;Received Message: &quot; + evt.data); }; socket.onclose = function(evt) {...}; Usage socket.postMsg(„Hallo Server“); socket.disconnect();

WebSockets

var socket = new WebSocket(&quot;ws://myserver.com&quot;);

socket.onopen = function(evt) {...};

socket.onmessage = function(evt) { alert( &quot;Received Message: &quot; + evt.data);

};

socket.onclose = function(evt) {...};

Usage

socket.postMsg(„Hallo Server“);

socket.disconnect();

comet.NEXT – HTML 5 Server-Send-Events standardizes the format of (continuous) data stream native in the browser; cross-browser ... new HTML element „eventsource“: <eventsource src=&quot;http://my.server.com&quot; onmessage=&quot;alert(event.data)&quot; /> Data property, contains JSON: data: {'conference' : {'city': 'New York', 'event': 'AjaxWorld 2009'}, 'id' : '12345679' }

Server-Send-Events

standardizes the format of (continuous) data stream

native in the browser; cross-browser ...

new HTML element „eventsource“:

<eventsource src=&quot;http://my.server.com&quot; onmessage=&quot;alert(event.data)&quot; />

Data property, contains JSON:

data: {'conference' : {'city': 'New York', 'event': 'AjaxWorld 2009'}, 'id' : '12345679' }

comet.NEXT – HTML 5 Today Lift Framework Kaazing Gateway Opera / Safari 4* / WebKit / Firefox Minefield * Firefox-Plugin Future IE 11  UPDATE -> 2009/03/28 Shrinking of HTML5 spec: http://annevankesteren.nl/2009/03/more-shrinking-html5 * https://bugzilla.mozilla.org/show_bug.cgi?id=472529

Today

Lift Framework

Kaazing Gateway

Opera / Safari 4* / WebKit / Firefox Minefield *

Firefox-Plugin

Future

IE 11 

UPDATE -> 2009/03/28

Shrinking of HTML5 spec:

http://annevankesteren.nl/2009/03/more-shrinking-html5

Agenda Introduction Comet / Server-Side Push Comet solutions Bayeux Generic JavaServer Faces comet.NEXT Discussion

Introduction

Comet / Server-Side Push

Comet solutions

Bayeux

Generic

JavaServer Faces

comet.NEXT

Discussion

Discussion Where are we today ? Web 2.0 Applications  RIA more application, than WEB Adding „Hacks“  Comet Improving the UI experience Simulating FAT clients The browser == Application Platform

Where are we today ?

Web 2.0 Applications  RIA

more application, than WEB

Adding „Hacks“  Comet

Improving the UI experience

Simulating FAT clients

The browser == Application Platform

Questions and (maybe) answers

and (maybe) answers

Links and Resources ADF http://www.oracle.com/technology/products/adf/adffaces/index.html http://tinyurl.com/adf-faces-live Bayeux / Cometd http://cometdproject.dojotoolkit.org/ Blog HTML 5 WebSockets http://dev.w3.org/html5/spec/Overview.html#comms Slides: http://www.slideshare.net/mwessendorf

ADF

http://www.oracle.com/technology/products/adf/adffaces/index.html

http://tinyurl.com/adf-faces-live

Bayeux / Cometd

http://cometdproject.dojotoolkit.org/

Blog

HTML 5 WebSockets

http://dev.w3.org/html5/spec/Overview.html#comms

Slides:

http://www.slideshare.net/mwessendorf

Thank you! [email_address] BLOG: matthiaswessendorf.wordpress.com