Published on

To enable Sever-Side-Push in Web-Applications a lot of hacks (aka Comet/Bayeux) have been done in the past. The WebSocket spec fixes that by introducing a bi-directional and full duplex communication channel over a single TCP connection. This session gives an overview of the WebSocket API and shows the practical use with JSF to create powerful and future-proof Web-Applications.

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 2. WebSocket meets JSF 2.0 Matthias Weßendorf – Kaazing
  2. 3. Matthias Weßendorf <ul><li>Kaazing Corporation (http://kaazing.com) </li></ul><ul><ul><li>Kaazing WebSocket Gateway </li></ul></ul><ul><li>Apache Software Foundation </li></ul><ul><ul><li>Member </li></ul></ul><ul><ul><li>Apache MyFaces </li></ul></ul><ul><li>Speaker, Author, Blogger: </li></ul><ul><ul><li>http://matthiaswessendorf.wordpress.com/ </li></ul></ul><ul><li>Twitter: @mwessendorf </li></ul>
  3. 4. Agenda <ul><li>JavaServer Faces 2.0 </li></ul><ul><ul><li>Highlights </li></ul></ul><ul><li>Real Time (Web) </li></ul><ul><ul><li>Introduction </li></ul></ul><ul><li>WebSocket </li></ul><ul><ul><li>Introduction </li></ul></ul><ul><ul><li>Handshake and Client API </li></ul></ul><ul><li>Remix: JSF meets WebSocket </li></ul><ul><ul><li>Conecpts and Demo(s) </li></ul></ul>
  4. 5. Agenda <ul><li>JavaServer Faces 2.0 </li></ul><ul><ul><li>Highlights </li></ul></ul><ul><li>Real Time (Web) </li></ul><ul><ul><li>Introduction </li></ul></ul><ul><li>WebSocket </li></ul><ul><ul><li>Introduction </li></ul></ul><ul><ul><li>Handshake and Client API </li></ul></ul><ul><li>Remix: JSF meets WebSocket </li></ul><ul><ul><li>Conecpts and Demo(s) </li></ul></ul>
  5. 6. JSF 2.0 – Special Feature <ul><li>What’s new? </li></ul><ul><ul><li>Ajax integration </li></ul></ul><ul><ul><ul><li>JS API (only POST, see issue SPEC 907) </li></ul></ul></ul><ul><ul><li>Facelets is the Default VIEW </li></ul></ul><ul><ul><li>Bookmarkable Pages (View Params) </li></ul></ul><ul><ul><li>Partial State Saving </li></ul></ul><ul><ul><li>ProjectStage (like Wicket / Rails) </li></ul></ul><ul><ul><li>ExceptionHandler </li></ul></ul><ul><ul><li>... </li></ul></ul>
  6. 7. JSF 2.0 – Special Feature <ul><li>Big improvements </li></ul><ul><li>Important: </li></ul><ul><ul><li>Facelets is KING! </li></ul></ul><ul><ul><ul><li>Nice templating! </li></ul></ul></ul><ul><ul><ul><li>Simple Components </li></ul></ul></ul>
  7. 8. Agenda <ul><li>JavaServer Faces 2.0 </li></ul><ul><ul><li>Highlights </li></ul></ul><ul><li>Real Time (Web) </li></ul><ul><ul><li>Introduction </li></ul></ul><ul><li>WebSocket </li></ul><ul><ul><li>Introduction </li></ul></ul><ul><ul><li>Handshake and Client API </li></ul></ul><ul><li>Remix: JSF meets WebSocket </li></ul><ul><ul><li>Conecpts and Demo(s) </li></ul></ul>
  8. 9. Real Time (Web) <ul><li>Every application has a hook… </li></ul><ul><ul><li>Collaborative tooling </li></ul></ul><ul><ul><ul><li>share/edit documents </li></ul></ul></ul><ul><ul><ul><li>chatting </li></ul></ul></ul><ul><ul><li>Streaming data (  football/sports) </li></ul></ul><ul><ul><li>Trading Systems (  auctions) </li></ul></ul><ul><ul><li>Financial apps (  market data) </li></ul></ul><ul><ul><li>Social Network apps </li></ul></ul><ul><ul><li>Monitoring (  server console) </li></ul></ul><ul><ul><li>What is your use-case? </li></ul></ul>
  9. 10. Drop the built-in latency! <ul><li>Collaborative Tooling: </li></ul>Push the data...!
  10. 11. Think different ...
  11. 12. Think different!
  12. 13. Challenge... “ If we were not restricted by the traditional limitations of HTTP, what type of Web applications would we build?”
  13. 14. Agenda <ul><li>Enter HTML5 WebSocket! </li></ul>
  14. 15. WebSocket … <ul><li>... is a bi-directional AND full-duplex communication STANDARD for next-generation web applications </li></ul><ul><li>(„TCP for the web“) </li></ul>
  15. 16. … and HTML5 APIs Build the future!
  16. 17. WebSocket is full-duplex! <ul><li>Enables web pages to communicate (in full-duplex mode) with a remote host </li></ul><ul><li>Traverses firewalls, proxies, and routers seamlessly </li></ul><ul><li>Leverages Cross-Origin Resource Sharing (CORS) </li></ul><ul><li>Shares port with existing HTTP content (80, 443) </li></ul><ul><li>Extend any TCP/UDP based protocol!!! </li></ul><ul><ul><li>AMQP </li></ul></ul><ul><ul><li>XMPP/STOMP/JMS </li></ul></ul><ul><ul><li>VNC </li></ul></ul><ul><ul><li>… . </li></ul></ul>
  17. 18. DEMO – HTML5 mix: Canvas and WebSocket <ul><li>Cloud Server Monitor </li></ul>
  18. 19. HTTP is Half Duplex
  19. 20. Half Duplex Communication is Primitive
  20. 21. Question for the Audience! <ul><li>What are some common names for Ajax Polling implementation? </li></ul>
  21. 22. HTTP Header Overhead
  22. 24. Enter WebSocket! <ul><li>From Complexity... </li></ul><ul><li>(Spell it with the letters C, O, M, E, T!) </li></ul><ul><li>… to simplicity! </li></ul>
  23. 25. WebSocket Standard <ul><li>Client API (WC3) </li></ul><ul><ul><li>(simple) JavaScript API </li></ul></ul><ul><li>Network Protocol (ITEF) </li></ul><ul><ul><li>Under development </li></ul></ul><ul><ul><ul><li>draft-hixie-thewebsocketprotocol-75 </li></ul></ul></ul><ul><ul><ul><li>... </li></ul></ul></ul><ul><ul><ul><li>draft-ietf-hybi-thewebsocketprotocol-06 * </li></ul></ul></ul>
  24. 26. WebSocket Protocol / Handshake <ul><li>GET /chat HTTP/1.1 </li></ul><ul><li>Host: server.example.com </li></ul><ul><li>Upgrade: websocket </li></ul><ul><li>Connection: Upgrade </li></ul><ul><li>Sec- WebSocket -Key: dGhlIHNhbXBsZSBub25jZQ== </li></ul><ul><li>Sec- WebSocket -Origin: http://example.com </li></ul><ul><li>Sec- WebSocket -Protocol: chat, superchat </li></ul><ul><li>Sec- WebSocket -Version: 6 </li></ul><ul><li>HTTP/1.1 101 Switching Protocols </li></ul><ul><li>Upgrade: websocket </li></ul><ul><li>Connection: Upgrade </li></ul><ul><li>Sec- WebSocket -Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= </li></ul><ul><li>Sec- WebSocket -Protocol: chat </li></ul>
  25. 27. WebSocket Traffic <ul><li>Connection established by upgrading from the HTTP protocol to the WebSocket protocol using the same TCP connection </li></ul><ul><ul><li>Once upgraded, WebSocket data frames can be sent back and forth between the client and the server in full-duplex mode </li></ul></ul><ul><ul><li>Frames can be sent full-duplex, in both directions at the same time </li></ul></ul><ul><li>Each frame of data: </li></ul><ul><ul><li>Starts with a 0x00 byte and ends with a 0xFF byte </li></ul></ul><ul><ul><li>Contains UTF-8 data in between: 0x00Hello, WebSocket0xff </li></ul></ul><ul><li>There is no defined maximum size, but JavaScript  does not allow >4GB of data)… </li></ul>
  26. 28. WebSocket Traffic 0x00Hello, WebSocket0xff Less  Overhead... A lot less!!!
  27. 29. WebSocket Client API // Create new WebSocket var mySocket = new WebSocket(&quot;ws://echo.websockets.org&quot;); // Attach listeners mySocket.onmessage = function(evt) {      doSomeFancyDhtml(evt.data); }; mySocket.onopen = function(evt) { ... }; mySocket.onclose = function(evt) { ... }; mySocket.onerror = function(evt) { ... }; JavaScript
  28. 30. WebSocket Client API // Send data… mySocket.send(”HTML5 WebSocket rocks! &quot;); // Close WebSocket mySocket.close(); JavaScript
  29. 31. DEMO <ul><li>UDP broadcaster meets WebSocket! </li></ul>
  30. 32. WebSocket Support <ul><li>Browsers: </li></ul><ul><ul><li>Firefox 4 (will be enabled in FF5) </li></ul></ul><ul><ul><li>Chrome/Chromium </li></ul></ul><ul><ul><li>Opera 11 </li></ul></ul><ul><ul><li>Safari 5 & iOS 4 </li></ul></ul><ul><ul><li>IE (there is a plugin) </li></ul></ul><ul><li>To test support visit: http://websocket.org </li></ul><ul><li>Servers: </li></ul><ul><ul><li>Kaazing WebSocket Gateway </li></ul></ul><ul><ul><li>Node.js </li></ul></ul><ul><ul><li>Jetty 7 and 8 </li></ul></ul><ul><ul><li>Resin </li></ul></ul><ul><ul><li>Glassfish 3.1 </li></ul></ul>
  31. 33. WebSocket Misconception <ul><li>It is NOT just a better Ajax or XHR, nor was it designed to be! </li></ul><ul><li>WebSocket was NOT designed to be a one-size-fits-all replacement for HTTP! </li></ul>
  32. 34. WebSocket Misconception <ul><li>When you build Desktop applications (client server solutions) do you develop your application using raw TCP sockets? </li></ul><ul><li>Or, are you using higher level protocols and APIs, such as XMPP, JMS, JDBC? </li></ul>
  33. 35. Beyond WebSocket: Using Stomp/JMS API … var stompConnectionFactory = new StompConnectionFactory( &quot;ws://localhost:8000/jms&quot;); var connectionFuture = stompConnectionFactory.createConnection(function () { if (!connectionFuture.exception) { connection = connectionFuture.getValue(); connection.setExceptionListener(handleException); session = connection.createSession(false, Session.AUTO_ACKNOWLEDGE); topic = session.createTopic(&quot;/topic/destination&quot;); // creating some consumers! var consumer1 = session.createConsumer(topic); consumer1.setMessageListener( handleMessageCallback ); connection.start(someCallback); } .... }); JavaScript
  34. 36. Beyond WebSocket: Using Stomp/JMS API function handleMessageCallack(message) { // did Apache ActiveMQ send us a JMS TextMessage? if (message instanceof TextMessage) { var body = message.getText(); // do more stuff…. } } JavaScript
  35. 37. Agenda <ul><li>JavaServer Faces 2.0 </li></ul><ul><ul><li>Highlights </li></ul></ul><ul><li>Real Time (Web) </li></ul><ul><ul><li>Introduction </li></ul></ul><ul><li>WebSocket </li></ul><ul><ul><li>Introduction </li></ul></ul><ul><ul><li>Handshake and Client API </li></ul></ul><ul><li>Remix: JSF meets WebSocket </li></ul><ul><ul><li>Conecpts and Demo(s) </li></ul></ul>
  36. 38. WebSocket meets JSF <ul><li>Integration points: </li></ul><ul><ul><li>Streaming data to the browser </li></ul></ul><ul><ul><ul><li>JSF components </li></ul></ul></ul><ul><ul><ul><ul><li>Existing components (wrapper) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Custom components </li></ul></ul></ul></ul><ul><ul><li>Communication from the browser: </li></ul></ul><ul><ul><ul><li>JSF components (custom/wrapper) </li></ul></ul></ul><ul><ul><ul><li>JSF action method talks to “active” System </li></ul></ul></ul>
  37. 39. WebSocket “components” <ul><li>Setup the WebSocket connection: </li></ul><ul><ul><li>global, per application (in master template) </li></ul></ul><ul><ul><li>integration on page-level (custom helper tag) </li></ul></ul><ul><li>Write new/custom WebSocket aware components </li></ul><ul><ul><li>Component can setup the connection… </li></ul></ul><ul><ul><li>Leverage the onmessage() callback (DHTML coding!) </li></ul></ul><ul><li>What to do with existing “active” components/page-sections? </li></ul><ul><ul><li>Remove the odd “refresh page” button!  </li></ul></ul><ul><ul><li>Wrap them into a new Facelet component: </li></ul></ul><ul><ul><ul><li>Inject the payload manually </li></ul></ul></ul><ul><ul><ul><li>Use JSF’s AJAX API to (re)render the component(s) </li></ul></ul></ul>
  38. 40. DEMO <ul><li>DEMO: JSF component </li></ul><ul><ul><ul><ul><li>JSF and JMS, via WebSocket </li></ul></ul></ul></ul>
  39. 41. Communication from the Browser <ul><li>JSF component </li></ul><ul><ul><li>JavaScript wrapper that “talks” to the WebSocket server </li></ul></ul><ul><ul><li>(bypasses the FacesServlet…) </li></ul></ul><ul><li>Action Method updates an “active” system </li></ul><ul><ul><li>(Regular/JSF) HTTP POST (invoke application phase) </li></ul></ul><ul><ul><ul><li>Does the “regular” work - and notifies an active system… </li></ul></ul></ul><ul><ul><ul><li>Client-Side Callback (onmessage()) can use this “update” information </li></ul></ul></ul><ul><li>Not so nice… </li></ul>
  40. 42. DEMO <ul><li>Communication to a WebSocket server </li></ul>
  41. 43. Thoughts….. <ul><li>Client’s WebSocket.send() is outside of HTTP! </li></ul><ul><li>Current (Java EE) systems are HTTP based: </li></ul><ul><ul><li>JAX-RS </li></ul></ul><ul><ul><li>JavaServer Faces </li></ul></ul><ul><ul><li>Wicket/Struts etc. </li></ul></ul><ul><li>Some frameworks integrate with most of them…. BUT! they don’t invoke methods from the ws.send()! </li></ul><ul><li>They could – but would (re)execute HTTP in the TCP endpoint… </li></ul>
  42. 44. <ul><li>THANK YOU! </li></ul>