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

4,191 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,191
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
46
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×