Doing Server-Side Push with JSF

Doing Server-Side Push with JSF 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

Oracle Open World

ApacheCon

JavaOne

JAX, WJAX

Agenda

Introduction

Comet / Server-Side Push

ADF Faces - Overview

ADF Faces - Architecture

ADS  Active Data Service

comet.NEXT

Discussion

Agenda

Introduction

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)

collaborative tooling Push when you need it

Agenda

Introduction

comet.NEXT

Discussion

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

Integration into JSF...

Polling:

JSF lifecycle

Push and long-polling:

extra „channel“ for comet

client architecture ...

„ client side rendering“

Bayeux Specification

JSON-based protocol for transporting asynchronous msgs

pub/sub  „JMS over http“

Client and Server APIs

Client:

connect ("/context/servlet");

subscribe ("/buli/BVB", javaScriptCallback);

Server:

Channel channel = bayeux .getChannel("/buli/BVB“);

Message msg = bayeux.newMessage(client);

msg.put(" currentResult ", "BVB-Schalke 9:0");

msg.put(" player ", "Alexander Frei");

channel.publish(message);

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

Possible integration for JSF:

Server-side API  doing it again ?

Client-side API

resue jQuery ?

reuse dojo ?

Offer a (behavioral) tag:

<mylib:bayeux channel="/bvbticker" callback=" myCallbackJavaScriptFunction "

... />

Server-code needs to be done...

I am waiting for Servlet 3 

Comet solutions for JSF

IceSoft  IceFaces

Oracle  ADF Faces Rich Client

more later...

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(...)

Agenda

Introduction

comet.NEXT

Discussion

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 *

RIA – Rich Internet Applications

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

 DEMO 

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

Agenda

Introduction

comet.NEXT

Discussion

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="Label 2"> <af:inputText autoTab="true" simple="true" id="id1" maximumLength="3" columns="3" label="first"/> <af:inputText autoTab="true" simple="true" id="id2" maximumLength="3" columns="3" label="second"/> <af:inputText autoTab="true" simple="true" id="id3" maximumLength="3" columns="3" label="third"/> </af:panelLabelAndMessage> <af:inputText id="idInputText" label="Label 1" value="#{myBean.value}"/> id1 id2 Id3

Agenda

Introduction

comet.NEXT

Discussion

ADS  Active Data Support

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

BAM

important interface(s):

ActiveDataModel

ActiveDataListener

custom implementation possible ...

based on JSF‘s declarative model

no special handling in the view

supports different servers

Weblogic: AdsServlet (extends AbstractAsyncServlet )

Optimized version, leverages: FutureResponseModel

@WLServlet annotation  no issues on other containers

Similar thing is part of Servlet 3.0

Non-Weblogic: AdsFilter

Basically decoration to wait() and notify()

does not scale, but works...

Servlet 3.0 will help here...

support for HA / failover

shared connection on the client

 DEMO 

Agenda

Introduction

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

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();

comet.NEXT – HTML 5

WebSockets

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

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

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

};

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

Usage

socket.postMsg(„Hallo Server“);

socket.disconnect();

Server-Send-Events

standardizes the format of (continuous) data stream

native in the browser; cross-browser ...

new HTML element „eventsource“:

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

Data property, contains JSON:

data: {'game' : {'currentResult': 'BVB – S04 9:0', 'player': 'Alexander Frei'}, 'id' : '12345432' }

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

Agenda

Introduction

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

Questions

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

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

Doing Server-Side Push with JSF

0 comments

Notes on slide 1

1 Favorite