【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();
      },

後端：

 

 

推送：