The Power Of Websockets

Then came the introduction of WebSockets, a technology that has changed the way web applications communicate with servers. Below we will explore what WebSockets are, how they work, and how we were fortunate enough to be involved in a unique project utilising WebSockets as a solution.

Background on the project we implemented

A client of ours had a specific idea for an annual gathering of their employees. The requirement was a unique “quiz” – employees would be broken up into different teams and each team would have a laptop on which they would answer certain questions… sounds simple enough right?

Well yes, but there were some caveats:

• All groups had to be doing this synchronously – when the questions showed up on the screen, all groups saw the questions at the exact same time.
• All questions were timed, meaning that each team would see the exact same counter on their screen.
• All information needed to be captured in real-time, so on each keypress and backspace, that data would be collected immediately on the server for each group – no need for any submission buttons.
• After a question round, the answers would be randomly distributed to other groups to rate the answers their peer groups gave. Again, each rating would be captured in real-time – who needs a submit button right?
• Scoring would be done in real time.

With these requirements, it was clear that a unidirectional web application model would not work, what was needed was a model that allows bi-directional, real-time communication between the groups and the server.

Enter WebSockets.

What Are Websockets?  

WebSocket is a communication protocol that enables bi-directional, real-time communication between a client and a server. Using WebSockets, both the server and the client can send messages to each other in real time, without the need for the client to repeatedly send requests to the server. This means that web applications can update their state in real time, providing users with an interactive and engaging experience. 

As for our client project above, we had a need for the server to communicate with the clients in terms of how much time was left and what the questions were they needed to answer, and in turn the client needed to communicate their answers to the server, also in real time.

How Do They Work?

WebSockets work by establishing a persistent connection between the client and the server. The client sends an initial request to the server to establish this connection, after which they can exchange messages in real time.

The WebSocket protocol consists of two parts: the handshake and the data transfer. The handshake is the initial exchange between the client and the server that establishes the WebSocket connection. Once the handshake is complete, the client and the server can exchange data using the WebSocket protocol.

For the project, each group would log in with a unique username and password, which would establish the persistent connection. If they closed their browser by accident, their session was stored and would automatically show them where they were as if they hadn’t closed their browser.

What Are The Benefits?  

Secure Communication

WebSockets use the same security mechanisms as HTTP, including TLS encryption, ensuring that all communication between the client and the server is secure. This makes WebSockets an excellent choice for building real-time applications that require secure communication between the client and the server.

We did not want other team members taking a sneak peek at the other group's answers in real time!

Low Latency

Another benefit of WebSockets is their low latency. WebSockets establish a persistent connection between the client and the server, which in turn creates very little latency in communication. This makes WebSockets ideal for applications that require real-time updates, such as chat applications or in our case, a bi-directional “quiz” web application.

Conclusion  

WebSockets have transformed the way web applications communicate with servers, enabling bi-directional, real-time communication between a client and a server. By combining WebSockets and GraphQL, our developers can create responsive and efficient web applications that deliver a highly interactive user experience.

Utilising WebSockets for this project allowed a highly flexible approach to achieving a short turnaround time for a successful launch. The quiz days went extremely smoothly and the end result was a very happy client.

If you’re interested in creating customised web solutions that incorporate the latest technologies to improve your user experience, then get in touch – we’d love to help you bring your vision to life!