DEV Community

Cover image for A Blueprint to Avoid Multiple WebSocket Connections in a React Chat App
Abirami Elangovan
Abirami Elangovan

Posted on

A Blueprint to Avoid Multiple WebSocket Connections in a React Chat App

With over 5.18 billion internet users across the globe as on April 2023, every business with an internet presence is vying to attract more customers. However, to stand out from the intense competition of retaining existing customers and acquiring new customers, it is vital to build a personal relationship with the audience. That is made possible through chat applications.

The workings of any chat app involve a WebSocket to facilitate real-time communication. When a user joins a channel, a WebSocket connection gets created. The financial burden on the business grows when multiple connections get created for a user. Let’s discuss ways to avoid concurrent WebSocket connections in chat applications below.

Definition of Chat application

Chat App is an app that facilitates voice and text communication of two or more participants in real-time. Its users can share images, videos, documents, and screens with other participants on the chat window. One-on-one and group communication is made possible.

Definition of WebSocket

It is an internet protocol that enables real-time communication between web browsers and web servers. Two-way communication is enabled, so the messages get delivered at lightning speed. With the help of WebSocket, information can be transmitted to several connected browsers at once on self-managed chat apps. It is highly beneficial for gaming apps.

Definition of the WebSocket Connection

The connection between a user’s browser and the chat app’s server is termed a WebSocket connection. Every time a fresh data set is available, it is automatically transmitted. When every user of the app connects to the app, a WebSocket connection gets created in the React chat app.

Expenses of Concurrent Connections in a White-Label Video Chat App

As explained above, every time a user attempts to establish a connection with the chat application, a WebSocket connection is created. This means, if a particular user connects multiple times, concurrent connections are created. If this is the same case with multiple users, a lot of concurrent connections will be established. This would drastically shoot up the expenses of the business in maintaining its customizable chat application.

Since chat apps are used by businesses for first-time inquiries, customer support, pre-sales, post-sales support, etc., the number of people utilizing the chat app would be high. For each concurrent connection, charges are levied on the business. As this becomes the case for multiple users, the business will have to bear high charges to keep the chat support going.

Since this is a recurring expense, it proves to be a burden to small businesses and multinational corporations alike.

A user can generate concurrent connections in a scalable chat app in two ways. In a single web browser tab, multiple chats are initiated by the customer which creates multiple connections.

The user opens several browser tabs in a single web browser window thereby creating multiple connections in the scalable video chat app.

Concurrent Websocket Connections in Different Web Browser Tabs

An individual might open a business’ website on multiple web browser tabs of a browser window or multiple windows. Individuals might do it because the website might not be loading, or they might not want to wait until a support agent gets connected to their chat request. It might prompt them to initiate multiple chats. Individuals might also be browsing through different website pages while having a conversation with the chat agent. Multiple chat connections are created in such scenarios, creating multiple WebSocket connections in the React chat SDK.

If you are a registered user, you can open multiple tabs for the same chat application.

You will get the same events, UI updates, and payloads in each tab using a single tab at a time. So, what's the purpose of leaving the other concurrent connections open?

To resolve this, check if the chat app's browser tab is open. If it isn't, we disconnect the user; if it is, we reconnect the user. If the user uses several tabs for the video call chat app, only one connection will be active at a time.

The Page Visibility API in your browser, which is currently supported by all browsers, can inform you if a page is active or not.

But what if a user exits a browser and then comes back seconds later? You might want to disconnect and rejoin them, which would be troublesome for the user. However, to improve the overall user experience, we can add a pause/delay before disconnecting the user.

Summing Up

We hope now you got a better insight into concurrent connections, the expense of integrating them in your white-label video chat app, and how to save money by eliminating multiple connections made by a single user.

Top comments (0)