【jeecg-boot】jeecg-boot实时数据推送-websocket的使用

本实例以改造的全局的消息推送为例

 

因为是全局的消息推送，所以必须得在全局的界面去写

参考的是官方的消息推送的例子，然后做了共性的处理，便于其他业务使用

前端：

创建公共的websocket处理文件：xscommonwebsocket.js

//变量
const xsws ={
  websock:null,
  lockReconnect:false,
  heartCheck:null,

}

export  default  xsws
export function  initWebSocket(pageType,userId,paramUrl) {
  // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
  // var userId = store.getters.userInfo.id;
  var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/xsiotwebsocket/"+pageType+"/"+userId;
  if (paramUrl!=null&&paramUrl!=""){
    url += "/"+paramUrl;
  }
  console.log(url);
  xsws.websock = new WebSocket(url);
  xsws.websock.onopen = websocketOnopen;
  xsws.websock.onerror = websocketOnerror;
  // xsws.websock.onmessage = websocketOnmessage;
  xsws.websock.onclose = websocketOnclose;
  xsws.lockReconnect = false;
}
export  function websocketOnopen () {
  console.log("WebSocket连接成功");
  //心跳检测重置
  xsws.heartCheck.reset().start();
}
export  function websocketOnerror(e) {
  console.log("WebSocket连接发生错误");
  reconnect();
}
export  function websocketOnmessage(e) {
  console.log("-----接收消息-------",e.data);
  var data = eval("(" + e.data + ")"); //解析对象
  console.log("接收到的信息："+e.data);
  //心跳检测重置
  xsws.heartCheck.reset().start();
}
export   function websocketOnclose(e) {
  console.log("connection closed (" + e.code + ")");
  reconnect();
}
export  function  websocketSend(text) { // 数据发送
  try {
    xsws.websock.send(text);
  } catch (err) {
    console.log("send failed (" + err.code + ")");
  }
}

export  function  reconnect() {
  if(xsws.lockReconnect) return;
  xsws.lockReconnect = true;
  //没连接上会一直重连，设置延迟避免请求过多
  setTimeout(function () {
    console.info("尝试重连...");
    initWebSocket();
    xsws.lockReconnect = false;
  }, 5000);
}
export  function  heartCheckFun(){
  //心跳检测,每20s心跳一次
  xsws.heartCheck = {
    timeout: 20000,
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function(){
      clearTimeout(this.timeoutObj);
      //clearTimeout(this.serverTimeoutObj);
      return this;
    },
    start: function(){

      this.timeoutObj = setTimeout(function(){
        //这里发送一个心跳，后端收到后，返回一个心跳消息，
        //onmessage拿到返回的心跳就说明连接正常
        websocketSend("HeartBeat");
        console.info("客户端发送心跳");
        //self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
        //  that.websock.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
        //}, self.timeout)
      }, this.timeout)
    }
  }
}

export  function  websocketclose() {
  xsws.websock.close();
  xsws.lockReconnect = true;
  console.log("关闭websocket");
}

在src/components/tools/UserMenu.vue文件中引用

  //websocket相关
  import  xsws,{initWebSocket,heartCheckFun,websocketclose} from  '../../views/modules/xswebsocket/xscommonwebsocket.js'
  import store from '@/store/'
  //websocket相关

      xsws,//websocket相关
      initWebSocket,//websocket相关
      heartCheckFun,//websocket相关
      websocketclose,//websocket相关
      store,//websocket相关

 

创建连接

      xsMsgInitWebsocket(){
        //websocket相关
        let userId = store.getters.userInfo.id;
        //创建socket连接
        initWebSocket("xsmsgwebsocket","xsGlobalMsgNotice",userId,"");
        //设置消息接收的处理方法
        xsws.websock.onmessage = this.websocketOnmessage;
        heartCheckFun();
      },

重写接收到信息后的数据处理

// //消息接收以后的处理方法
      websocketOnmessage(e){
        // console.log("-----接收到后台来的消息-------",e.data);
        let data = eval("(" + e.data + ")"); //解析对象
        console.log("接收到的信息是："+e.data);
        this.xsHandleMsgNotice(data);
        //心跳检测重置
        xsws.heartCheck.reset().start();
      },

后端：

 

 

推送：