Why WebSockets Are Useful for Immersive Experiences

When real time communication is needed, WebSockets provide for a fast and reliable solution that perfectly suits immersive and interactive environments. Let’s look at how.

First, what is WebSocket? It is a bidirectional, full-duplex protocol for client-server communication over a single TCP connection. With WebSocket, both the client and the server can send data to each other at any time. A single server can manage multiple connections simultaneously as well as multiple connections with the same client. It is a stateful protocol, to say that the connection between the client and the server is kept alive until is terminated by both the client or the server.

The origins of WebSocket date back to 2011, when the WebSocket Protocol RFC 6455 was published. Today it is standardized by the World Wide Web Consortium (W3C) and the Internet Engineering Task Force (IETF).

WebSocket is supported on almost every browser – although older versions could have compatibility issues – and runs on Android and iOS platforms. It differs from traditional HTTPS connections for several aspects:

• WebSocket is a bidirectional protocol, whereas HTTPS is based on a request-response model
• HTTPS is a stateless protocol while WebSocket is a stateful protocol
• HTTPS connections use https:// while WebSocket uses ws:// or wss://

Message Structure

A simple example of WebSocket message structure is shown below*. The client sends a handshake request and the server sends a reply.

Example request

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

Example response

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

*Credits: Wikipedia

Several libraries are available as well for WebSocket management. Here is a short list:

• Socket.IO: this is one of the most known libraries that features fallback options, automatic reconnection and support for various transports. It supports multiple languages such as Python, Javascript and Java.
• WS: this is a WebSocket implementation for Node.js, providing an API for creating WebSocket servers and clients. It is a good way to integrate WebSocket into Node.js applications.
• Django Channels: this is a WebSocket library for real time applications – such as chat and messaging –  in the Django web framework.

WebSocket is a clear and elegant protocol, that can pave the way for interesting, real time applications. Let’s have a look.

WebSocket traditional applications

As we saw in the previous paragraphs, WebSocket finds its best in real time and event-driven applications. It is therefore the right choice when interactivity between multiple users is required.

In this perspective, traditional WebSocket applications include:

• Real time web applications: for those who are familiar with financial markets and/or cryptocurrencies, trading websites are built on WebSocket to continuously update prices and charts, without the need for refreshing communication with the server.
• Chat applications: chat platforms make use of WebSocket to provide users with real time publishing, sharing and message broadcasting, establishing efficient one-to-one and one-to-many connections.  
• Gaming applications: in gaming platforms, data are received by the server in real time to update clients UI without friction, thus speeding up the whole experience.

WebSocket for Immersive Experiences

What about integrating WebSocket in our lovely interactive and immersive projects? Let’s see an example.

So, you are developing an interactive installation and your goal is to make users interact simultaneously in real time. Maybe your project is a visual environment, or a generative audio project, or everything in between. Well, with WebSocket you can.

First, you can create a custom UI on a webpage, for example a set of sliders or a joystick. There are plenty of ready-to-use templates on GitHub or similar. Then you can integrate a WebSocket script into the UI and send users data – such as joystick X and Y coordinates – via WebSocket on your favourite software, be it Touch Designer, Unreal, Max/MSP and son on.

Once data have been received on your programming environment, you can parse and store them and assign them as variables for interaction purposes.

By accessing the webpage on their smartphones, users will be able to interact with your installation in an engaging and immersive way.  

Does that sound intriguing? Well, that’s what we will dive into next time!