Vue中websocket使用心跳

接之前websocket封装使用。详情去看这篇
https://blog.youkuaiyun.com/qq_40086382/article/details/124039862#comments_22460513

心跳机制：

前端登录成功后主动向后端发送一次心跳，然后开始记录自己当前的心跳次数（每过1.5秒心跳次数加1），

• 如果心跳次数小于4次时能收到后端回复的心跳，就重置心跳次数为0，重新向后端发送心跳，又开始记录心跳次数，等待后端回复

• 如果4次记录之后都没有收到后端心跳，则主动断开连接

实现代码

Home.vue文件中：

data() {
    return {
      heart: 0,//记录心跳次数
      .....
    };
  },
created() {
    this.init();
    ...
  },
methods: {
init() {
      createWebSocket(this.global_callback);
      this.startHeart();//开启心跳
    },
 startHeart() {
      window.heatTimer && clearInterval(window.heatTimer);
      window.heatTimer = setInterval(() => {
        this.heart += 1;
        console.log(`心跳：${this.heart}`);
        if (this.heart < 4) {
          const sendData = { operate: "heartbeat" };
          sendSock(JSON.stringify(sendData));
        } else {
          this.$router.push("/login");
          closeSock();
          this.$message.error("服务器断开连接，请检查设备是否正常");
        }
      }, 1500);
    },
 global_callback(msg) {
      console.log("websocket的回调函数收到服务器信息：" + JSON.stringify(msg));
      // console.log("收到服务器信息：" + msg);
      //debugger;
      switch (msg.operate) {//收到心跳
         case "heartbeat":
           this.heart = 0;
           this.startHeart();
         break;
         .....
      }
  },
      ........
}

注意事项

我这里用的window.heatTimer开启的定时器，当心跳记录到4次还没有收到后端回复时会断开连接跳到登录界面，此时定时器还在记录心跳，所以我搞了一个路由守卫来清除定时器。路由发生跳转时判断如果是跳到登录界面就清除定时器。

// 挂载路由导航守卫
// to：将要访问的路径
// from：代表从哪个路径而来
// next：放行函数（1、next()放行。2、next('/login')强制跳转页面到登陆）
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    // debugger
    // 路由到登陆页面时清除定时器
    if (window.heatTimer) {
      clearInterval(window.heatTimer);
    }
    return next();
  }

 ........

  return next();
});

我当时用window.heatTimer的原因好像是用setInterval出了什么bug，不太记得了，可能是我当时刚开始学vue不太会，如果道友有其他方法欢迎指点分享。