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

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

Introduction HTML5 & W3C Full-duplex, bidirectional communication

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

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

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

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

WebSocket HTML5 Demo html5demos.com/web-socket

BrowserQuest

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

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

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: http://example.com Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Version: 13 Example server response HTTP/1.1 101 Switching Protocols Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

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

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

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

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

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

WebSocket Events Open Message Error Close

WebSocket Methods send() close()

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

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

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

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

Backwards Compatibility Inherent problem with web development Solutions https://github.com/gimite/web-socket-js http://socket.io

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

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