vue项目中使用websocket

此前参与过的项目一般是较为简单的websocket的功能，比如接收通知或者消息。

这次在项目的预警管理相关中，在实时监控页面的视频中使用了websocket来实现接收客户端盒子推送过来的预警信息。

参考地址：

Vue项目里Websocket的使用_vue websocket_百思不得小李的博客-CSDN博客

我按照这个方法实现了在视频开始播放的时候就建立websocket连接，来接收预警消息。

不同的是我并不想把websocket的地址配置在全局文件中，我在环境变量配置文件中添加了

# 用于实时监控下视频建立websocket连接

VUE_APP_WEBSOCKET_URL=  'wss://mclz.c2cloud.cn/nvrws'

参考他的代码开始较好的实现了我们的需求，因为当时视频预警图片推送过来的时间是一分钟。后面不知道是服务器配置还是对接其它厂商时候不一样的问题，当预警时间达到三分钟的时候，我们老是掉线，而且报1006的错误。根据后台的建议，在前台完善了代码添加了心跳监测。一般情况下在对网络要求不高的标清视频播放时候，大部分情况下websocket连接不会掉线。但是对于高清页面的播放则会出现websocket老是掉线包1006的错误，但是心跳监测会使websocket即时的重新建立连接并不影响图片预警的效果的。

开始尝试时，并不想在前端解决websocket老是掉线的问题，参考了地址：

websocket连接1分钟未操作，自动断开的解决办法_websocket一分钟断开_shaw_xy的博客-CSDN博客

下的reconnect方法重新连接解决了一些问题，但是感觉不是很精准，后面再参考了：

https://www.cnblogs.com/1wen/p/5808276.html下的方法添加了

心跳检测

这是我的部分处理

 websocketonopen() {

        // console.log("链接建立之后执行send方法发送数据");

        this.heartCheckStart()        // 调用心跳监测

        console.log("websocket已打开");

      },

websocketclose(e) {

        //关闭

        console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)

        // console.log("断开链接", e);

        // 断开链接后尝试重新连接2000ms

        this.reconnect()  //尝试重新连接

      },

reconnect() {

        if (this.lockReconnect) return;

        this.lockReconnect = true;

        setTimeout(() => {

          this.initWebSocket()

          this.lockReconnect = false

        }, 2000)

      },

      /** 心跳监测 */

      heartCheckReset() {

        console.info('heartCheckReset')

        clearTimeout(this.heartCheck.timeoutObj);

        clearTimeout(this.heartCheck.serverTimeoutObj);

　　　　 this.heartCheckStart();

      },

      heartCheckStart() {

        console.info('heartCheckStart')

          var self = this;

          this.heartCheck.timeoutObj = setTimeout(function(){

              if(self.websocketVideo.readyState === 1) {

                self.websocketVideo.send("HeartBeat");

              }

              self.serverTimeoutObj = setTimeout(function(){

                  self.websocketVideo.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次

              }, self.heartCheck.timeout)

          }, this.heartCheck.timeout)

      },

我这边在视频盒子切换视频源以及当前盒子的销毁事件中会处理websocket

播放器的播放函数中：

play: function (url) {

          console.log(url)

            if (this.jessibuca) {

              this.destroy();

              this.websocketVideo && this.websocketVideo.close()

            }

............

},

// 播放盒子组件下

beforeDestroy() {

      clearInterval(this.timer);

      this.lockReconnect = true

      clearTimeout(this.heartCheck.timeoutObj);

      clearTimeout(this.heartCheck.serverTimeoutObj);

    },

    destroyed() {

      //离开路由之后断开websocket连接

      if (this.jessibuca) {

        this.jessibuca.destroy();

      }

      this.websocketVideo && this.websocketVideo.close();

    },

在流程变得稍微复杂起来的时候我们需要再具体业务下根据实际情况来调整和优化部分代码。