WebSocketAndJSF

  • 4,014 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,014
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
4

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