websocket实现消息推送通知

在vue中，websocket实现消息推送通知

data() {
   return {
            websocket: null,
            timeout: 30 * 1000, //30秒一次心跳
            timeoutObj: null, //心跳倒计时
            serverTimeoutObj: null, //心跳倒计时
            timeoutnum: null, //断开 重连倒计时
   }
}

1. 初始化websocket对象

 initWebSocket() {
   let url = "wss://你与后端规定好的通信地址";
   this.websocket = new WebSocket('你与后端规定好的通信地址');
    // 连接错误的回调
     this.websocket.onerror = (error) => {
           console.error("WebSocket error:", error);
           // 若连接失败，发起重新连接
            this.reconnect();
        };
  // 连接成功
    this.websocket.onopen = () => {
          console.log("WebSocket连接已建立");
          //发送心跳测试，让后端知道浏览器WebSocket通信没有断开
           this.reset().start();
      };
    // 收到消息的回调，前端编写的消息推送等功能主要在这里实现
     this.websocket.onmessage = this.setOnmessageMessage;
   // 连接关闭的回调
      this.websocket.onclose = () => {
              // 若监听到WebSocket通信关闭，则又重新连接
              this.reconnect()
              console.log("WebSocket连接已关闭");
        };
      // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
       window.onbeforeunload = () => {
             this.websocket.close()
        }
 }

2. 在初始化中使用到的方法

// 通信断开，重连的方法
setOnmessageMessage(event) {
            const message = event.data;
            // pong后端返回，发起心跳
            if (message && message == "pong") {
                this.reset().start()
            }else {
            //refresh后端返回，逻辑处理
              if(message && message == 'refresh') {
                 
              }
            }
            console.log("Received message:", message);
          },
reconnect() {
            if (this.lockReconnect) return;
            this.lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
            this.timeoutnum && clearTimeout(this.timeoutnum);
            this.timeoutnum = setTimeout(() => {
              //新连接
              this.initWebSocket();
              this.lockReconnect = false;
            }, 5000);
    },
    
     // 重置心跳，先清除以前的定时
reset() {
            // 清除时间
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            return this
},

// 开启心跳，用于和后端建立通信时，互相知道对方是否有断开
start() {
            this.timeoutObj && clearTimeout(this.timeoutObj);
            this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
            this.timeoutObj = setTimeout(() => {
              // 这里发送一个心跳，后端收到后，返回一个心跳消息，ping这个自定义，和后端商量，
              this.websocket.send("ping");
              console.log("发送心跳检测");
              this.serverTimeoutObj = setTimeout(() => {
              // 超时，前端自动断开连接，又重新发起链接请求
                console.log("未收到心跳检测回复");
                this.websocket.close()
              }, this.timeout)
            }, this.timeout);
   },

3. 调用初始化websocket对象的方法

mounted() {
       // 建立WebSocket消息通道
          this.initWebSocket();
}