react后台管理系统websocket实现实时状态更新

Question

正在开发的一个项目，基于ant admin开源项目，现在有一个需求就是与后台建立socket连接，实现任务状态的自动更新，本人以前并没有这方面的开发经验，项目现在是http连接，根据后台的返回，通过参数传递给子组件显示，子组件是ant design的列表，需求要改成后台主动推送任务状态，那么问题来了：我该怎么改写这块？后台已经写好了还没测，会返回各任务的状态，主要问题在于只改写表格任务状态这一栏，让它成为socket连接，大佬们，指条路。。。。

Answer 1

socket连接 和 http链接只是通讯方式不同，接收到数据后http怎么操作的，socket就怎么操作

Answer 2

1.你需要一个socket的库，比如说socket.io-client
2.把库引入组件后，在constructor里

 this.socket = io.connect(server的地址);

3.在componentDidMount里给socket绑定上事件，比如

socket.on(事件的key, (msg) => {
    //msg是后台返回的数据，具体看你们后台返回的拿到数据后就可以操作了，改变state或者redux
});    

4.最好在componentWillUnmount里

this.socket.close();

因为我后端用的是socket.io，所以我用socket.io-client，这两个有没有匹配关系我就不知道了，大致的思路是这样的