HTML5 - WebSockets T-111.5502 Seminar on Media Technology Harri Hämäläinen harri hamalainen aalto ﬁTuesday, October 25, 11
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... 2Tuesday, October 25, 11
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 • Deﬁning the interval requires Data available Data available heuristics • Latency issues - Server must wait new requests even if new data is already available 3Tuesday, October 25, 11
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 4Tuesday, October 25, 11
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 trafﬁc is Data available traditional HTTP Data available - proxies, caches, gateways • Still timeouts and need for new connections 5Tuesday, October 25, 11
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) 6Tuesday, October 25, 11
http://html5.org/tools/web-apps-tracker 7Tuesday, October 25, 11
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 Proﬁt 10Tuesday, October 25, 11
WebSockets in use • Uniﬁed 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 11Tuesday, October 25, 11
References • Loreto, et al., Bidirectional HTTP, Oct 2009 • Huang; Lin-Shung, et al., Talking Yourself for Fun and Proﬁt • 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 12Tuesday, October 25, 11
Demo http://localhost:8888/ 13Tuesday, October 25, 11
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.