What the heck are WebSockets?!

The simplest way to describe a WebSocket connection is as a single Transmission Control Protocol connection allowing two different browsers to update/view the same page simultaneously, automatically, without refreshing. Without a WebSocket (or similar connection), if I were to post a Tweet, my followers would not be able to instantaneously view the Tweet on their page unless they manually refreshed the feed on their end.

In essence, it allows for real-time interactive communication between client browsers and servers. It allows bidirectional data flow, making it distinct from HTTP connections.

Technically speaking, there are other strenuous methods in achieving a similar functionality. However, WebSockets make everything much simpler. Therefore, for the course of this write-up I will be discussing WebSockets.

— Before WebSockets were introduced in 2008/2009 and released in 2011, the internet mostly consisted of static and ‘sort-of dynamic’ web pages. What I mean by ‘sort-of dynamic’ is that pages were indeed dynamic, but not as dynamic & secure as they could be with the implementation of WebSockets.

— How were web-apps ‘dynamic’ before WebSockets? HTTP Polling: the browser continuously pinging the server requesting new information. However this was inefficient, slow, and would cause overload on servers.

— Note: WebSockets are not meant to supersede AJAX or make them obsolete. However, they are the solution of choice for true real-time functionality. AJAX should still be used for making short-lived web service calls. WebSockets should be the go to standard for real-time functionality since they offer low latency multiple bi-directional communication over a single connection.

WebSocket Protocol functionality has now been built-in to browsers. However, to create a WebSocket server we need to implement a library within our code.

Depending on the coding language of choice, there are many tools/libraries available for us. For the sake of this write-up, I will be discussing WebSocket libraries that can be used with Node.js.

One of the most popular WebSocket library. Has been used in over 1.7m Github Repos and Starred 49.5k times. Has over 3,313,954m downloads/week on NPM. Noted to work on every platform/browser/device and provide reliability & speed. Also reliable in handling personal firewalls and anti-virus softwares. Socket.io is a free service.

Pusher-js library has been used in over 15k Github Repos and Starred over 1.4k times. Also works well with React, Angular, & Vue.js. Pusher is a paid-service.

Used by over 3.2m Github Repos and Starred over 7.1k times. SockJS tries to use native WebSockets under the hood first. SockJS gives you a coherent, cross-browser, Javascript API which creates a low latency, full duplex, cross-domain communication

Used by over 3.8m Github Repos and Starred over 13.9k times. Has over 25,168,594m downloads/week. Ws is simple to use, blazing fast and is a thoroughly tested WebSocket client and server for Node.js. It is described as ‘raw’ as it is not full of features, but features can be custom-created. It is meant to provide the basic WebSocket Protocol connection for client-servers.

WebSockets are the modern way to create real-time web apps. We can see they are superior to HTTP Polling, which is the old way of having ‘dynamic’ web apps. WebSockets provide lower latency and better stability. AJAX can also help create dynamic real-time web apps but they will not truly be ‘real-time’.

There are many libraries available for use. I have listed 3 free-to-use and 1 subscription-required library. Do your research to find which one suits your needs.

Recap of HTTP vs WebSocket Connection:

I hope this write-up was beneficial and introduced you to the basics of what a WebSocket is and some common libraries.

Related posts:

Polycystic ovary syndrome (PCOS) is a common endocrine disorder that affects women of reproductive age. Insulin resistance and hyperinsulinemia are commonly associated with PCOS and can contribute to…

The month of June will be remembered in the history of Krause House. Many things are happening at the same time and while the crypto market is not going through its best moment, events like the ones…

There is this concept name Vampire Power, which is the amount of energy that devices consume when in standby mode.