WebSockets & how to build Real Time Applications (RTAs)

The why and how of WebSockets and Real Time Applications

Web DevelopmentUPDATED ON January 26, 2022

cover image for blog post on building progressive web apps with JavaScript and websockets

From social media feeds to chat and video conferencing apps, online gaming, embedded systems in IoT devices,  Real-Time Applications (RTAs) are today among the most-used and influential categories of software. RTAs update informationas soon as it is published by its authors, rather than requiring that they or their software check a source periodically for updates.

Persistent connections and broadcasting to connected clients is now part and parcel of many modern applications.  If a web app is not simply serving static content, eg. a B2B website on either a traditional monolith web platform like WordPress or microservices-based Jamstack, users have come to expect Real-Time features.

Can We Help You With Your Next Web Development Project?

Flexible models to fit your needs!

How Does a Real-Time Application Function?

The way an RTA functions relies mostly on real-time API mechanisms, of which there are four in total:

  • HTTP streaming
  • HTTP long-polling
  • Webhooks
  • WebSockets

The role of WebSockets in RTAs

The low-latency update of content in RTAs (usually populating within milliseconds to seconds after being published) is made possible by WebSockets API technology. WebSockets open a two-way interactive communication session between the user’s browser and a server. Messages can be sent to a server and receive event-driven responses without having to poll the server for a reply.

Let’s look a little more closely at WebSockets and polling as they represent the basic operating principle of an RTA.

Polling

Here is how polling functions:

  1. There are certain time periods after which a request is sent to the server to check for updates in the form of a vote;
  2. The server on its side looks for any updates. If there are any, it confirms it by sending an up-vote. If not, it replies with a down-vote.
  3. At the user end, if the server casts an up-vote, the system further asks for the updated data, which is then passed by the server.
  4. Once this process is over, requests are sent again to the server at the regular time intervals.

Ajax is chosen because of being lightweight and able to update parts of the page without reloading it entirely. The only issue is with the bandwidth, which is later resolved with the help of a method called long polling. According to the method, an HTTP request stays up until a new message is sent by a server.

Long Polling via Ajax

Long polling via Ajax

Today, these approaches might be still used, yet most developers tend to use other ways of achieving server-push.

Comet

When discussing polling and long polling we have to mention Comet. This is basically a neologism that describes a web application model. In the usual cycle of request processing, the client initiates the connection and requests the document of interest. After the data is returned, the connection is broken. In the case of Сomet, the server initiates the connection and sends a message to the client. Good examples of Comet is notifications in Facebook, Twitter, chat in Gmail, etc.

The reason it’s mentioned in conjunction with polling is that Comet includes and is realized through polling, long-polling, and even HTML5 WebSockets, which we’ll discuss further.

WebSockets in Real-Time Applications

Back in 2011, the WebSockets protocol appeared. Its primary function is to provide a bi-directional communication channel. This allows a browser and a web server to interact, providing them with a two-way persistent connection, within which they can send messages back and forth while the connection is open.

The WebSockets protocol is immensely important for the responsiveness of an application, which usually has many concurrent connections and quickly changing content. A good example of this would be a multiplayer online game.

Where are WebSockets used in Real-Time Applications?

WebSockets are increasingly popular in contemporary web development and can be implemented for some of the following kinds of application:

  • Chat applications: Video and audio conferencing applications
  • Multiplayer online gaming
  • Social feeds
  • Simultaneous file sharing
  • stock market monitoring
  • sports updates
  • an online broadcast, etc.

Examples are: Blockchain, Coinbase, CBIX, Slack

Developing a WebSockets-based RTA – tech stack

If you wanted to develop an RTA based on a WebSockets API, what technology stack would you use? 

For the runtime environment and distributed application framework:

WebSockets in RTAs

For your database

Database for Use In Real Time Applications

Your toolkit for Server-Side templating

Server-side Templating Tools For Real Time Applications

The K&C team hopes you found this article useful as a brief introduction to Real-Time Applications and WebSockets. If you still have questions or would like to discuss your next application project with us, don’t hesitate to reach out. Just click on the banner below!

K&C - Creating Beautiful Technology Solutions For 20+ Years . Can We Be Your Competitive Edge?

Drop us a line to discuss your needs or next project