在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ react后臺管理系統(tǒng)websocket實現(xiàn)實時狀態(tài)更新

react后臺管理系統(tǒng)websocket實現(xiàn)實時狀態(tài)更新

正在開發(fā)的一個項目，基于ant admin開源項目，現(xiàn)在有一個需求就是與后臺建立socket連接，實現(xiàn)任務狀態(tài)的自動更新，本人以前并沒有這方面的開發(fā)經(jīng)驗，項目現(xiàn)在是http連接，根據(jù)后臺的返回，通過參數(shù)傳遞給子組件顯示，子組件是ant design的列表，需求要改成后臺主動推送任務狀態(tài)，那么問題來了：我該怎么改寫這塊？后臺已經(jīng)寫好了還沒測，會返回各任務的狀態(tài)，主要問題在于只改寫表格任務狀態(tài)這一欄，讓它成為socket連接，大佬們，指條路。。。。圖片描述

回答
編輯回答
默念

1.你需要一個socket的庫，比如說socket.io-client
2.把庫引入組件后，在constructor里

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

3.在componentDidMount里給socket綁定上事件，比如

socket.on(事件的key, (msg) => {
    //msg是后臺返回的數(shù)據(jù)，具體看你們后臺返回的拿到數(shù)據(jù)后就可以操作了，改變state或者redux
});

4.最好在componentWillUnmount里

this.socket.close();

因為我后端用的是socket.io，所以我用socket.io-client，這兩個有沒有匹配關系我就不知道了，大致的思路是這樣的

2017年10月17日 20:45
編輯回答
囍槑

socket連接 和 http鏈接只是通訊方式不同，接收到數(shù)據(jù)后http怎么操作的，socket就怎么操作

2017年1月20日 11:22