React background management system websocket realizes real-time status update

A project under development, based on the ant admin open source project, now has a requirement to establish a socket connection with the backend to automatically update the task status. I have no previous development experience in this area. The project is now a http connection. According to the return of the background, the subcomponent is passed to the sub-component through parameters to show that the sub-component is a list of ant design, and the requirement should be changed to the backend active push task status. So the question is: how do I rewrite this piece? The background has been written untested, will return to the status of each task, the main problem is to rewrite the table task status column, let it become a socket connection, bosses, show the way.

Antdesign redux dva.js react.js

Mar.15,2021

socket connection and http link are just different in communication. After receiving data, socket operates as http does

1. You need a library of socket, such as socket.io-client
2. After introducing the library into the component, in constructor

 this.socket = io.connect(server);

3. Bind events to socket in componentDidMount, such as

socket.on(key, (msg) => {
    //msgstateredux
});

4. Better be in componentWillUnmount

this.socket.close();

because I use socket.io, at the back end, I don't know if there is a match between the two socket.io-client,. The general idea is this

Previous: How to configure quilleditor in Chinese?

Next: Python contour map