HTML5 WebSocket: The New Network Stack for the Web


Published on

Presentation given on Feb. 11, 2011 at the New York HTML5 User Group by Peter Lubbers and Frank Greco

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
  • Welcome, introductions
  • Sponsors
  • Speaker intro
  • Agenda
  • To illustrate, show a WS program and explain how this was done with polling in the past Link:
  • Explain half duplex nature. Web was static request response before Now more and more real-time needs. Need to keep refreshing
  • HTML5 WebSocket: The New Network Stack for the Web

    1. 1. HTML5 WebSocket The New Network Stack for the Web @peterlubbers @frankgreco #kaazing 2011-02-10 NYC HTML5 User Group HTML5 logo and connectivity badge by W3C
    2. 2. <ul><ul><li>TheLadders (venue) </li></ul></ul><ul><ul><ul><li>  Makes you more attractive to $100K+ employers </li></ul></ul></ul><ul><ul><li>Kaazing (pizza) </li></ul></ul><ul><ul><ul><li>Develops a High Performance Platform for Full-Duplex Web Communication (a kick-ass WebSocket Server) </li></ul></ul></ul><ul><ul><ul><li>Global HTML5 and WebSocket Training </li></ul></ul></ul><ul><ul><ul><li>Hiring! ( ) </li></ul></ul></ul><ul><ul><li>Apress (raffle prizes) </li></ul></ul><ul><ul><ul><li>Technology Books </li></ul></ul></ul><ul><ul><ul><li>  Pro HTML5 Programming </li></ul></ul></ul><ul><ul><ul><li>Many HTML5 titles </li></ul></ul></ul>Thanks to our Sponsors!
    3. 3. Who Are These Guys?  <ul><li>@frankgreco </li></ul><ul><li>Director of Technology, Kaazing </li></ul><ul><li>Founder NYC HTML5 UG </li></ul><ul><li>Java Champion </li></ul><ul><li>@peterlubbers   </li></ul><ul><li>Senior Director Technical Communication, Kaazing </li></ul><ul><li>Co-founder SF HTML5 UG </li></ul><ul><li>Running Champion </li></ul>
    4. 4. Agenda <ul><ul><li>About WebSockets </li></ul></ul><ul><ul><li>Using the WebSocket API </li></ul></ul><ul><ul><li>Enterprise Deployment </li></ul></ul><ul><ul><li>Practical Use Cases </li></ul></ul><ul><ul><li>Demos </li></ul></ul><ul><ul><li>Q&A </li></ul></ul><ul><ul><li>Prizes! </li></ul></ul>
    5. 5. Introducing HTML5 WebSocket <ul><ul><li>W3C API and IETF Protocol </li></ul></ul><ul><ul><li>Full-duplex, single socket </li></ul></ul><ul><ul><li>Enables web pages to communicate (in full-duplex mode) with a remote host </li></ul></ul><ul><ul><li>Traverses firewalls, proxies, and routers seamlessly </li></ul></ul><ul><ul><li>Leverages Cross-Origin Resource Sharing (CORS) </li></ul></ul><ul><ul><li>Shares port with existing HTTP content (80, 443) </li></ul></ul>
    6. 6. Where Can You Use Full-Duplex WebSockets? <ul><ul><li>Financial apps </li></ul></ul><ul><ul><li>Gaming apps </li></ul></ul><ul><ul><li>Social networking apps </li></ul></ul><ul><ul><li>Monitoring and management apps </li></ul></ul><ul><ul><li>Power grid management apps </li></ul></ul><ul><ul><li>Embedded devices  </li></ul></ul><ul><ul><li>Much more... </li></ul></ul>
    7. 7. Demo <ul><li>Canvas and WebSockets  Cloud Server Monitor </li></ul>
    8. 8.   <ul><li>  </li></ul>HTTP is Half Duplex
    9. 9. Question (#1) for the Audience: What some common names for Ajax Polling implementations (name 2)? 
    10. 10. Half Duplex Communication is Primitive
    11. 11. HTTP Header Overhead
    12. 12. Polling Introduces Unnecessary Overhead!
    13. 13.   <ul><li>  </li></ul>Polling: Too much overhead
    14. 14. Polling Introduces Extra Latency!
    15. 15. HTML5 Paves the Cowpaths
    16. 16. ...To Simplicity From Complexity... (Spell it with the letters C, O, M, E, T!)
    17. 17. <ul><li>  </li></ul>Question (#2) for the Audience: What do WebSockets and Model Trains have in common?
    18. 18. The WebSocket API: Simple is Better
    19. 19. The WebSocket API <ul><li>//Create new WebSocket </li></ul><ul><li>var mySocket = new WebSocket(&quot;ws://;); </li></ul><ul><li>// Associate listeners </li></ul><ul><li>mySocket.onopen = function(evt) { </li></ul><ul><li>  alert(&quot;Connection open…&quot;); </li></ul><ul><li>}; </li></ul><ul><li>mySocket.onmessage = function(evt) { </li></ul><ul><li>  alert(&quot;Received message: &quot; +; </li></ul><ul><li>}; </li></ul><ul><li>mySocket.onclose = function(evt) { </li></ul><ul><li>  alert(&quot;Connection closed…&quot;); </li></ul><ul><li>}; </li></ul><ul><li>mySocket.onerror = function(evt) { </li></ul><ul><li>   alert(&quot;Error&quot;); </li></ul><ul><li>}; </li></ul>
    20. 20. The WebSocket API <ul><li>// Sending data </li></ul><ul><li>mySocket.send(&quot;WebSocket Rocks!&quot;); </li></ul><ul><li>// Close WebSocket </li></ul><ul><li>mySocket.close(); </li></ul><ul><li>// API specification: </li></ul><ul><li>//   </li></ul>
    21. 21. Demo <ul><li>Simple echo WebSocket client: </li></ul>
    22. 22. WebSocket Handshake  <ul><li>GET /chat HTTP/1.1 </li></ul><ul><li>Host: </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: </li></ul><ul><li>Sec-WebSocket-Protocol: chat, superchat </li></ul><ul><li>Sec-WebSocket-Version: 5 </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>Source: </li></ul>
    23. 23. WebSocket Traffic <ul><ul><li>Connection established by upgrading from the HTTP protocol to the WebSocket protocol using the same TCP connection </li></ul></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><ul><li>Each frame of data: </li></ul></ul><ul><ul><ul><li>Starts with a 0x00 byte and ends with a 0xFF byte </li></ul></ul></ul><ul><ul><ul><li>Contains UTF-8 data in between: x00Hello, WebSocket0xff </li></ul></ul></ul><ul><ul><li>There is no defined maximum size, but JavaScript  does not allow >4GB of data) </li></ul></ul>
    24. 24. x00Hello, WebSocket0xff Less  Overhead... A lot less.
    25. 25. Overheard <ul><li>&quot; Reducing kilobytes of data to 2 bytes…and reducing latency from 150ms to 50ms is far more than marginal. In fact, these two factors alone are enough to make WebSocket seriously interesting to Google. &quot; </li></ul><ul><li>— Ian Hickson (Google, HTML5 spec lead) </li></ul>
    26. 26. Browser and Server Support <ul><ul><li>Browsers: </li></ul></ul><ul><ul><ul><li>Chrome </li></ul></ul></ul><ul><ul><ul><li>Safari </li></ul></ul></ul><ul><ul><ul><li>Coming in Firefox and Opera and &quot;on the list&quot; for IE </li></ul></ul></ul><ul><ul><li>Servers: </li></ul></ul><ul><ul><ul><li>Kaazing WebSocket Gateway </li></ul></ul></ul><ul><ul><ul><li>Apache mod_pywebsocket </li></ul></ul></ul><ul><ul><ul><li>phpwebsockets </li></ul></ul></ul><ul><ul><ul><li>web-socket-ruby </li></ul></ul></ul><ul><ul><ul><li>Pusherapp </li></ul></ul></ul><ul><ul><ul><li>More... </li></ul></ul></ul>
    27. 27. WebSocket Security
    28. 28. WebSocket Security <ul><ul><li>Protocol defines two schemes (like http and https): </li></ul></ul><ul><ul><ul><li>ws </li></ul></ul></ul><ul><ul><ul><li>wss (WebSocket Secure + TLS) </li></ul></ul></ul><ul><ul><li>Cross Origin Resource Sharing (CORS)-compliant, allowing communication with remote hosts </li></ul></ul><ul><ul><li>WebSockets can easily work with existing Authentication and Authorization frameworks </li></ul></ul><ul><ul><li>WSS has a better success rate with proxy server traversal </li></ul></ul>
    29. 29. Proxy Server Architecture   
    30. 30. Proxy Traversal   
    31. 31. So you have a WebSocket, Now What? <ul><ul><li>Major upgrade for web traffic, use it!  </li></ul></ul><ul><ul><ul><li>Simple Text </li></ul></ul></ul><ul><ul><ul><li>JSON </li></ul></ul></ul><ul><ul><ul><li>protocols (why reinvent the wheel?) </li></ul></ul></ul><ul><ul><ul><li>Text Protocols (XMPP, Stomp) </li></ul></ul></ul><ul><ul><ul><li>Binary protocols (AMQP, IRC) </li></ul></ul></ul><ul><ul><ul><li>Pub/Sub </li></ul></ul></ul>
    32. 32. Demo Financial/Stock (Kaazing protocol and stock demos in demo bundle)
    33. 33. Demo Games:
    34. 34. Demo Chat, Twitter and news feeds, live visitor tracking:  
    35. 35. Demo Combine WebSockets with Canvas Parental advisory : may spontaneously contain explicit content!
    36. 36. Your cool [HTML5 WebSocket]  App Here...
    37. 38. Resources <ul><ul><li>Kaazing WebSocket Gateway (Free, unrestricted developer's license): </li></ul></ul><ul><ul><li>Kaazing HTML5 and WebSocket training: </li></ul></ul><ul><ul><li>WebSocket API Spec: </li></ul></ul><ul><ul><li>WebSocket Protocol Spec: </li></ul></ul>
    38. 39. <ul><li>Copyright (c) 2011 Kaazing Corporation, All rights reserved. </li></ul>