javascript websocket reconnect

Auto WebSocket Reconnection with RxJS

WebSocket is a protocol of full-duplex communication over a TCP connection, intended for the exchange of messages between the browser and the web server in real time. Its peculiarity is that transmits and receive simultaneously.

The WebSocket protocol is created to solve any problems and remove restrictions on the exchange of data between the browser and the server.

It allows you to forward any data to any domain, safely and with little or no network traffic. The draft version of the standard of the Web Sockets API is approved by the IETF.

WebSocket is created to be implemented in web browsers and web servers, but it is also used for any client or server application. The WebSocket is an independent protocol. It is based on the TCP protocol. It allows to make a closer interaction between the browser and the website, facilitating the dissemination of interactive content and the creation of real-time applications.

RxJS is a powerful tool that allows you to turn complicated sequences of actions into a concise code, which is simple to work with.

The use of RxJS in React is similar to its use in Angular, where the observed objects are the full entity of the system, hence the special simplicity of using this technology in Angular. However, this is not more difficult than subscribing to RxJS in component DidMount and writing to component WillUnmount. The difference is that in Angular these mechanisms are built in, and in React you have to implement everything manually.

This simplicity is based on a variety of language mechanisms, and their study takes time. In RxJS, the problem to be solved is the ability to handle asynchronous calls using multiple events. RxJS provides a way to eliminate these constraints, giving multiple communication channels, which simplifies multi-step event process and improves its efficiency. RxJS, in addition, gives the developer the ability to consistently represent everything that needs to generate events.

The WebSocket connection doesn’t work based on the request-response principle, instead, a persistent connection is established between the client and the server, where both parties can initiate data exchange. When we restart the server, this connection is disabled, and we need to somehow restore it.

There may be two templates: Observable (it is exploit to subscribe to data and events coming from the server) and Observer (it is exploit to send data to the server).

Websocket example

Create a small template with a text field in which the connection log will be recorded, and a button will appear to send the message.

First, we need to create a connection. Then we subscribe to the click event for the button and send the message to the handler. We also subscribe to messages from the server and write them in the text field. Then we subscribe to the connection state and lock the button when the connection is lost.

Part of the server is very simple, we install RxJS the monitored connection to the web server, and when connecting or disconnecting we send events to all clients.


Igor Grigorenko

Add comment