Cover Image source: LogRocket Blog

Intro

Imagine logging onto Facebook with the intention of talking to your sibling. You navigate to the messenger page. You type in your message and press the send button. You wait a moment and then refresh the page. Nothing changes. You wait another moment and press refresh again. Still nothing. You leave your computer and do a load of laundry before returning your computer and clicking refresh. FINALLY. The response from your sister loads with a timestamp from 5 minutes ago. You type in your next message, refresh the page, and the cycle continues.
Clearly, this is not how the modern messenger app works! Having to refresh the page every time you want to check for new messages is extremely inefficient. In order to meet the demands of modern real-time web applications, WebSockets were created.

Image source: PI Web API 2017

What are Websockets?

• Websockets were created in 2011, and have rapidly gained popularity and utilization since.
• They allow 2-way communication between browser and server via a single TCP connection.
• Compared to the normal HTTP ‘handshake’ protocol where the client has to request data from the server, this 2-way communication allows both the server-side and the client-side to initiate communication.

What kind of features can we create using WebSockets?

Image source: Pusher Channels

There are an incredible number of real-time features that we use and interact with in our everyday life.
These include

• Instant messaging
• Notifications
• Livestreaming
• Live Tracking (i.e taxi and delivery services)
• IoT devices (i.e smart devices)

Image source: Ably.io

Why not just use AJAX calls?

Simply put, AJAX requests and responses do not create a persistent connection between client and server. This can create a significant strain on the server as user traffic increases.
They are less reliable for message ordering and receiving. In some circumstances, the user may accidentally send messages twice or may not receive any message at all.

Are there any drawbacks to using Websockets?

Some WebSocket libraries may not be supported by older browsers
However, this is becoming less of an issue in 2020; 97% of browsers support Websockets.

What WebSocket Libraries are Available and Which to Use?

There is a plethora of libraries and services available for adding real-time features to an app. Some of the more popular ones are:

Socket.IO

• Beginner-friendly- simplifies creation and management
• Fallback mechanisms include reverting to HTTP polling if the WebSocket is not able to connect, and auto-reconnection
• Disconnection detection
• Ability to connect even if there are proxies, load balancers, firewalls, and antivirus software present
• Also available to use in Java, C++, Swift, Dart, Python, and .Net

Firebase

• A good choice for both mobile apps and web apps
• Accounts for scaling as your app grows
• Provides analytics and performance monitoring data
• Has many extensions and functions available for add-on. Some of which include machine learning, cloud storage, and Google Ads
• Also available in C++ and Unity

WS

• A popular user/server library for NodeJS
• It is fast, simple, and well tested
• Supported by almost all browsers
• Has additional modules available

Is it worth paying for a Websocket API?

A few APIs require a subscription for apps using their services that are over a certain traffic load. Scalability vs performance is a major hurdle to consider when building a web application. For projects with a large user base, it may be worth it to pay the subscription fee to easily eliminate this issue and channel the team’s energy into a more worthy cause, such as improving the application’s features.

Pusher

• Easy to implement
• Is free under a certain traffic threshold
• Boasts 99.997% Uptime
• Provides support to over 40 libraries and SDKs and prioritizes WebSocket support
• Allows your app to easily host millions of messages a day and thousands of concurrent users

PubNub

• Easy to implement
• Boasts 99.999% Uptime
• Provides support to over 70 libraries and SDKs *Prioritizes HTTP transport protocol but has access to libraries that can implement a WebSockets protocol. Although, WebSockets are the more efficient method, this will ensure there are no connectivity issues regarding proxies, firewalls and anti-virus software.

The Future of Websockets

Are Websockets being replaced by something bigger and better? As of 2021, not really. But there are a couple of newer real-time options that developers should keep an eye on.

WebRTC

• A Javascript library tailored toward video and audio communication
• Does not require the user to download and install any plugins or apps

WebTransport

• An API that is aiming to be a faster and more reliable version of Websockets
• It is still relatively new and unstable but is continuing to be developed

Resources

1. Is this the end of WebSockets? - The New WebTransport Protocol
2. A Beginner's Guide to WebSockets - YouTube
3. A Starter Guide to Building Real-time Applications with Node.js
4. Why use AJAX when WebSockets is available?-Stack Overflow
5. Building Real-Time Web Apps: Options in 2020 | by Artur Iatsko | Medium
6. Beyond REST: Using WebSockets for two-way communication in your React app - LogRocket Blog
7. A WebSocket Implementation for Node.JS
8. Fundamental performance and scalability concepts - Web application performance and scalability
9. Using Firebase To Provide Real-time Notifications | by Amit Ashwini
10. Socket.IO
11. Firebase
12. WebRTC
13. WebRTC - Wikipedia
14. WebTransport
15. WebSockets vs Long Polling | Ably Blog: Data in Motion
16. How Do Websockets Work? - Kevin Sookocheff
17. 10 Best WebSocket Libraries That You Should Know - Geeky Humans