WebSocket聊天室的在线状态管理宝典：心跳检测机制大揭秘

前端

2023-04-15 13:37:24

WebSocket聊天室的守护天使：心跳检测机制

何为心跳检测机制？

心跳检测机制是一种维护系统和应用程序网络连接可靠性的高效方式。其原理并不复杂：服务端定期向客户端发送“心跳”包，客户端收到后及时回应，确认双方连接状态。若客户端长时间未收到心跳包，则认定已断线，服务端将切断与该客户端的连接。

WebSocket聊天室中的心跳检测机制

在基于Vue3、Ant Design Vue和WebSocket+Express搭建的聊天室中，可通过以下步骤实现心跳检测机制：

在服务端代码中设置定时任务，定期向连接的客户端发送心跳包。
在客户端代码中监听服务端发送的心跳包，并及时响应。
若客户端长时间未收到心跳包，认定服务端已断线，客户端应尝试重新连接服务端。

实战代码

以下代码示例演示如何在基于Vue3、Ant Design Vue和WebSocket+Express的聊天室中实现心跳检测机制：

// 服务端代码
const express = require('express');
const WebSocket = require('ws');

const app = express();
const server = app.listen(3000);
const wss = new WebSocket.Server({ server });

// 定时任务，每隔10秒向所有客户端发送心跳包
setInterval(() => {
  wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify({ type: 'heartbeat' }));
    }
  });
}, 10000);

// 客户端代码
const Vue = require('vue');
const VueSocketIO = require('vue-socket.io');
Vue.use(VueSocketIO, 'ws://localhost:3000');

new Vue({
  el: '#app',
  data() {
    return {
      socket: null,
      isOnline: false,
    };
  },
  mounted() {
    this.socket = this.$socket;
    this.socket.on('connect', () => {
      this.isOnline = true;
    });
    this.socket.on('disconnect', () => {
      this.isOnline = false;
    });
    this.socket.on('heartbeat', () => {
      this.socket.emit('heartbeat');
    });
  },
});