• Save
HTML5 WebSocket: The New Network Stack for the Web
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 WebSocket: The New Network Stack for the Web

on

  • 12,994 views

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

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

Statistics

Views

Total Views
12,994
Views on SlideShare
12,914
Embed Views
80

Actions

Likes
28
Downloads
1
Comments
0

8 Embeds 80

http://websockets.tumblr.com 41
http://www.scoop.it 26
http://bummerware.tumblr.com 4
http://www.linkedin.com 4
http://blog.pigflying.info 2
http://www.onlydoo.com 1
http://www.audiowebtv.com 1
http://safe.tumblr.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Welcome, introductions
  • Sponsors
  • Speaker intro
  • Agenda
  • To illustrate, show a WS program and explain how this was done with polling in the past Link:  http://50.16.121.197:8000/lab/server_monitor.html
  • 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 Presentation Transcript

  • 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.
      • TheLadders (venue)
        •   Makes you more attractive to $100K+ employers
      • Kaazing (pizza)
        • Develops a High Performance Platform for Full-Duplex Web Communication (a kick-ass WebSocket Server)
        • Global HTML5 and WebSocket Training
        • Hiring! ( http://kaazing.com/about/careers.html )
      • Apress (raffle prizes)
        • Technology Books
        •   Pro HTML5 Programming
        • Many HTML5 titles
    Thanks to our Sponsors!
  • 3. Who Are These Guys? 
    • @frankgreco
    • Director of Technology, Kaazing
    • Founder NYC HTML5 UG
    • Java Champion
    • @peterlubbers  
    • Senior Director Technical Communication, Kaazing
    • Co-founder SF HTML5 UG
    • Running Champion
  • 4. Agenda
      • About WebSockets
      • Using the WebSocket API
      • Enterprise Deployment
      • Practical Use Cases
      • Demos
      • Q&A
      • Prizes!
  • 5. Introducing HTML5 WebSocket
      • W3C API and IETF Protocol
      • Full-duplex, single socket
      • 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)
  • 6. Where Can You Use Full-Duplex WebSockets?
      • Financial apps
      • Gaming apps
      • Social networking apps
      • Monitoring and management apps
      • Power grid management apps
      • Embedded devices 
      • Much more...
  • 7. Demo
    • Canvas and WebSockets  Cloud Server Monitor
  • 8.  
    •  
    HTTP is Half Duplex
  • 9. Question (#1) for the Audience: What some common names for Ajax Polling implementations (name 2)? 
  • 10. Half Duplex Communication is Primitive
  • 11. HTTP Header Overhead
  • 12. Polling Introduces Unnecessary Overhead!
  • 13.  
    •  
    Polling: Too much overhead http://bit.ly/g1Pd4n
  • 14. Polling Introduces Extra Latency!
  • 15. HTML5 Paves the Cowpaths
  • 16. ...To Simplicity From Complexity... (Spell it with the letters C, O, M, E, T!)
  • 17.
    •  
    Question (#2) for the Audience: What do WebSockets and Model Trains have in common?
  • 18. The WebSocket API: Simple is Better
  • 19. The WebSocket API
    • //Create new WebSocket
    • var mySocket = new WebSocket("ws://www.websockets.org");
    • // Associate listeners
    • mySocket.onopen = function(evt) {
    •   alert("Connection open…");
    • };
    • mySocket.onmessage = function(evt) {
    •   alert("Received message: " + evt.data);
    • };
    • mySocket.onclose = function(evt) {
    •   alert("Connection closed…");
    • };
    • mySocket.onerror = function(evt) {
    •    alert("Error");
    • };
  • 20. The WebSocket API
    • // Sending data
    • mySocket.send("WebSocket Rocks!");
    • // Close WebSocket
    • mySocket.close();
    • // API specification:
    • //  http://dev.w3.org/html5/websockets/  
  • 21. Demo
    • Simple echo WebSocket client:  http://websockets.org
  • 22. WebSocket 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: 5
    • HTTP/1.1 101 Switching Protocols
    • Upgrade: websocket
    • Connection: Upgrade
    • Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
    • Source: http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol
  • 23. 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: x00Hello, WebSocket0xff
      • There is no defined maximum size, but JavaScript  does not allow >4GB of data)
  • 24. x00Hello, WebSocket0xff Less  Overhead... A lot less.
  • 25. Overheard
    • " 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. "
    • — Ian Hickson (Google, HTML5 spec lead)
  • 26. Browser and Server Support
      • Browsers:
        • Chrome
        • Safari
        • Coming in Firefox and Opera and "on the list" for IE
      • Servers:
        • Kaazing WebSocket Gateway
        • Apache mod_pywebsocket
        • phpwebsockets
        • web-socket-ruby
        • Pusherapp
        • More...
  • 27. WebSocket Security
  • 28. WebSocket Security
      • Protocol defines two schemes (like http and https):
        • ws
        • wss (WebSocket Secure + TLS)
      • Cross Origin Resource Sharing (CORS)-compliant, allowing communication with remote hosts
      • WebSockets can easily work with existing Authentication and Authorization frameworks
      • WSS has a better success rate with proxy server traversal
  • 29. Proxy Server Architecture   
  • 30. Proxy Traversal   
  • 31. So you have a WebSocket, Now What?
      • Major upgrade for web traffic, use it! 
        • Simple Text
        • JSON
        • protocols (why reinvent the wheel?)
        • Text Protocols (XMPP, Stomp)
        • Binary protocols (AMQP, IRC)
        • Pub/Sub
  • 32. Demo Financial/Stock (Kaazing protocol and stock demos in demo bundle)
  • 33. Demo Games:  http://rawkes.com/
  • 34. Demo Chat, Twitter and news feeds, live visitor tracking:  http://kaazing.me  
  • 35. Demo Combine WebSockets with Canvas Parental advisory : may spontaneously contain explicit content!  http://mrdoob.com/projects/multiuserpad/
  • 36. Your cool [HTML5 WebSocket]  App Here...
  • 37.  
  • 38. Resources
      • Kaazing WebSocket Gateway (Free, unrestricted developer's license): http://kaazing.com/download.html
      • Kaazing HTML5 and WebSocket training: http://tech.kaazing.com/training/index.html
      • WebSocket API Spec: http://dev.w3.org/html5/websockets/
      • WebSocket Protocol Spec: http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol
  • 39.
    • Copyright (c) 2011 Kaazing Corporation, All rights reserved.