Uniapp 中使用 WebSocket：封装、心跳检测与 Node.js 服务端实现

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() 方法关闭连接。
        
        （图片来源网络，侵删）
        
        （图片来源网络，侵删）
        
        （图片来源网络，侵删）