websocket重连及心跳机制完整示例

重连机制和心跳机制是保证websocket连接可靠性的两种重要机制。

1、心跳检测机制

• 定期发送心跳消息到服务器，如果服务器在预定时间内没有收到心跳消息，它可以假设连接已断开，并采取响应措施，如关闭连接或尝试重新连接。
• 同时，在服务器端也实现相应的心跳响应逻辑，以确保双向通信的可靠性。

2、重连机制

• 在客服端实现一个重连机制，当websocket连接断开时，可以自动尝试重新建立连接。
• 重连机制应该有一定的退避策略，比如指数退避，避免在短时间内频繁尝试重连导致额外的网络负担。

本文我们以vue页面为例来说明，前端页面如何建立websocket连接，以及重连机制和心跳机制的实现。

完整示例：

<script>
import store from "@/store";

export default {
  data() {
    return {
      name: store.getters.name,
      nickName: store.getters.nickName,
      ws: null,
      isConnected: false,
      reConnector: null,
      sendTimer: null,
    }
  },
  created() {
    this.createWebSocket();
  },
  methods: {
    createWebSocket() {
      var username = this.name;
      console.log(username);
      var url = process.env.VUE_APP_WEBSOCKET_BASE_URL + 'websocket/message/' + username;

      this.ws = new WebSocket(url);
      this.initWebSocket();
    },
    initWebSocket() {
      let _this = this;

      this.ws.onopen = function (event) {
        console.log('已经打开连接!');
        _this.isConnected = true;
        _this.heartBeat();
      }
      this.ws.onmessage = function (event) {
        console.log('receive msg:' + event.data);
        try {
          let msgJson = JSON.parse(event.data);
          console.log('str1 is a valid JSON');
          // 邀请视频消息类型处理
          if (msgJson.type === 100) {
            _this.inviteForm = msgJson.body;
            _this.inviteOpen = true;
          }
        } catch (error) {
          console.log('str1 is not a valid JSON');
        }
      }
      this.ws.onclose = function (event) {
        console.log('已经关闭连接!');
        _this.isConnected = false;
        _this.reConnect();
      }
      this.ws.onerror = function (event) {
        console.log('连接错误，重新连接!');
      }

    },
    reConnect() {
      let _this = this;
      console.log('尝试重新连接...');
      if (this.isConnected) {
        return;
      }
      clearTimeout(this.reConnector);
      // 延迟5s后重连，如果重连失败，会调用onclose方法，重新建立连接
      this.reConnector = setTimeout(function () {
        _this.createWebSocket();
      }, 5000);

    },
    heartBeat() {
      let _this = this;
      clearInterval(this.sendTimer);
      this.sendTimer = setInterval(function () {
        // type=99,心跳消息
        let msgJson = {type: 99, msg: 'heartbeat from client'};
        if (_this.isConnected) {
          console.log('send msg:' + JSON.stringify(msgJson));
          _this.ws.send(JSON.stringify(msgJson));
        }
      }, 30000)
    },

  }
}
</script>