HTML5 Websockets

Norman White2013

Websockets

• The HTTP protocol is not designed for a continuous connection between the client and the server, but rather for a sequence of requests from the client to the server.

• HTML5 introduced the “websocket” feature, which allows a long lasting bidirectional connection to be made between the client and the server. This feature is called websockets.

Advantages

• The WebSocket protocol makes possible more interaction between a browser and a web site, facilitating live content and the creation of real-time games. This is made possible by providing a standardized way for the server to send content to the browser without being solicited by the client, and allowing for messages to be passed back and forth while keeping the connection open. In this way a two-way (bi-directional) ongoing conversation can take place between a browser and the server.

• If used from a mobile device, this opens up many interesting scenarios, like multiperson, realtime chat etc. (Think Google hangout!).

Usage

• To use websockets, the client issues a websocket handshake request and the server responds

Client Request:

GET /mychat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat Sec-WebSocket-Version: 13 Origin: http://example.com

Server Response:

HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat

Takeaway

• In HTML5, many new types of applications are available that were extremely difficult, if not impossible earlier.

• Also includes:– Webstorage – local storage on user device – Canvas – ability to draw on user device– Webworkers – ability to run background processes– Video element– …

• Most of these are supported by most mobile devices.