At first, there was HTTP. We used our Mosaic web browsers to view text, hyperlinks and images on the web. Then in 1998, after the first browser wars, Microsoft introduced the XmlHttpRequest object to enable pushing of data into their Outlook Web Client on Internet Explorer. This sprouted the use of AJAX in all of our web applications. Server side generated web pages quickly transformed into Single Page Apps that load only data from the backend, while running the UI in the browser.This gave rise to the second generation of web browsers, that developed more and more client side APIs to allow for rich user experiences. One of those exciting APIs is Websockets, which allows for high speed, bidirectional communication with a server.

So, what is it?

WebSocket is a protocol (RFC-6455) for bi-directional, low latency, peer-to-peer communication. It works as an 'upgrade' over HTTP and provides a TCP-like two-way socket with very little overhead.

But we already have TCP sockets?

True, but:

WebSockets exchange complete messages, instead of raw bytes.

This one is available in your browser via a simple JavaScript API. How about that, TCP socket?

They are equally awesome, though :)

Why would I use it?

If you need a peer-to-peer connection with a server where unlike in HTTP, both server and client can initiate a conversation.

Or, if you need a high speed connection to transfer text or binary data. Since the messages themselves don't require enormous headers like HTTP does, communication is very efficient.

Examples:

To process multiple user’s input for an online game

To perform home automation, e.g. controlling/dimming a light

Creating a dashboard application with a lot of status updates

Creating a machine control UI that requires real time interaction

Can I use it?

Spoiler alert: YES!

It is available natively in all browsers and for most programming languages using a library: C++, C#, Java, Swift, Obj-C, Python, JavaScript, Arduino, NodeJS, etc. Technically, if you are on a modern platform and are already using HTTP, you should be good to go.

Enough already, show me how!

Here is a pseudo interface definition for WebSockets, it is pretty similar across all major programming languages.

interface WebSocket {

  void onOpen();

  void onMessage(message)

  void onClose();

  void onError(error);

  void send(message);

}

In a web browser, you will instantiate a new Websocket object and implement the onMessage(message) callback and send(message) method at the least. To provide some robustness you should of course also handle any errors and open/close events, but that's basically it. You can send any text or binary immediately, but you will have to devise (or use an existing and useful) protocol to talk with the other side. Have a look at the basic tutorial linked in the 'further reading' section for an example.

Any drawbacks?

You have to decide what you want to ‘talk’ yourself. There is no grammar like in HTTP, which provides an excellent template for communication styles such as REST. A good choice for a control interface is JSON-RPC. If you use Kodi (the former XBMC) and a remote control app on your smartphone, you are using JSON-RPC over WebSockets.

Each connection is stateful and must be held open on the server. With enough RAM, this shouldn’t be a problem, although the memory specifications on embedded hardware like Arduinos could be tight for big applications.

The most important one of course: you have to forget using AJAX, Comet, long polling, etc. and instead start using Websockets for anything asynchronous!

Further reading

Nice basic tutorial on HTML5Rocks: https://www.html5rocks.com/en/tutorials/websockets/basics/

Mozilla MDN page about the WebSockets API: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

WebSocket article on Wikipedia: https://en.wikipedia.org/wiki/WebSocket

Jeroen Brosens, Software Architect