Kaazing

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    3 Favorites

    Kaazing - Presentation Transcript

    1. Comet Never More! (HTML 5 WebSockets in Theory and Practice) Jonas Jacobi & John R. Fallows Founders Kaazing www.devoxx.com
    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. Overall Presentation Goal Learn how to architect and build full-duplex Web applications using HTML 5 communication www.devoxx.com
    4. If we were not restricted by the traditional limitations of HTTP, what type of Web applications would we build? www.devoxx.com
    5. DEMO Web Networking Usecases for Work and Play www.devoxx.com
    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. Defining Real-Time Web Web Applications Typically Not Real-Time www.devoxx.com
    8. Defining Real-Time Web www.devoxx.com
    9. Defining Real-Time Web Or, is it just nearly, nearly real-time? www.devoxx.com
    10. Defining Real-Time Web Or, is it just nearly, nearly real-time? www.devoxx.com
    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. 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. 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. Long Polling and Streaming Current Comet implementations center around two major areas: Long Polling Streaming www.devoxx.com
    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. Long Polling HTTP Request From client (browser) to server: GET /long-polling HTTP/1.1\\r\\n Host: www.kaazing.com\\r\\n User-Agent: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9) Gecko/2008061017 Firefox/3.0\\r\\n Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/ *;q=0.8\\r\\n Accept-Language: en-us,en;q=0.5\\r\\n Accept-Encoding: gzip,deflate\\r\\n Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7\\r\\n Keep-Alive: 300\\r\\n Connection: keep-alive\\r\\n Cache-Control: max-age=0\\r\\n \\r\\n www.devoxx.com
    17. Long Polling HTTP Response From server to client (browser): Date: Tue, 16 Aug 2008 00:00:00 GMT\\r\\n Server: Apache/2.2.9 (Unix)\\r\\n Content-Type: text/plain\\r\\n Content-Length: 12\\r\\n \\r\\n Hello, world www.devoxx.com
    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. 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. 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. Evolving the Web Ajax Comet/Reverse Ajax WebSockets Server Server Server Connect Notify Notify Firewall Firewall Firewall Browser Browser Browser www.devoxx.com
    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. 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. 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. HTML 5 Server-Sent Events Connects to a server URL to receive an event stream: <eventsource src= \"http:// stocks.kaazing.com\" onmessage=\"alert(event.data)\"> www.devoxx.com
    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. 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. 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. 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. 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. 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. HTML 5 WebSockets Creating a WebSocket instance: var myWebSocket = new WebSocket (“ws://www.websocket.org”); www.devoxx.com
    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. HTML 5 WebSockets Sending messages: myWebSocket.postMessage(“Hello WebSocket!”); myWebSocket.postMessage(“Goodbye Comet!”); myWebSocket.disconnect(); www.devoxx.com
    35. HTML 5 WebSockets Enables full-duplex communication to any TCP-based back-end service: JMS Jabber Stomp etc… www.devoxx.com
    36. Stomp Protocol Simple Text-Oriented Messaging Protocol (STOMP) Publish and Subscribe Transactional Acknowledgements ActiveMQ, RabbitMQ, … www.devoxx.com
    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. DEMO XMPP client www.devoxx.com
    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. 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. www.devoxx.com
    42. Comet Never More! (HTML 5 WebSockets in Theory and Practice) John R. Fallows & Jonas Jacobi Founders Kaazing www.devoxx.com
    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. 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. 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. 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. 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. DEMO Java Messaging Service www.devoxx.com
    49. Kaazing Protocols Protocols ByteSocket WebSocket Server-Sent Events Cross-Site XHR postMessage IFrame XHR www.devoxx.com
    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. 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. Kaazing ByteSocket Protocols ByteSocket WebSocket Server-Sent Events Cross-Site XHR postMessage IFrame XHR www.devoxx.com
    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. HTML 5 WebSocket Schemes ws://www.kaazing.org/text wss://www.kaazing.org/encrypted-text www.devoxx.com
    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. HTML 5 WebSocket Handshake GET /text HTTP/1.1\\r\\n Upgrade: WebSocket\\r\\n Connection: Upgrade\\r\\n Host: www.kaazing.org\\r\\n …\\r\\n HTTP/1.1 101 WebSocket Protocol Handshake\\r\\n Upgrade: WebSocket\\r\\n Connection: Upgrade\\r\\n …\\r\\n www.devoxx.com
    57. HTML 5 WebSocket Frames Frames can be sent full-duplex Either direction at any time Text Frames use terminator \\x80Hello, WebSocket\\0xff Binary Frames use length prefix \\x00\\0x10Hello, WebSocket Text and binary frames on same WebSocket www.devoxx.com
    58. Kaazing WebSocket Protocols ByteSocket WebSocket Server-Sent Events Cross-Site XHR postMessage IFrame XHR www.devoxx.com
    59. HTML 5 Server-Sent Events www.devoxx.com
    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. HTML 5 Server-Sent Events GET /sse HTTP/1.1\\r\\n Host: www.kaazing.org\\r\\n Last-Event-ID: 9\\r\\n …\\r\\n 200 OK HTTP/1.1\\r\\n …\\r\\n :comment\\n id: 10\\n data: Hello, Server-Sent Events\\n \\n www.devoxx.com
    62. DEMO HTML 5 Server-Sent Events www.devoxx.com
    63. Kaazing Server-Sent Events Protocols ByteSocket WebSocket Server-Sent Events Cross-Site XHR postMessage IFrame XHR www.devoxx.com
    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. Cross-Site XMLHttpRequest GET / HTTP/1.1\\r\\n Host: www.w3.org\\r\\n Origin: http://www.kaazing.org\\r\\n …\\r\\n 200 OK HTTP/1.1\\r\\n Allow-Origin: http://www.kaazing.org\\r\\n …\\r\\n www.devoxx.com
    66. DEMO Cross-site XMLHttpRequest www.devoxx.com
    67. Kaazing Cross-Site XHR Protocols ByteSocket WebSocket Server-Sent Events Cross-Site XHR postMessage IFrame XHR www.devoxx.com
    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. DEMO HTML 5 postMessage www.devoxx.com
    70. Kaazing postMessage Protocols ByteSocket WebSocket Server-Sent Events Cross-Site XHR postMessage IFrame XHR www.devoxx.com
    71. Kaazing postMessage www.devoxx.com
    72. Kaazing Protocols Support Protocols ByteSocket WebSocket Server-Sent Events Cross-Site XHR postMessage IFrame XHR www.devoxx.com
    73. Kaazing Protocols Text or Binary Stomp XMPP IRC Telnet IMAP SMTP Custom… www.devoxx.com
    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. 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. Kaazing Enterprise Gateway Features Adobe Flex APIs Flash runtime detection EncryptedKeyring Single sign-on Protocol Validation Protocol Security Enhancements Management www.devoxx.com
    77. DEMO Kaazing XMPP Client www.devoxx.com
    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. Concluding statement If HTTP did not restrict your creativity, what Web application would YOU create? www.devoxx.com
    80. Q&A www.devoxx.com
    81. Thanks for your attention! http://www.kaazing.org http://www.w3c.org www.devoxx.com
    SlideShare Zeitgeist 2009

    + Alexander AinslieAlexander Ainslie Nominate

    custom

    311 views, 3 favs, 0 embeds more stats

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 311
      • 311 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 8
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    What's New

    © 2009 SlideShare Inc. All rights reserved.