使用DvaJs订阅websocket消息

React通过DvaJs订阅websocket消息

需求:

  1. 前端采用React框架与后端通讯采用websocket的方式,客户端页面发送信息到后端,后端返回数据;
  2. 后端会持续向前端发送参数,前端用表格显示数据;

需求分析:

  1. 如果仅仅是发送消息到后端,后端返回数据,可以使用http协议,但是如果要持续接收后端的数据,采用轮训的方案会降低性能,那么我们采用了websocket的方式,保证前后端通讯不中断。
  2. 前端的页面会跳转,但也要实时接收并展示数据,需要采用上层的数据流方案。出于操作方便,采用了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}`;

整合

posted @ 2023-07-31 14:34  纳博特科技-小纳  阅读(35)  评论(0编辑  收藏  举报