网页消息通知（前端）

荒泷一斗-

已于 2023-09-13 15:41:03 修改

阅读量706

点赞数

文章标签： websocket

于 2023-02-14 09:06:05 首次发布

本文链接：https://blog.csdn.net/qq_45341411/article/details/129020595

版权

该代码段展示了如何初始化和管理WebSocket连接，包括心跳检测、异常处理、重连机制以及消息监听。在连接打开时启动心跳，在接收到消息时重置心跳。当连接关闭或出现错误时，会进行重连尝试。此外，还有专门的函数处理发送消息和关闭WebSocket连接。

摘要由CSDN通过智能技术生成


data {
    return {
 // publicksocket 全局socket
     socket: null,
         timeout: 5 * 1000, // 45秒一次心跳
         timeoutObj: null, // 心跳心跳倒计时
         serverTimeoutObj: null, // 心跳倒计时
         timeoutnum: null, // 断开 重连倒计时
         lockReconnect: false, // 防止
         websocket: null
    }
},
methods :{
// 全局监听webSocket 
    initWebSocket(){
      if(this.websocket){
        this.websocket.close()
        this.websocket = null
      }
      this.websocket = new WebSocket(`wss://***.***.com/api/iws-sms/api/sms/${this.userId}`)
      let that = this.websocket;
        that.onopen = this.websocketonopen;
        that.onerror = this.websocketonerror;
        that.onmessage = this.websocketonmessage; 
        that.onclose = this.websocketclose;
    },
    start() {
            console.log('start');
            //清除延时器
            this.timeoutObj && clearTimeout(this.timeoutObj);
            this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
            this.timeoutObj = setTimeout(() => {
                if (this.websocket && this.websocket.readyState == 1) {
          let heart = {
          "action":"heart",
          "content":{ "type":"words", "content":""} 
          }
                    this.websocket.send(JSON.stringify(heart));//发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数
                } else {
                    this.reconnect();
                }
                //定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接
                this.serverTimeoutObj = setTimeout(() => {
                    this.websocket.close();
                }, this.timeout)
            }, this.timeout)
        },
        reset() { // 重置心跳
            // 清除时间
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            // 重启心跳
            this.start();
        },
    // 重新连接
    reconnect() {
            if (this.lockReconnect) return
            this.lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
      this.timeoutnum && clearTimeout(this.timeoutnum);
      this.timeoutnum = setTimeout(() => {
          this.initWebSocket();
          this.lockReconnect = false;
      }, 5000)
    },
    async setOnmessageMessage(event) {
            console.log(event.data, '获得消息');
            this.reset();
            // 自定义全局监听事件
            // window.dispatchEvent(new CustomEvent('onmessageWS', {
            //     detail: {
            //         data: event.data
            //     }
            // }))
            // //发现消息进入    开始处理前端触发逻辑
            // if (event.data === 'success' || event.data === 'heartBath') return
    },
        websocketonopen() {
      //开启心跳
      this.start();
      console.log("WebSocket连接成功!!!"+new Date()+"----"+this.websocket.readyState);
        },
        websocketonerror(e) {                
            console.log("WebSocket连接发生错误" + e);              
        },
        websocketclose(e) {
      this.websocket.close();
      clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
      console.log("WebSocket连接关闭");
        },
    websocketsend(messsage) {
        that.websocket.send(messsage)
    },
    closeWebSocket() { // 关闭websocket
        that.websocket.close()
    },