vue+websocket的使用,心跳机制

一条咸鱼ya

已于 2022-10-28 14:26:02 修改

阅读量1.5k

点赞数 1

分类专栏： vue 文章标签： websocket vue.js 网络协议

于 2022-10-27 16:23:06 首次发布

本文链接：https://blog.csdn.net/qq_46141403/article/details/127555172

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、使用步骤

代码如下（示例）：

data(){
return{
      websock: null, //建立的连接
      lockReconnect: false, //是否真正建立连接
      timeout: 20 * 1000, //20秒一次心跳
      timeoutObj: null, //心跳心跳倒计时
      serverTimeoutObj: null, //心跳倒计时
      timeoutnum: null, //断开 重连倒计时
}
},
mounted(){
    this.iniWebSocket();

},
 methods: {
    iniWebSocket() {
      //初始化websocket
      const wsuri =
        "websocket地址";

      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    reconnect() {
      //重新连接
      var that = this;
      if (that.lockReconnect) {
        return;
      }
      that.lockReconnect = true;
      //没连接上会一直重连，设置延迟避免请求过多
      that.timeoutnum && clearTimeout(that.timeoutnum);
      that.timeoutnum = setTimeout(function () {
        //新连接
        that.iniWebSocket();
        that.lockReconnect = false;
      }, 1000);
    },
    reset() {
      //重置心跳
      var that = this;
      //清除时间
      clearTimeout(that.timeoutObj);
      clearTimeout(that.serverTimeoutObj);
      //重启心跳
      that.start();
    },
    start() {
      //开启心跳
      var self = this;
      self.timeoutObj && clearTimeout(self.timeoutObj);
      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
      self.timeoutObj = setTimeout(function () {
        //这里发送一个心跳，后端收到后，返回一个心跳消息
        if (self.websock.readyState == 1) {
          //如果连接正常
          self.websock.send("heartbeat");
        } else {
          //否则重连
          self.reconnect();
        }
        self.serverTimeoutObj = setTimeout(function () {
          //超时关闭
          self.websock.close();
        }, self.timeout);
      }, self.timeout);
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      let actions = { test: "12345" };
      this.websocketsend(JSON.stringify(actions));
      console.log("连接");
      //开启心跳
      this.start();
    },
    websocketonerror() {
      //连接建立失败重连
      this.iniWebSocket();
      this.reconnect();
      console.log("重新连接");
    },
    websocketonmessage(e) {
      //数据接收
      const redata = JSON.parse(e.data);
      // console.log("数据接收", redata);
      this.reset();
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
      //重连
      this.reconnect();
    },
}