O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

HTML5 WebSocket: The New Network Stack for the Web

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

  • Seja o primeiro a comentar

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! ( http://kaazing.com/about/careers.html ) </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 http://bit.ly/g1Pd4n
  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://www.websockets.org&quot;); </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; + evt.data); </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>//  http://dev.w3.org/html5/websockets/   </li></ul>
  21. 21. Demo <ul><li>Simple echo WebSocket client:  http://websockets.org </li></ul>
  22. 22. WebSocket 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: 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: http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol </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:  http://rawkes.com/
  34. 34. Demo Chat, Twitter and news feeds, live visitor tracking:  http://kaazing.me  
  35. 35. Demo Combine WebSockets with Canvas Parental advisory : may spontaneously contain explicit content!  http://mrdoob.com/projects/multiuserpad/
  36. 36. Your cool [HTML5 WebSocket]  App Here...
  37. 38. Resources <ul><ul><li>Kaazing WebSocket Gateway (Free, unrestricted developer's license): http://kaazing.com/download.html </li></ul></ul><ul><ul><li>Kaazing HTML5 and WebSocket training: http://tech.kaazing.com/training/index.html </li></ul></ul><ul><ul><li>WebSocket API Spec: http://dev.w3.org/html5/websockets/ </li></ul></ul><ul><ul><li>WebSocket Protocol Spec: http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol </li></ul></ul>
  38. 39. <ul><li>Copyright (c) 2011 Kaazing Corporation, All rights reserved. </li></ul>