Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WebSockets                      The Real-Time Web, Delivered                                  July 23, 2011               ...
Whiteboard Demo    • Get             FireFox 7 Alpha         •   http://www.mozilla.com/firefox/channel/Monday, July 25, 11
The Problem    • No     officially supported way to do real-time communications        in the browser.Monday, July 25, 11
Hacks, Hacks, Hacks    • Polling    • Long-polling    • IFrame           Streaming    • HTMLFile (MSIE)    • XHR-Multipart...
Diagram from http://publib.boulder.ibm.com/infocenter/wasinfo/v6r1/index.jsp?topic=/com.ibm.websphere.ajax.devguide.help/d...
Diagram from http://publib.boulder.ibm.com/infocenter/wasinfo/v6r1/index.jsp?topic=/com.ibm.websphere.ajax.devguide.help/d...
The Solution: WebSockets    • Maintains         a persistent bi-directional communications channel    • Eliminates        ...
Why not TCP Sockets?    • API Simplicity      • TCP is a stream-oriented protocol      • We want a message-oriented protoc...
WebSocket Drafts    • Started at WhatWG      • WhatWG Draft-75 (old browsers)      • WhatWG Draft-76 (Chrome, Safari)    •...
The Details: Handshake    • Built on HTTP      • Traverse existing proxies/intermediaries      • Co-exist on same port wit...
The Details: Handshake    Client Request     GET /chat HTTP/1.1     Connection: Upgrade     Upgrade: websocket     Sec-Web...
The Details: Handshake     Server Response     HTTP/1.1 101 Switching Protocols     Connection: Upgrade     Upgrade: webso...
The Details: Handshake    • Security         • Cross-Origin    handling via Sec-WebSocket-Origin         • Sec-WebSocket-K...
The Details: Masking    • Most  contentious issue in the HyBi Working Group.    • All client-to-server messages are masked...
The Details: Masking    • How     does it work?         • Randomly generated four-byte mask key per frame         • Applie...
The Details: Framing    • Simple framing protocol facilitates message oriented API    • 2 to 10 bytes for frame header    ...
The Details: Framing    • Data      frame types:    • Control   frame types:         • Binary Message        • Ping       ...
The Details: Framing    • Fragmentation         • Allows     control frames in the middle of a long message         • In c...
Basic Frame Header                                  Frames less than 126 bytes                      1   2   3   4   5     ...
Medium Frame Header                              >= 126 bytes && < 65535 bytes                      1   2   3   4    5    ...
Long Frame Header                                             > 65535 bytes                      1   2   3   4   5      6 ...
Server Implementations    • Node.JS: WebSocket-Node      • https://github.com/Worlize/WebSocket-Node    • ANSI C: libwebso...
Client Implementations    • Node.JS: WebSocket-Node      • https://github.com/Worlize/WebSocket-Node    • ActionScript 3: ...
Demo                                    Shared Whiteboard Example                      • Available in the ‘examples’ folde...
Upcoming SlideShare
Loading in …5
×

WebSockets: The Real-Time Web, Delivered

A technical overview of the WebSockets protocol draft-09 and background on how we got to where we are today.

  • Be the first to comment

