Upload
mwessendorf
View
8.032
Download
1
Embed Size (px)
Citation preview
WebSocket meets JSF 2.0
Matthias Weßendorf - Oracle
Matthias Weßendorf• Oracle
• Apache Software Foundation– Member
– PMC Chair (Apache MyFaces)
• Speaker
• Author
• matthiaswessendorf.wordpress.com
• @mwessendorf
Agenda• Real Time (Web)
– Introduction– Why not Bayeux
• JavaServer Faces 2.0– Highlights
• WebSocket– Client API– (Java) Server APIs
• Mixing JSF and WebSocket– Concepts and Demos
Agenda• Real Time (Web)
– Introduction– Why not Bayeux
• JavaServer Faces 2.0– Highlights
• WebSocket– Client API– (Java) Server APIs
• Mixing JSF and WebSocket– Concepts and Demos
Real Time (Web)
Real Time (Web)• collaborative tooling:
Push the data...!
Real Time (Web)• Every application has a hook...
– collaborative tooling • sharing documents• chat
– streaming data ( football/soccer, ...)
– trading systems ( auctions)
– live reporting
– monitoring ( server console)
– What is YOUR use-case ?
What the Bayeux ???• Not a real internet standard (IETF / W3C)
• Some (Java) Servers:
– Jetty
– Tomcat
– Glassfish / Grizzly
– Weblogic (HTTP Publish-Subscribe Server)
• JavaScript Client libraries:
– Dojo
– jQuery
• Issues
– No unified API (like via JCP)
– ALL impls have different APIs (packages,...)
Agenda• Real Time (Web)
– Introduction– Why not Bayeux
• JavaServer Faces 2.0– Highlights
• WebSocket– Client API– (Java) Server APIs
• Mixing JSF and WebSocket– Concepts and Demos
JSF 2.0 – Special Feature• What's new ?
– Ajax integration
– Facelets is the Default VIEW
– Bookmarkable Pages(View Params)
– Partial State Saving
– ProjectStage (like Wicket / Rails)
– ExceptionHandler
– ...
ProjectStage
JSF 2.0 – Special Feature• What's better ?
• Facelets is KING !!!
– Templating
– Composite components
• Improved scoping
– Flash
– ViewScope
– „MyCustomScope“
• XML-less
JSF 2.0 – Special Feature• less is more...
• @nnotations for managed beans
– javax.faces.beans.*
– (optional API)
• Simple navigation (w/o XML)
– <h:command(Link|Button) />
– New <h:button/>, <h:link />
• More @nnotations for less XML
– @FacesComponent, etc
JSF 2.0 – Special Feature
Pro Tip on JSF2 ...
• Do NOT use the @nnotations from:
– javax.faces.beans.*
• Go with JSR-299/330
– @Named(„fooBean“)
– @RequestScoped
• Even works with Spring...
http://github.com/matzew/spring-cdi-bridge
Agenda• Real Time (Web)
– Introduction– Why not Bayeux
• JavaServer Faces 2.0– Highlights
• WebSocket– Client API– (Java) Server APIs
• Mixing JSF and WebSocket– Concepts and Demos
WebSocket...
... is a bi-directional AND full-duplex communication STANDARD
for next-generation web applications
(„TCP for the web“)
… and HTML5 APIs
WebSocket Standard
• Client API (WC3)– (simple) JavaScript API
• Network Protocol (ITEF)– Still under development...:– draft-hixie-thewebsocketprotocol-75
– ...
– draft-ietf-hybi-thewebsocketprotocol-03
– http://blog.chromium.org/2010/06/websocket-protocol-updated.html
WebSocket ProtocolGET / HTTP/1.1.
Upgrade: WebSocket.
Connection: Upgrade.
Host: echo.websockets.org.
...
HTTP/1.1 101 Web Socket Protocol Handshake.
Upgrade: WebSocket.
Connection: Upgrade.
SecWebSocketLocation: ws://echo.websockets.org/.
Server: Kaazing Gateway.
....
WebSocket vs COMET...
WebSocket Client APIws = new WebSocket("ws://echo.websockets.org:80");
ws.onmessage = function(event)
{
doSomeFancyDhtml(event.data);
};
ws.onopen = function(event)
{...};
ws.onclose = function(event)
{...};
ws.onerror = function(event)
{...};
ws.send('Howdy, Partner!');
ws.close();
WebSocket - Support• Browser:
– Firefox 4 (in beta status)
– Chrome / Chromium
– (mobile) Safari
– Opera
• Server
– Node.js
– Kaazing Gateway
– Jetty 7 and 8
– Glassfish 3.1
– Resin
– ...
WebSocket – Jetty
public class JettyWebSocketServlet extends WebSocketServlet
{
private final Set<WebSocket> clients = ... new CopyOnWriteArraySet();
protected WebSocket doWebSocketConnect(HttpServletRequest request, String protocol)
{
return new MyWebSocket();
}
...
}
WebSocket – Resinpublic class ResinWebSocketServlet extends GenericServlet
{public void service(ServletRequest req, ServletResponse res)
throws IOException, ServletException
{
WebSocketServletRequest wsReq = (WebSocketServletRequest) req;
WebSocketListener handler = new CustomHandler();
wsReq.startWebSocket(handler);
}
}
WebSocket – Glassfish 3.1import java.io.IOException;
import com.sun.grizzly.websockets.*;
public class EchoWebSocketApp extends WebSocketApplication
{
public void onMessage(WebSocket socket, DataFrame data) throws IOException
{
socket.send(data.getTextPayload());
}
}
WebSocket – Glassfish 3.1public class BackEndWrapper extends WebSocketApplication
{
@Inject Service myService;
public void onMessage(WebSocket socket, DataFrame data) throws IOException
{
ServiceWebSocket sws = (ServiceWebSocket) socket;
myService.doInvokeTheBackend(sws.getFooBar());
....
}
...
}
WebSocket – Java EE
WebSocket Supportin
JavaEE 7 ?
Agenda• Real Time (Web)
– Introduction– Why not Bayeux
• JavaServer Faces 2.0– Highlights
• WebSocket– Client API– (Java) Server APIs
• Mixing JSF and WebSocket– Concepts and Demos
WebSocket meets JSF• JSF integration points:
– Streaming data to the client
• JSF Components– existing ones– custom ones
– Communication from the browser:
• JSF actions 'talk' to (active) system– „Invoke Application“ Phase
JSF's Action methods• Set up the WebSocket connection:
– global (framework level)
– Custom tag (page level)
• Use JSF lifecycle to issue regular HTTP POST
– 'invoke application interaction'• do regular work• Notify the WS 'channel'
• Client-Side callback gets the server-side payload
WebSocket „components“• Write WebSocket aware components:
– Let the component set up the connection
– leverage WS's onmessage() callback
– Make custom JSF/WS models
• What to do with existing components/pages?
– 1) remove the „refresh“ button :-)
– 2) let the framework notify the 'channel'
– 3) use JSF's Ajax API to rerender the comp.
Thoughts...• Client's send() is outside of HTTP
• current systems are HTTP based:
– JAX-RS
– JavaServer Faces
– Apache Wicket, etc
• Atmosphere Framework works with all of them, but
• what about something like this ?
<h:commandButton value=“Send stuff“ action=“#{bean.doStuff}“>
<f:ajax .... />
</h:commandButton>
Thank you!
@mwessendorf
BLOG:matthiaswessendorf.wordpress.com