Introduction About React Websocket: 

If you want to create a long-running connection between a client and a server then use React Websocket. Let’s take an example for instance. When a web client needs to regularly check the server for data then one thing is well known. If you’re using a REST-based implementation then it can lead to much longer polling time. It will also include a lot more complexities. 

WebSockets basically provide us a two-way system for communication. That system allows us to push the data from the server to the client. Basically, the use of WebSockets is very straightforward. But if you want to integrate it into the React and Redux based application then it gets quite tricky.  And it is not only tricky for new reactjs developers but sometimes for experienced ones too. We hope that this article will help you work well with Websockets in React application. 

 

Addition of Websockets:

To facilitate things such as socket communications in React, we will be making use of the de-facto library socket. In-client. We have to use the command: npm install -S socket.io-client for installing it. There are numerous ways to add WebSocket support for a React application. Each of the methods has its own advantages and disadvantages.

 

Implementing at Component Level:

In this method, we can easily assume that the WebSocket part as a separate utility. First, we should initiate a socket connection as a singleton at the AppComponent. After that, we can use this socket instance for the purpose of listening to the messages. These messages are very relevant to the particular component. This will completely segregate the implementations of the Redux and WebSocket. As a result, we can also make use of the pattern of plug and play. This method is very useful to implement WebSockets to a few components of any app that are already existing.

For example, what to do if we have an app for blogging purposes? And if we want to provide the options for push notifications that are real-time then we need the WebSockets.  These are used as the component of notification. And it will also be very clean to implement. But if the application is heavy on socket then this method will be very difficult. It is difficult for developers to maintain and develop. The function of socket utility works independently on its own. And it does not work well enough with the life cycles of React. Also, the process of multiple binding of events in every component will simply slow down the entire Application. 

 

Installing:

React-WebSocket is one of the React components that is easy to use that is required for WebSocket communications. In order to install React WebSocket module, we used:

npm install –save react WebSocket

Usage:

Using Websockets in React:

What is WebSocket?

Websocket API enables us to communicate in a two-way interactive session between a server and the user’s browser. With the help of this API, we can send and receive messages from a server. Also, they are event-driven and we don’t need to find the poll of the server to reply. So, in simple words, WebSocket helps you in maintaining two-way communication between the server and the client. Here, the client that we are using is the React app.

Why do we need Websocket?

Suppose you are a developer and you need to work on a project. Also, that project requires you to ping to the server in every 30 seconds. By doing this only we can tell the server that the application was still online. It also keeps track of the time of logging in and the duration.

Basic setup for React:

Usually, it is advisable to use only one instance of Websocket high up our component tree. You can pass it on down to other components after that.  This ensures that we are assuming that we are listening to a particular WebSocket present in our child components. 

In the code below you will find a component that is Main. This is because it assumes that it should work like the parent component for our child components. Firstly we create a new instance of the WebSocket as a class property by the name ws. Then in the componentDidMount method, we can subscribe and listen to some events provided by the Websocket to us.

onopen:

onopener event generates when the WebSocket connection establishes.

onmessage:

When we get data from a server, an onmessage event occurs.

onclose:

onclose event generates when the Websocket connection closes.

Event listeners must be available when the component renders in the DOM. So, in order to achieve that we have set it all up in the componentDidMount method. This allows us to listen to any of the events present on the Websocket instance without having to find the need of creating a new instance in every component we need to use that Websocket in.

However, there is still a problem with this setup. What if an error occurs or the Websocket connection closes due to any reason like network issues or the server is down etc.? In this case, the connection will not be re-established when the method componentDidMount is called again. It may reestablish when we refresh the page. But we obviously don’t want it to happen.

 

Redux Middleware Integration:

The introduction of the WebSockets as a middleware to the store is another popular approach. When we implement, one WebSocket connection will initiate in the init of the middleware. After that, the other socket’s events would delegate in an internal way towards Redux’s actions. In our article, you would be getting excellent directions on implementing the WebSockets. And this method is extremely ideal if the WebSocket is a core part of the application. And also if it is a tight coupling with a Redux that is very much expected then it is better.

If we face a socket failure then we can easily handle it and also the user can give feedback too. We should also keep in mind that there is only going to be a sible binding of events. And we know that each of the events maps to a particular action of Redux. Also, there will be no case of binding repetitively by any of the components. All the actions for the socket are being wrapped around a function. This enables us to gain firm control over the structure of the validations and the payload of the parameters. Every code that is related to socket is always available only in one location.

Although this feature is considered as an advantage, in some special conditions, this can also become a serious issue. But in the majority of the situations, we can consider it as an advantage.

Conclusion:

In this article, we have discussed a lot of different practical approaches for the integration of WebSockets in your already existing React or Redux application and we have also briefly outlined the three different patterns and then explored the strengths that they have and also the weaknesses. However, if you want a scalable and something maintainable to implement. Here, the React Context based approach is much more preferred over any other method.

 

Leave a comment