websocket心跳检测和重连机制(复制即用)

最新推荐文章于 2025-06-10 13:58:32 发布

原创最新推荐文章于 2025-06-10 13:58:32 发布 · 632 阅读

3 ·

CC 4.0 BY-SA版权

websocket 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用WebSocket进行实时通信，包括创建WebSocket连接、心跳检测机制、以及遇到问题时的自动重连策略。通过实例展示了如何处理接收到的数据、ping/pong心跳检查以及在断线后进行重连的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

data() {
  return {
    wsurl: 'ws://127.0.0.1:8080',
    websock: null,
    lockReconnect: false,
    timerReconnect: null,
    heartTimeout: null,
    serverTimeout: null
  };
},

created() {
  this.createWebSocket();
},
beforeDestroy() {
  if (this.websock) this.websock.close();
},

// 创建websocket
createWebSocket() {
  try {
    this.websock = new WebSocket(this.wsurl);
    this.initWebSocket();
  } catch (e) {
    console.log('catch', e);
    this.reconnect();
  }
},
initWebSocket() {
  this.websock.onmessage = (e) => {
    console.log('数据接收', e);
    // 拿到pong说明当前连接是正常的
    if (e.data === 'pong') {
      this.heartCheck();
    }
  };
  this.websock.onopen = () => {
    console.log('连接成功', this.websock);
    this.heartCheck();
  };
  this.websock.onerror = () => {
    console.log('连接失败');
    this.reconnect();
  };
  this.websock.onclose = (e) => {
    console.log('断开连接', e);
    this.reconnect();
  };
},
// 重连
reconnect() {
  if (this.lockReconnect) {
    return;
  }
  console.log('发起重连');
  this.lockReconnect = true;
  // 没连接上会一直重连，设置延迟
  this.timerReconnect && clearTimeout(this.timerReconnect);
  this.timerReconnect = setTimeout(() => {
    this.createWebSocket();
    this.lockReconnect = false;
  }, 3 * 1000);
},
// 心跳检测
heartCheck() {
  this.heartTimeout && clearTimeout(this.heartTimeout);
  this.serverTimeout && clearTimeout(this.serverTimeout);
  this.heartTimeout = setTimeout(() => {
    // 发送一个心跳包
    console.log('发送ping');
    this.websock.send('ping');
    // 计算答复的超时时间
    this.serverTimeout = setTimeout(() => {
      this.websock.close();
      console.log('答复超时');
    }, 5 * 1000);
  }, 4 * 1000);
}