Kaazing

6,159 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,159
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
97
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Kaazing

  1. 1. Comet Never More! (HTML 5 WebSockets in Theory and Practice) Jonas Jacobi & John R. Fallows Founders Kaazing www.devoxx.com
  2. 2. Speaker’s qualifications John and Jonas are founders of Kaazing, provider of the open sourcre HTML 5 Websocket gateway Both dudes are frequent writers for magazines such as JDJ, JavaMagazine, and AjaxWorld John and Jonas speak frequently at conferences World Wide on HTML 5 Communication Authors of Pro JSF and Ajax: Building Rich Internet Components 3 www.devoxx.com
  3. 3. Overall Presentation Goal Learn how to architect and build full-duplex Web applications using HTML 5 communication www.devoxx.com
  4. 4. If we were not restricted by the traditional limitations of HTTP, what type of Web applications would we build? www.devoxx.com
  5. 5. DEMO Web Networking Usecases for Work and Play www.devoxx.com
  6. 6. Agenda, or something … Part 1 – Comet and the Future Real-time Web Comet/Reverse Ajax HTML 5 Communication Break (30 minutes) Part 2 – Full-duplex Web Today Networking Review HTML 5 WebSockets Kaazing Gateway 7 www.devoxx.com
  7. 7. Defining Real-Time Web Web Applications Typically Not Real-Time www.devoxx.com
  8. 8. Defining Real-Time Web www.devoxx.com
  9. 9. Defining Real-Time Web Or, is it just nearly, nearly real-time? www.devoxx.com
  10. 10. Defining Real-Time Web Or, is it just nearly, nearly real-time? www.devoxx.com
  11. 11. Ajax (XHR) Updates Limited To Preset Interval Message buffering increases memory usage Near real-time updates achieved with shorter intervals Shorter Updates Cause Increased network traffic Higher frequency connection setup & teardown www.devoxx.com
  12. 12. Push Technology History Push technology has been around for a while: Pushlets (2002) Bang Networks (early adopter) Previous attempts failed, because: Scalability Limitations (Cost etc…) Not general purpose No standard www.devoxx.com
  13. 13. Push Technology Server-Initiated Message Delivery Clients are listening Clients behind firewalls Techniques such as Comet/Reverse Ajax Delays Completion of HTTP Response Generally Implemented in JS www.devoxx.com
  14. 14. Long Polling and Streaming Current Comet implementations center around two major areas: Long Polling Streaming www.devoxx.com
  15. 15. Long Polling Also known as asynchronous-polling Request open for a set period HTTP headers often account for more than half of the network traffic www.devoxx.com
  16. 16. Long Polling HTTP Request From client (browser) to server: GET /long-polling HTTP/1.1rn Host: www.kaazing.comrn User-Agent: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9) Gecko/2008061017 Firefox/3.0rn Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/ *;q=0.8rn Accept-Language: en-us,en;q=0.5rn Accept-Encoding: gzip,deflatern Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7rn Keep-Alive: 300rn Connection: keep-alivern Cache-Control: max-age=0rn rn www.devoxx.com
  17. 17. Long Polling HTTP Response From server to client (browser): Date: Tue, 16 Aug 2008 00:00:00 GMTrn Server: Apache/2.2.9 (Unix)rn Content-Type: text/plainrn Content-Length: 12rn rn Hello, world www.devoxx.com
  18. 18. HTTP Streaming Persistent HTTP Connection Pending POST Minimizes Latency Reduction in Network Traffic Optimizes Connection Setup & Tear-Down Keep-alive Security www.devoxx.com
  19. 19. Today’s Architecture Java EE Container RMI - JDBC - TCP (Full Duplex) TCP (Full Duplex) Database EJB Application Transport Logic IMAP - RMI TCP (Full Duplex) JavaMail IMAP Server Servlet JABBER - TCP (Full Duplex) IM Server HTTP Custom - Browser (Half Duplex) JMS - RMI TCP (Full Duplex) TCP (Full Duplex) JMS Stock Trading Client Stock JMS Trading Feed www.devoxx.com
  20. 20. What’s Missing? Not a standard No true bi-directional communication No guaranteed message delivery Complex middle-tier architecture Adds unnecessary latency www.devoxx.com
  21. 21. Evolving the Web Ajax Comet/Reverse Ajax WebSockets Server Server Server Connect Notify Notify Firewall Firewall Firewall Browser Browser Browser www.devoxx.com
  22. 22. HTML 5 Overview Next generation application platform Communication (sockets, cross-site) Graphics (2D) Drag ‘n’ drop Storage (transient, persistent) Offline Compatibility www.devoxx.com
  23. 23. HTML 5 WebSockets The Communication section: WebSockets Server-sent events Not New; TCPConnection API and protocol were initially drafted over two years ago www.devoxx.com
  24. 24. HTML 5 Server-Sent Events Standardizes and formalizes how a continuous stream of data can be sent from a server to a browser Introduces eventsource—a new DOM element www.devoxx.com
  25. 25. HTML 5 Server-Sent Events Connects to a server URL to receive an event stream: <eventsource src= quot;http:// stocks.kaazing.comquot; onmessage=quot;alert(event.data)quot;> www.devoxx.com
  26. 26. HTML 5 Server-Sent Events Server can add the ID header so that clients add a Last-Event-ID header Used to guarantee message delivery Server specify an optional retry header as part of an event in the event stream www.devoxx.com
  27. 27. HTML 5 WebSockets Defines full-duplex communications Operates over a single socket Traverses firewalls and routers seamlessly Allows authorized cross-domain communication Integrates with: Cookie-based authentication Existing HTTP load balancers www.devoxx.com
  28. 28. HTML 5 WebSockets Connection established by upgrading from the HTTP protocol to the WebSocket protocol WebSocket data frames can be sent back and forth between the client and the server in full-duplex mode www.devoxx.com
  29. 29. HTML 5 WebSockets Supports a diverse set of clients Cannot deliver raw binary data to JavaScript Binary data is ignored if the client is JavaScript Enables direct communication with backend systems www.devoxx.com
  30. 30. HTML 5 WebSockets Detects presence of proxy servers A tunnel is established by issuing an HTTP CONNECT statement Secure Web sockets over SSL can leverage the same HTTP CONNECT technique www.devoxx.com
  31. 31. Simplified Architecture RMI - Java EE JDBC - TCP (Full Duplex) TCP (Full Duplex) EJB RMI - TCP (Full Duplex) JMS Database WebSocket Server JDBC - TCP (Full Duplex) IMAP - TCP (Full Duplex) IMAP Server Jabber - TCP (Full Duplex) IM Server TCP over HTTP (Full Duplex) Browser Custom - TCP (Full Duplex) Stock Trading Feed www.devoxx.com
  32. 32. HTML 5 WebSockets Creating a WebSocket instance: var myWebSocket = new WebSocket (“ws://www.websocket.org”); www.devoxx.com
  33. 33. HTML 5 WebSockets Associating listeners: myWebSocket.onopen = function(evt) { alert(“Connection open ...”); }; myWebSocket.onmessage = function(evt) { alert( “Received Message: ” + evt.data); }; myWebSocket.onclose = function(evt) { alert(“Connection closed.”); }; www.devoxx.com
  34. 34. HTML 5 WebSockets Sending messages: myWebSocket.postMessage(“Hello WebSocket!”); myWebSocket.postMessage(“Goodbye Comet!”); myWebSocket.disconnect(); www.devoxx.com
  35. 35. HTML 5 WebSockets Enables full-duplex communication to any TCP-based back-end service: JMS Jabber Stomp etc… www.devoxx.com
  36. 36. Stomp Protocol Simple Text-Oriented Messaging Protocol (STOMP) Publish and Subscribe Transactional Acknowledgements ActiveMQ, RabbitMQ, … www.devoxx.com
  37. 37. Stomp Protocol var myStomp = new StompClient(); myStomp.onopen = function(headers) { myStomp.send(“Hello STOMP!”, “/topic/ destination”); } myStomp.onmessage = function(headers, body) { alert(body); } myStomp.connect(“ws://www.websocket.org/stomp”); myStomp.subscribe(destination.value); www.devoxx.com
  38. 38. DEMO XMPP client www.devoxx.com
  39. 39. HTML 5 – When?? 2022 AD (Not really) Opera already has Server Sent Events Mozilla/Firefox patch available – Bug 338583 Kaazing.org provides this NOW!!! IE 5.5+, Firefox 1.5+, Chrome 0.2+, Safari 3.1+, Opera 9.0+ 39 www.devoxx.com
  40. 40. Summary Server-Sent Events standardize and formalize Comet/ Reverse Ajax WebSockets provides full-duplex communication Do I have to wait till 2022 AD? 40 www.devoxx.com
  41. 41. www.devoxx.com
  42. 42. Comet Never More! (HTML 5 WebSockets in Theory and Practice) John R. Fallows & Jonas Jacobi Founders Kaazing www.devoxx.com
  43. 43. Agenda, or something … Part 1 – Comet and the Future Real-time Web Comet/Reverse Ajax HTML 5 Communication Break (30 minutes) Part 2 – Full-duplex Web Today Networking Review HTML 5 WebSockets Kaazing Gateway www.devoxx.com
  44. 44. Networking Review Desktop Networking Full-duplex bidirectional TCP sockets Access any server on the network Browser Networking Half-duplex HTTP request-response HTTP polling, long polling, streaming Same-origin HTTP requests www.devoxx.com
  45. 45. Half-Duplex Architecture Java EE Container RMI - JDBC - TCP (Full Duplex) TCP (Full Duplex) Database EJB Application Transport Logic IMAP - RMI TCP (Full Duplex) JavaMail IMAP Server Servlet JABBER - TCP (Full Duplex) IM Server HTTP Custom - Browser (Half Duplex) JMS - RMI TCP (Full Duplex) TCP (Full Duplex) JMS Stock Trading Client Stock JMS Trading Feed www.devoxx.com
  46. 46. HTML 5 Communication WebSocket Proxy-friendly text socket for your browser Server-Sent Events Standardized HTTP streaming (downstream) Cross-Site XMLHttpRequest Secure cross-site remote communication postMessage Secure inter-iframe communication www.devoxx.com
  47. 47. Full-duplex Architecture RMI - Java EE JDBC - TCP (Full Duplex) TCP (Full Duplex) EJB RMI - TCP (Full Duplex) JMS Database WebSocket Server JDBC - TCP (Full Duplex) IMAP - TCP (Full Duplex) IMAP Server Jabber - TCP (Full Duplex) IM Server TCP over HTTP (Full Duplex) Browser Custom - TCP (Full Duplex) Stock Trading Feed www.devoxx.com
  48. 48. DEMO Java Messaging Service www.devoxx.com
  49. 49. Kaazing Protocols Protocols ByteSocket WebSocket Server-Sent Events Cross-Site XHR postMessage IFrame XHR www.devoxx.com
  50. 50. Kaazing ByteSocket Provides binary socket abstraction Leverages text-based WebSocket Encodes payload using base64 Send and receive ByteBuffers JavaScript has no byte or ByteArray type (yet) Kaazing Gateway converts base64 www.devoxx.com
  51. 51. Kaazing ByteSocket var location = “ws://www.kaazing.org/binary”; var socket = new ByteSocket(location); socket.onmessage = function(event) { alert(event.data.getInt()); } var buf = new ByteBuffer(); buf.putString(“Hello, world”, Charset.UTF8); socket.postMessage(buf.flip()); www.devoxx.com
  52. 52. Kaazing ByteSocket Protocols ByteSocket WebSocket Server-Sent Events Cross-Site XHR postMessage IFrame XHR www.devoxx.com
  53. 53. HTML 5 WebSocket Provides Full-Duplex Text Socket Send and Receive Strings Enables Streaming to Server Too Browser Support None (yet) www.devoxx.com
  54. 54. HTML 5 WebSocket Schemes ws://www.kaazing.org/text wss://www.kaazing.org/encrypted-text www.devoxx.com
  55. 55. HTML 5 WebSocket API var location = “ws://www.kaazing.org/text”; var socket = new WebSocket(location); socket.onopen = function(event) { socket.send(“Hello, WebSocket”); } socket.onmessage = function(event) { alert(event.data); } socket.onclose = function(event) { alert(“closed”); } www.devoxx.com
  56. 56. HTML 5 WebSocket Handshake GET /text HTTP/1.1rn Upgrade: WebSocketrn Connection: Upgradern Host: www.kaazing.orgrn …rn HTTP/1.1 101 WebSocket Protocol Handshakern Upgrade: WebSocketrn Connection: Upgradern …rn www.devoxx.com
  57. 57. HTML 5 WebSocket Frames Frames can be sent full-duplex Either direction at any time Text Frames use terminator x80Hello, WebSocket0xff Binary Frames use length prefix x000x10Hello, WebSocket Text and binary frames on same WebSocket www.devoxx.com
  58. 58. Kaazing WebSocket Protocols ByteSocket WebSocket Server-Sent Events Cross-Site XHR postMessage IFrame XHR www.devoxx.com
  59. 59. HTML 5 Server-Sent Events www.devoxx.com
  60. 60. HTML 5 Server-Sent Events HTML DOM Element <eventsource src=“http://www.kaazing.org/sse” onmessage=“alert(event.data)” > HTML DOM API var es = document.createElement(“eventsource”); es.addEventListener(“message”, function(event) { alert(event.data); }, false); es.addEventSource(“http://www.kaazing.org/ sse”); www.devoxx.com
  61. 61. HTML 5 Server-Sent Events GET /sse HTTP/1.1rn Host: www.kaazing.orgrn Last-Event-ID: 9rn …rn 200 OK HTTP/1.1rn …rn :commentn id: 10n data: Hello, Server-Sent Eventsn n www.devoxx.com
  62. 62. DEMO HTML 5 Server-Sent Events www.devoxx.com
  63. 63. Kaazing Server-Sent Events Protocols ByteSocket WebSocket Server-Sent Events Cross-Site XHR postMessage IFrame XHR www.devoxx.com
  64. 64. Cross-Site XMLHttpRequest W3C Technical Report Access Control for Cross-Site Requests Published Sept 12, 2008 http://www.w3.org/TR/access-control/ Browser Support Firefox 3.1-beta IE8 XDomainRequest (similar) Opera, Safari, Chrome coming www.devoxx.com
  65. 65. Cross-Site XMLHttpRequest GET / HTTP/1.1rn Host: www.w3.orgrn Origin: http://www.kaazing.orgrn …rn 200 OK HTTP/1.1rn Allow-Origin: http://www.kaazing.orgrn …rn www.devoxx.com
  66. 66. DEMO Cross-site XMLHttpRequest www.devoxx.com
  67. 67. Kaazing Cross-Site XHR Protocols ByteSocket WebSocket Server-Sent Events Cross-Site XHR postMessage IFrame XHR www.devoxx.com
  68. 68. HTML 5 postMessage Send Strings Between HTML Documents Documents may be served by different sites Standard API targetWindow.postMessage(message, targetOrigin) window.onmessage = function(event) { alert(event.data); } Browser Support IE 8, FF 3, Opera 9, WebKit nightlies www.devoxx.com
  69. 69. DEMO HTML 5 postMessage www.devoxx.com
  70. 70. Kaazing postMessage Protocols ByteSocket WebSocket Server-Sent Events Cross-Site XHR postMessage IFrame XHR www.devoxx.com
  71. 71. Kaazing postMessage www.devoxx.com
  72. 72. Kaazing Protocols Support Protocols ByteSocket WebSocket Server-Sent Events Cross-Site XHR postMessage IFrame XHR www.devoxx.com
  73. 73. Kaazing Protocols Text or Binary Stomp XMPP IRC Telnet IMAP SMTP Custom… www.devoxx.com
  74. 74. Kaazing Gateway Scalability Based on SEDA (Staged Event-Driven Architecture) Leverages Java New I/O (NIO) Concurrency Proportional to bandwidth not connections Latency Socket integration, bytes-in, bytes-out Stateless Minimal memory usage, balancing, failover www.devoxx.com
  75. 75. Kaazing Gateway Security www.server.co IP Domain Name m Address stock.server.co Server m 65.43.2. Director chat.server.co 1 Firewall Gatewa m Public yDMZ y IP IP Server Addres Addres s: s: >|< Kaazing Gateway ldaps://directory.internal.net: 65.43.2 10.0.0. .1 1 Web Page tcp://gateway.dmz.net: http:// 8080 Cha www.server.com:80 t Firewall 636 Stock Stoc Serve k wss://stock.server.com: tcp://gateway.dmz.net: tcp://stock.internal.net : r 443 9090 61613 Browser Chat Serve r wss://chat.server.com:443 tcp://gateway.dmz.net: tcp://chat.internal.net:5222 9090 Public Internet DMZ Internal Network IP Addresses IP Addresses IP Addresses ! 10.0.0.0/24 10.0.0.0/24 192.168.0.0/16 ! 172.16.0.0/20 ! 192.168.0.0/16 www.devoxx.com
  76. 76. Kaazing Enterprise Gateway Features Adobe Flex APIs Flash runtime detection EncryptedKeyring Single sign-on Protocol Validation Protocol Security Enhancements Management www.devoxx.com
  77. 77. DEMO Kaazing XMPP Client www.devoxx.com
  78. 78. Summary HTML 5 Communication is here WebSockets and SSE standardize Comet Avoid vendor lock-in, the standards shall set you free! Kaazing Community – www.kaazing.org 78 www.devoxx.com
  79. 79. Concluding statement If HTTP did not restrict your creativity, what Web application would YOU create? www.devoxx.com
  80. 80. Q&A www.devoxx.com
  81. 81. Thanks for your attention! http://www.kaazing.org http://www.w3c.org www.devoxx.com

×