1. WebSocket: Full-Duplex Solution for the Web
Daniel Imhoff
April 2nd, 2013

2. Introduction
History
Importance
The WebSocket Protocol
The WebSocket API
Server-side
Backwards Compatibility
Demo
Questions

3. Introduction
HTML5 & W3C
Full-duplex, bidirectional communication

4. Introduction
History
Importance
The WebSocket Protocol
The WebSocket API
Server-side
Backwards Compatibility
Demo
Questions

5. History Birth of the Web; HTTP and static documents
Limitations & workarounds
Half-duplex vs. full-duplex
Polling, long polling, streaming (Are we there yet?)
RFC 6455: The WebSocket Protocol
Ian Fette & Alexey Melnikov
IETF
The WebSocket API
Ian Hickson
W3C

6. Introduction
History
Importance
The WebSocket Protocol
The WebSocket API
Server-side
Backwards Compatibility
Demo
Questions

7. Importance Improves performance Simplifies development process
Simple & elegant API
Develop once, deploy anywhere
Real-time
Chat, collaborative document editing, multiplayer games
Examples
WebSocket HTML5 Demo
Google Drive Documents
BrowserQuest

8. WebSocket HTML5 Demo
html5demos.com/web-socket

9. BrowserQuest

10. Introduction
History
Importance
The WebSocket Protocol
The WebSocket API
Server-side
Backwards Compatibility
Demo
Questions

11. The WebSocket Protocol
ws:// and wss:// URI schemes
Protocol comprises
Opening handshake
Data transfer
Closing handshake

12. The Opening Handshake
HTTP request/response to open WebSocket connection
Example client request
GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Origin:
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
Example server response
HTTP/ Switching Protocols
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

13. Data Transfer Bidirectional communication using frames WebSocket frame
Opcode
Continuation, Text, Binary, Close, Ping, Pong

14. The Closing Handshake Simply a WebSocket frame with opcode 0x8
Not uncommon for WebSockets to close abruptly due to disconnection

15. Introduction
History
Importance
The WebSocket Protocol
The WebSocket API
Server-side
Backwards Compatibility
Demo
Questions

16. The WebSocket API Interfaces Javascript with WebSockets
Event-driven, asynchronous
WebSocket object that comprises
Constructor
Events
Methods
Attributes

17. WebSocket Constructor
First parameter
URL to WebSocket server
Second parameter
Subprotocol
Optional
Create a new WebSocket connection
var socket = new WebSocket(“ws://example.com”);

18. WebSocket Events
Open
Message
Error
Close

19. WebSocket Methods
send()
close()

20. WebSocket Attributes readyState bufferedAmount protocol
Static attributes
WebSocket.CONNECTING
WebSocket.OPEN
WebSocket.CLOSING
WebSocket.CLOSED

21. Introduction
History
Importance
The WebSocket Protocol
The WebSocket API
Server-side
Backwards Compatibility
Demo
Questions

22. Server-side Must implement WebSocket protocol Libraries
Socket.IO (NodeJS)
WebSocket-Node (NodeJS)
jWebSocket (Java)
Ratchet (PHP)
AutobahnPython (Python)
EM-WebSocket (Ruby)

23. Introduction
History
Importance
The WebSocket Protocol
The WebSocket API
Server-side
Backwards Compatibility
Demo
Questions

24. Backwards Compatibility
Inherent problem with web development
Solutions

25. Introduction
History
Importance
The WebSocket Protocol
The WebSocket API
Server-side
Backwards Compatibility
Demo
Questions

26. Introduction
History
Importance
The WebSocket Protocol
The WebSocket API
Server-side
Backwards Compatibility
Demo
Questions