WebSockets and How I Used Them

It goes by many names; WebSockets, The WebSocket Protocol, and The WebSocket API. From your preferred messaging application to a popular online multiplayer game, WebSockets are crucial and implemented in some of today’s most used web applications.

A WebSocket, by definition, is a computer communications protocol providing a full-duplex (communication in both directions) communication channels over a single TCP connection. This WebSocket API makes two-way communication possible between the user’s browser and a server. The user can send messages to the server and receive event-driven responses without having to poll the server. It can have multiple users connect to the same live server and communicate and get responses back instantly with the API.

WebSockets allow for a streaming connection between a user and a server and allow for instant information exchange. In the example of a chat application, with messages being funneled through the socket, you exchange with one or multiple users in real time, depending on who is “listening” (connected) on the server.

WebSockets are not only limited to chat/messaging applications. They are applicable to any application that needs live updating and instantaneous information exchange. Some examples include but not limited to: live sports updates, stock tickers, multiplayer games, chat applications, social media feeds, so on and so forth.

WebSockets also account for hazards such as proxies and firewalls making streaming possible on any connection. It supports the upstream and downstream communications over a single connection. It also places less burden on servers, allowing existing machines to support simultaneous connections.

Here’s an example implementation WebSockets in a modern web application. In the example below, I used WebSockets for an instant messaging application with a Rails 5 API backend and a React.js Frontend. This is by no means a guide but rather an example of how it COULD be used. I used Action Cable, a wrapper for Rails that seamlessly integrates the prime features of WebSockets in Ruby and allows for easy implementations across a full domain model. It’s built into Rails 5.2, so there’s no need for any external libraries or gems to install/execute.

It works on the principle of Pub-Sub (publishing and subscribing). It works with senders sending data (publishers) to an abstract number of recipients (subscribers) without specifying who they are.

The first step was to mount the server in your routes file so that your frontend gets an endpoint to stream from:

On line 5, I setup the ActionCable server endpoint

The next step was to create a channel on the backend to stream the messages as they are being created in real time.

Here is the messages channel that manages message creation as well as broadcasting the message

Here we have two methods, subscribed and received. The first method, subscribed, allows the messages channel to be streamed to the connected users, or the subscribers. The second method, received, manages message creation and broadcasting the message. I implemented JWT user authentication so that the messages can be traced back to the user and only those with valid user accounts can create a message.

For the frontend of my application I used them npm package actioncable to connect to the WebSocket API from client side to server side. This package is directly from the team that works on Rails. With this library, I instantiate an instance of cableApp and pass it down as props to the component that needs access to the WebSocket connection.

Imported actionCable and created a cableApp instance, then connected the cableApp to my backend endpoint “/cable” and passed it down to the component that needed the connection

I then wired in the connection to the WebSocket through a React.js lifecycle method componentDidMount() and established a connection every time the component was mounted to the DOM.

In componentDidMount() I established the client to connect to the WebSocket protocol which is streaming from the “messagesChannel” from my Rails API.

Now every time a message is created and sent to the receive method, the subscribe(d) users will instantly receive and be able view the message in real time. This implementation supports multiple users subscribed to the same channel. So if multiple users are signed and subscribed to the same channel they can send messages that all the subscribers will be able to see as well as receive messages from other subscribers. Of course you could limit it two people and make it peer to peer but where’s the fun in that.

I hope that by reading this you can see the potential of WebSockets. It provides itself as a valuable resource in a day and age in which information exchange needs to be done very quickly. Hopefully you as the reader will implement them in a project of your own.