WebSockets: The Real-Time Web, Delivered

  1. 1. WebSockets The Real-Time Web, Delivered July 23, 2011 Brian McKelvey Co-Founder - Worlize Inc. twitter - @theturtle32 www.worlize.comMonday, July 25, 11
  2. 2. Whiteboard Demo • Get FireFox 7 Alpha • http://www.mozilla.com/firefox/channel/Monday, July 25, 11
  3. 3. The Problem • No officially supported way to do real-time communications in the browser.Monday, July 25, 11
  4. 4. Hacks, Hacks, Hacks • Polling • Long-polling • IFrame Streaming • HTMLFile (MSIE) • XHR-Multipart (Firefox)Monday, July 25, 11
  5. 5. Diagram from http://publib.boulder.ibm.com/infocenter/wasinfo/v6r1/index.jsp?topic=/com.ibm.websphere.ajax.devguide.help/docs/PureAjax_pubsub_clients.htmlMonday, July 25, 11
  6. 6. Diagram from http://publib.boulder.ibm.com/infocenter/wasinfo/v6r1/index.jsp?topic=/com.ibm.websphere.ajax.devguide.help/docs/PureAjax_pubsub_clients.htmlMonday, July 25, 11
  7. 7. The Solution: WebSockets • Maintains a persistent bi-directional communications channel • Eliminates the need for hacksMonday, July 25, 11
  8. 8. Why not TCP Sockets? • API Simplicity • TCP is a stream-oriented protocol • We want a message-oriented protocol • Security • Scan a Local Network • DDOS AttackMonday, July 25, 11
  9. 9. WebSocket Drafts • Started at WhatWG • WhatWG Draft-75 (old browsers) • WhatWG Draft-76 (Chrome, Safari) • Moved to IETF • HyBi - HyperText Bi-directional Working Group • Draft-00 (Same as WhatWG Draft-76) • Draft-07 (FireFox 6 beta) • Draft-09 (FireFox 7 alpha)Monday, July 25, 11
  10. 10. The Details: Handshake • Built on HTTP • Traverse existing proxies/intermediaries • Co-exist on same port with HTTP/HTTPS serverMonday, July 25, 11
  11. 11. The Details: Handshake Client Request GET /chat HTTP/1.1 Connection: Upgrade Upgrade: websocket Sec-WebSocket-Version: 8 Sec-WebSocket-Key: reaiKXo+d4Hkqt45PNTlNg== Sec-WebSocket-Origin: http://piglet.worlize.com:8080 Sec-WebSocket-Protocol: superchat, boringchat Sec-WebSocket-Extensions: deflate-streamMonday, July 25, 11
  12. 12. The Details: Handshake Server Response HTTP/1.1 101 Switching Protocols Connection: Upgrade Upgrade: websocket Sec-WebSocket-Accept: Iy0M3juCftp2uqk8/9fVWt4VfoI= Sec-WebSocket-Protocol: superchat Sec-WebSocket-Extensions: deflate-streamMonday, July 25, 11
  13. 13. The Details: Handshake • Security • Cross-Origin handling via Sec-WebSocket-Origin • Sec-WebSocket-Key Validation • Prevent cross-protocol attacks • Fail early if a dumb intermediary provides a cached response. • Sec- headers prevent XHR from being used to contact a WebSocket serverMonday, July 25, 11
  14. 14. The Details: Masking • Most contentious issue in the HyBi Working Group. • All client-to-server messages are masked. • Why is this necessary? • Prevent cache-poisoning attacks • Prevent talking to overly permissive servers • Concern over this issue caused some browser vendors to pull support for WebSockets draft-76.Monday, July 25, 11
  15. 15. The Details: Masking • How does it work? • Randomly generated four-byte mask key per frame • Applied using XOR to frame payload • Reduces compression efficiency for client-to-server messagesMonday, July 25, 11
  16. 16. The Details: Framing • Simple framing protocol facilitates message oriented API • 2 to 10 bytes for frame header • Contains flags, opcode, and payload length • Payload length is a variable length field.Monday, July 25, 11
  17. 17. The Details: Framing • Data frame types: • Control frame types: • Binary Message • Ping • UTF-8 Text Message • Pong • Continuation • Close (fragmentation)Monday, July 25, 11
  18. 18. The Details: Framing • Fragmentation • Allows control frames in the middle of a long message • In coordination with a future extension can facilitate multiplexing.Monday, July 25, 11
  19. 19. Basic Frame Header Frames less than 126 bytes 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 R R R F M S S S I OPCODE S 7-BIT LENGTH V V V N K 1 2 3 Byte 1 Byte 2Monday, July 25, 11
  20. 20. Medium Frame Header >= 126 bytes && < 65535 bytes 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 R R R F M S S S Static Value "126" Indicating I OPCODE S V V V 16-bit length N K 1 2 3 Byte 1 Byte 2 16-BIT LENGTH (BIG-ENDIAN UNSIGNED SHORT) Byte 3 Byte 4Monday, July 25, 11
  21. 21. Long Frame Header > 65535 bytes 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 R R R F M S S S Static Value "127" Indicating I OPCODE S V V V 63-bit length N K 1 2 3 Byte 1 Byte 2 0 63-BIT LENGTH (BIG-ENDIAN UNSIGNED) 63-BIT LENGTH (Continued) 63-BIT LENGTH (Continued) 63-BIT LENGTH (Continued)Monday, July 25, 11
  22. 22. Server Implementations • Node.JS: WebSocket-Node • https://github.com/Worlize/WebSocket-Node • ANSI C: libwebsockets • http://git.warmcat.com/cgi-bin/cgit/libwebsockets/ • Java: Jetty • http://webtide.intalio.com/2011/04/getting-started-with-websockets/Monday, July 25, 11
  23. 23. Client Implementations • Node.JS: WebSocket-Node • https://github.com/Worlize/WebSocket-Node • ActionScript 3: AS3WebSocket • https://github.com/Worlize/AS3WebSocket • ANSI C: libwebsockets • http://git.warmcat.com/cgi-bin/cgit/libwebsockets/Monday, July 25, 11
  24. 24. Demo Shared Whiteboard Example • Available in the ‘examples’ folder of: https://github.com/Worlize/WebSocket-Node Requires FireFox 7 Alpha!Monday, July 25, 11

×