Your SlideShare is downloading. ×
0
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
WebSocketAndJSF
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WebSocketAndJSF

4,328

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 …

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
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,328
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.  
  • 2. WebSocket meets JSF 2.0 Matthias Weßendorf – Kaazing
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 10. Drop the built-in latency! <ul><li>Collaborative Tooling: </li></ul>Push the data...!
  • 11. Think different ...
  • 12. Think different!
  • 13. Challenge... “ If we were not restricted by the traditional limitations of HTTP, what type of Web applications would we build?”
  • 14. Agenda <ul><li>Enter HTML5 WebSocket! </li></ul>
  • 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>
  • 16. … and HTML5 APIs Build the future!
  • 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>
  • 18. DEMO – HTML5 mix: Canvas and WebSocket <ul><li>Cloud Server Monitor </li></ul>
  • 19. HTTP is Half Duplex
  • 20. Half Duplex Communication is Primitive
  • 21. Question for the Audience! <ul><li>What are some common names for Ajax Polling implementation? </li></ul>
  • 22. HTTP Header Overhead
  • 23. &nbsp;
  • 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>
  • 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>
  • 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>
  • 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 &gt;4GB of data)… </li></ul>
  • 28. WebSocket Traffic 0x00Hello, WebSocket0xff Less  Overhead... A lot less!!!
  • 29. WebSocket Client API // Create new WebSocket var mySocket = new WebSocket(&amp;quot;ws://echo.websockets.org&amp;quot;); // Attach listeners mySocket.onmessage = function(evt) {      doSomeFancyDhtml(evt.data); }; mySocket.onopen = function(evt) { ... }; mySocket.onclose = function(evt) { ... }; mySocket.onerror = function(evt) { ... }; JavaScript
  • 30. WebSocket Client API // Send data… mySocket.send(”HTML5 WebSocket rocks! &amp;quot;); // Close WebSocket mySocket.close(); JavaScript
  • 31. DEMO <ul><li>UDP broadcaster meets WebSocket! </li></ul>
  • 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 &amp; 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>
  • 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>
  • 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>
  • 35. Beyond WebSocket: Using Stomp/JMS API … var stompConnectionFactory = new StompConnectionFactory( &amp;quot;ws://localhost:8000/jms&amp;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(&amp;quot;/topic/destination&amp;quot;); // creating some consumers! var consumer1 = session.createConsumer(topic); consumer1.setMessageListener( handleMessageCallback ); connection.start(someCallback); } .... }); JavaScript
  • 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
  • 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>
  • 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>
  • 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>
  • 40. DEMO <ul><li>DEMO: JSF component </li></ul><ul><ul><ul><ul><li>JSF and JMS, via WebSocket </li></ul></ul></ul></ul>
  • 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>
  • 42. DEMO <ul><li>Communication to a WebSocket server </li></ul>
  • 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>
  • 44. <ul><li>THANK YOU! </li></ul>
  • 45. &nbsp;

×