构建可靠的微信小程序 WebSocket 心跳重连机制

2023-11-25 21:25:51

1. WebSocket 简介

WebSocket 是一种全双工通信协议，允许客户端和服务器在建立单一 TCP 连接后进行双向通信，与传统的 HTTP 请求-响应模型不同，WebSocket 允许服务器主动向客户端推送数据，而客户端也可以主动向服务器发送数据，从而实现实时通信。

2. 微信小程序 WebSocket API

微信小程序提供了原生 WebSocket API，允许开发者在小程序中使用 WebSocket 进行通信，其 API 使用方式与 H5 的 WebSocket API 有所不同。

3. WebSocket 心跳重连机制

WebSocket 心跳重连机制是指客户端和服务器之间通过定期发送和接收心跳消息来检测连接状态，如果一方在一段时间内没有收到另一方的心跳消息，则认为连接已断开，并自动重连。

4. 实现心跳重连逻辑

在微信小程序中实现 WebSocket 心跳重连逻辑主要包括以下步骤：

在客户端和服务器端分别建立一个定时器，用于定期发送心跳消息。
当客户端收到服务器的心跳消息时，重置定时器的超时时间。
当服务器收到客户端的心跳消息时，同样重置定时器的超时时间。
如果客户端或服务器在一段时间内没有收到对方的心跳消息，则认为连接已断开，并自动重连。

5. 示例代码

// 客户端代码
const socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => {
  console.log('WebSocket connected');

  // 启动心跳定时器
  const heartbeatTimer = setInterval(() => {
    socket.send('ping');
  }, 5000);
};

socket.onmessage = (event) => {
  console.log('Received message from server:', event.data);

  // 重置心跳定时器
  clearInterval(heartbeatTimer);
  heartbeatTimer = setInterval(() => {
    socket.send('ping');
  }, 5000);
};

socket.onclose = () => {
  console.log('WebSocket closed');

  // 尝试重新连接
  setTimeout(() => {
    socket = new WebSocket('ws://localhost:8080');
  }, 5000);
};

socket.onerror = (error) => {
  console.error('WebSocket error:', error);
};

// 服务器端代码
const server = new WebSocketServer({
  port: 8080
});

server.on('connection', (socket) => {
  console.log('WebSocket connected');

  // 启动心跳定时器
  const heartbeatTimer = setInterval(() => {
    socket.send('ping');
  }, 5000);

  socket.on('message', (message) => {
    console.log('Received message from client:', message);

    // 重置心跳定时器
    clearInterval(heartbeatTimer);
    heartbeatTimer = setInterval(() => {
      socket.send('ping');
    }, 5000);
  });

  socket.on('close', () => {
    console.log('WebSocket closed');
  });

  socket.on('error', (error) => {
    console.error('WebSocket error:', error);
  });
});