vue中消息链接

vue2中-------------------------------------------
1.全局定义lib文件中global.js

//消息推送
export default {
  ws: {},
  setWs: function (newWs) {
    this.ws = newWs
  },
}

2.main.js

// 引入全局推送
import global from '_lib/global.js'
Vue.prototype.$global = global

3.app.vue统一建立消息链接

    /**websocket */
    getwebsocket() {
      let that = this
      //新建websocket的函数 页面初始化 断开连接时重新调用
      let tagHost = window.location.host
      let tagId = JSON.parse(localStorage.getItem('userInfo')).id
      var wsUrl = `ws://${tagHost}/api/message?group=qualityInspector&userMark=${tagId}` //测试
      // var wsUrl =
      //   'ws://192.168.2.209:8080/api/message?group=qualityInspector&userMark=2' //测试
      var socket
      socket = new WebSocket(wsUrl)
      that.$global.setWs(socket)
      socket.onerror = function (event) {
        that.reconnect(wsUrl)
        that.lockReconnect = false
      }
      socket.onclose = function (event) {
        //console.log('websocket服务关闭了');
        that.reconnect(wsUrl)
        that.lockReconnect = false
      }
      socket.onopen = function (event) {
        socket.send(event)
        heartCheck.reset().start() //传递信息
        console.log('连接成功')
        that.lockReconnect = true
      }
      socket.onmessage = function (message) {
        heartCheck.reset().start()
        //如果获取到消息，心跳检测重置
        //拿到任何消息都说明当前连接是正常的
        //接受消息后的UI变化
        that.wesData = message?.data
      }
      var heartCheck = {
        timeout: 10000, //10秒
        timeoutObj: null,
        serverTimeoutObj: null,
        reset: function () {
          clearTimeout(this.timeoutObj)
          clearTimeout(this.serverTimeoutObj)
          return this
        },
        start: function () {
          var self = this
          this.timeoutObj = setTimeout(function () {
            //这里发送一个心跳，后端收到后，返回一个心跳消息，
            //onmessage拿到返回的心跳就说明连接正常
            socket.send('ping')
            self.serverTimeoutObj = setInterval(function () {
              socket.send('ping')
              //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
            }, self.timeout)
          }, this.timeout)
        },
      }
    },
    //重连
    reconnect(url) {
      var self = this
      if (self.lockReconnect) return
      self.lockReconnect = true
      //没连接上会一直重连，设置延迟避免请求过多
      setTimeout(function () {
        self.getwebsocket()
        self.lockReconnect = false
      }, 2000)
    },

4.页面使用监听数据

    //获得全局消息体
    handdleMsg () {
      let that = this
      that.$global.ws.addEventListener('message', function (event) {
        let tagObj = JSON.parse(event.data)
        console.log('历史页面', tagObj)
        if (tagObj.webSocketBusinessType == 'STEEL_GRADE_APPLICATION') {
          that.$router.push({
            path: '/qualityInspector',
            query: {
              activeIndex: 0,
            },
          })
        }
      })
    },

vue3-------------------------------------------------
1.全局定义utils文件中websocket.ts

export default {
  ws: {},
  setWs: function (newWs) {
    this.ws = newWs;
  },
};

2.main.ts

import websocket from './utils/websocket';
app.config.globalProperties.$websocket = websocket;

3.app.vue统一建立消息链接

  import { getCurrentInstance, onMounted, watch } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();
  const { proxy } = getCurrentInstance() as any;
    function inintWebsocket() {
    proxy.$websocket.ws = new WebSocket(
      'ws://xxxxxxx',
    );

    proxy.$websocket.setWs(proxy.$websocket.ws);
    proxy.$websocket.ws.onopen = () => {
      // 连接地址
      console.log('连接成功');
      // 发送心跳避免ws协定主动断联
      setInterval(() => {
        proxy.$websocket.ws.send('ping'); // send向服务器发送消息
      }, 1000 * 60);
    };
    proxy.$websocket.ws.onerror = (e: any) => {
      console.log('连接错误信息', e);
    };
    proxy.$websocket.ws.onclose = () => {
      console.log('关闭连接');
      // setTimeout(function () {
      //   proxy.$websocket.ws.onopen();
      // }, 1000);
    };
  }
  onMounted(() => {
    inintWebsocket();
  });
  watch(
    () => router.currentRoute.value.path,
    (newValue, oldValue) => {
      if (newValue == '/dashboard/analysis' && localStorage.getItem('userInfo')) {
        inintWebsocket();
      }
      if (newValue == '/login' && !localStorage.getItem('userInfo')) {
        proxy.$websocket.ws.close();
      }
    },
    { immediate: true },
  );

4.页面使用监听数据

  import { h, ref, getCurrentInstance, onMounted } from 'vue';
  const { proxy } = getCurrentInstance() as any;
    //获取消息内容
  function getWebsocketMessage() {
    proxy.$websocket.ws.addEventListener('message', function (event) {
      console.log('获取消息内容', event.data);
    });
  }
  onMounted(() => {
    getWebsocketMessage();
  });