WebSocket 是一种全双工通信协议，广泛应用于实时通信场景（如聊天、实时数据推送等）。本文将详细介绍如何在 Uniapp 中封装 WebSocket、实现心跳检测，并基于 Node.js 搭建一个简单的 WebSocket 服务端。

1. Uniapp 中 WebSocket 的封装

​核心功能

• 连接 WebSocket 服务器。
• 发送和接收消息。
• 实现心跳检测，确保连接稳定性。

​封装代码

以下是一个简单的 WebSocket 封装示例：

export default class Socket {
  constructor(url) {
    this.url = url; // WebSocket 服务器地址
    this.socket = null; // WebSocket 实例
    this.heartbeatInterval = 30000; // 心跳间隔时间（30秒）
    this.reconnectInterval = 5000; // 重连间隔时间（5秒）
    this.isConnected = false; // 连接状态
  }

  // 连接 WebSocket
  connect() {
    this.socket = new WebSocket(this.url);

    // 监听连接成功
    this.socket.onopen = () => {
      this.isConnected = true;
      console.log('WebSocket connected');
      this.startHeartbeat(); // 开启心跳检测
    };

    // 监听接收消息
    this.socket.onmessage = (event) => {
      console.log('Received message:', event.data);
      // 处理接收到的消息
    };

    // 监听连接关闭
    this.socket.onclose = () => {
      this.isConnected = false;
      console.log('WebSocket disconnected');
      this.reconnect(); // 尝试重连
    };

    // 监听连接错误
    this.socket.onerror = (error) => {
      console.error('WebSocket error:', error);
    };
  }

  // 发送消息
  send(message) {
    if (this.isConnected) {
      this.socket.send(JSON.stringify(message));
    } else {
      console.error('WebSocket is not connected');
    }
  }

  // 开启心跳检测
  startHeartbeat() {
    this.heartbeatTimer = setInterval(() => {
      if (this.isConnected) {
        this.send({ type: 'heartbeat' }); // 发送心跳消息
      }
    }, this.heartbeatInterval);
  }

  // 重连
  reconnect() {
    clearInterval(this.heartbeatTimer); // 清除心跳定时器
    setTimeout(() => {
      console.log('Reconnecting...');
      this.connect(); // 重新连接
    }, this.reconnectInterval);
  }

  // 关闭连接
  close() {
    if (this.socket) {
      this.socket.close();
      clearInterval(this.heartbeatTimer); // 清除心跳定时器
    }
  }
}

​使用示例

import Socket from './socket.js';

const socket = new Socket('ws://localhost:8080');
socket.connect();

// 发送消息
socket.send({ type: 'message', content: 'Hello, WebSocket!' });

// 关闭连接
// socket.close();

​2. WebSocket 心跳检测

​作用

• 检测连接是否正常，避免因网络问题导致连接断开。
• 保持连接活跃，防止被服务器主动关闭。

​实现原理

• 客户端定时向服务器发送心跳消息（如 { type: 'heartbeat' }）。
• 服务器收到心跳消息后，可以返回响应或不做处理。
• 如果客户端长时间未收到心跳响应，则尝试重连。

​3. Node.js WebSocket 服务端实现

​实现步骤

1. ​初始化项目
   在项目目录下运行以下命令，生成 package.json 文件：

   npm init -y

2. ​安装 ws 模块
   运行以下命令安装 WebSocket 库：

   npm install ws

3. ​创建 WebSocket 服务端
   以下是一个简单的 WebSocket 服务端实现，每隔 5 秒向客户端发送一条消息：

   const WebSocket = require('ws');
   const wss = new WebSocket.Server({ port: 8080 });
   
   wss.on('connection', function connection(ws) {
     console.log('A new client connected');
   
     // 监听客户端消息
     ws.on('message', function incoming(message) {
       console.log('Received message:', message.toString());
     });
   
     // 每隔 5 秒向客户端发送一条消息
     setInterval(() => {
       if (ws.readyState === WebSocket.OPEN) {
         ws.send('Get message from server');
       }
     }, 5000);
   });
   
   console.log('WebSocket server is running on ws://localhost:8080');

​运行服务端

• 将上述代码保存为 server.js，然后运行以下命令启动服务端：

  node server.js

​4. 前后端通信原理

​核心流程

1. ​建立连接：客户端通过 new WebSocket(url) 连接服务端。
2. ​发送消息：客户端和服务端通过 send() 方法发送消息。
3. ​接收消息：通过 onmessage 事件监听接收到的消息。
4. ​关闭连接：通过 close() 方法关闭连接。