Introduction to WebSockets. Seminar on Media Technology, Fall 2011

1. HTML5 - WebSockets
T-111.5502 Seminar on Media Technology
Harri Hämäläinen
harri hamalainen aalto fi
Tuesday, October 25, 11

2. Web communications
before WebSockets
• HTTP protocol is based on request-response paradigm
- In HTTP/0.9 and HTTP/1.0 the connection is closed after the
response is received
- In HTTP/1.1 the persistent connection was introduced which
allows client to make multiple requests over the same
underlying TCP session
• Web 2.0 needed real-time communication i.e. low latency, full-
duplex connections
- Games, instant messaging, collaboration platforms
• Various “solutions” used
- AJAX, Comets, hackshacks...
2
Tuesday, October 25, 11

3. Polling
• Client issues new HTTP
requests with some interval
• Server must respond even if no
new data is available Client Server
Data available
HTTP Request
- Header overhead HTTP Response
• Defining the interval requires Data available
Data available
heuristics
• Latency issues
- Server must wait new requests
even if new data is already
available
3
Tuesday, October 25, 11

4. Long polling
• Server holds requests until an
event occurs (data becomes
available, timeout, ...) Server
• Client issues new requests
Client
HTTP Request Data available
immediately when old ones are
HTTP Response
responded Timeout
• Each request still needs HTTP
headers resent
Data available
Data available
4
Tuesday, October 25, 11

5. HTTP Streaming
• Uses HTTP/1.1 persistent
connection feature
• Server sends new data as
partial responds
Server
Client
• Several intermediaries might
Data available
cause problems for real-time
communication as traffic is Data available
traditional HTTP Data available
- proxies, caches, gateways
• Still timeouts and need for new
connections
5
Tuesday, October 25, 11

6. WebSocket
• Real-time, full-duplex communication
• Builds on top of HTTP
- Can share ports with basic HTTP(s)
- HTTP session is Upgraded to WebSocket
• URL Scheme uses ws:// and wss:// analogous to http:// and https://
• Messages are either UTF-8 text or binary data, no theoretical
maximum for message length
• Only small overhead for text messages (frames) after handshake:
- 0x00 for frame start, 0xFF for frame end (compared to
traditional HTTP handshake ~ 1K bytes)
6
Tuesday, October 25, 11

7. http://html5.org/tools/web-apps-tracker 7
Tuesday, October 25, 11

8. WebSocket handshake
Client requests connection upgrade
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Server responds
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat
8
Tuesday, October 25, 11

9. WebSocket API
9
Tuesday, October 25, 11

10. WebSocket Security
• Old protocol versions (hixie-75, hixie-76 /
hybi-00) susceptible for cache poisoning
attacks due to transparent proxies [a]
• Protocol allows origin policies
a: Huang; Lin-Shung, et al., Talking Yourself for Fun and Profit
10
Tuesday, October 25, 11

11. WebSockets in use
• Unified way to real-time full-duplex communication
- http://socket.io
• P2P communication
- http://browsersocket.org
- Morris-Pearse, Michael.; A Secure P2P Server in the Web Browser
• Online games, visualization
- Chen, B. (2011). A Framework for Browser-based Multiplayer Online Games using
WebGL and WebSocket. Architecture
- Wessels, A., Purvis, M., Jackson, J., & Rahman, S. (Shawon). (2011). Remote Data
Visualization through WebSockets
11
Tuesday, October 25, 11

12. References
• Loreto, et al., Bidirectional HTTP, Oct 2009
• Huang; Lin-Shung, et al., Talking Yourself for Fun and Profit
• Hickson; Ian,The WebSocket API, http://dev.w3.org/html5/
websockets/
• HTML 5 Revision Tracker, http://html5.org/tools/web-apps-tracker
• Morris-Pearse, Michael.; A Secure P2P Server in the Web Browser
• Chen, B. (2011). A Framework for Browser-based Multiplayer
Online Games using WebGL and WebSocket. Architecture
• Wessels, A., Purvis, M., Jackson, J., & Rahman, S. (Shawon). (2011).
Remote Data Visualization through WebSockets
12
Tuesday, October 25, 11

13. Demo
http://localhost:8888/
13
Tuesday, October 25, 11