HTML5 Websockets Norman White 2013

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: Server Response: HTTP/ 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.