使用DvaJs订阅websocket消息
React通过DvaJs订阅websocket消息
需求:
- 前端采用React框架与后端通讯采用websocket的方式,客户端页面发送信息到后端,后端返回数据;
- 后端会持续向前端发送参数,前端用表格显示数据;
需求分析:
- 如果仅仅是发送消息到后端,后端返回数据,可以使用http协议,但是如果要持续接收后端的数据,采用轮训的方案会降低性能,那么我们采用了websocket的方式,保证前后端通讯不中断。
- 前端的页面会跳转,但也要实时接收并展示数据,需要采用上层的数据流方案。出于操作方便,采用了DvaJs,Redux同理。
引入Dvajs
建立model,model示例内容
export default {
namespace: "Main",
state: {
currentState: null,
},
subscriptions: {
},
reducers: {
changeLeftState(state, action) {
let _state = JSON.parse(JSON.stringify(state));
console.log(action.data)
_state.currentState = action.data;
return _state;
},
},
};
subscription是订阅。
引入websocket
新建个websocket方法文件
var IP = 192.168.0.11;
var PORT = 1234;
var URL = `ws://${IP}:${PORT}`;