React+TypeScript中PeerJS节点重连与断开事件延迟问题

一、缩短断开连接事件的触发延迟 #

PeerJS默认心跳检测间隔较长，是导致close/error事件触发慢的核心原因。你可以在初始化Peer实例时，通过配置参数调整心跳相关的超时阈值：

• pingInterval: 心跳包发送间隔（默认5000毫秒，建议调至2000-3000毫秒）
• pingTimeout: 心跳响应超时时间（默认10000毫秒，建议调至5000毫秒）

示例配置：

peerRef.current = new Peer({
  pingInterval: 2000, // 每2秒发送一次心跳
  pingTimeout: 5000   // 5秒未收到响应则判定断连
});

另外，还可以主动监听disconnected事件（比close触发更早），或在发送数据时捕获异常，辅助提前判断连接状态：

connRef.current?.on('disconnected', () => {
  console.log('连接已断开，提前触发重连');
  handleReconnect();
});

// 发送数据时捕获错误
const sendMessage = (data: any) => {
  if (connRef.current?.open) {
    try {
      connRef.current.send(data);
    } catch (err) {
      console.error('发送失败，触发重连');
      handleReconnect();
    }
  }
};

二、实现可靠的重连机制 #

你当前的重连逻辑存在资源未清理、无失败重试控制的问题，以下是优化后的实现方案：

核心优化点 #

• 封装独立重连函数，统一控制逻辑
• 加入指数退避重连：失败后延迟时间翻倍，避免频繁请求服务器
• 重连前清理旧Peer实例、连接及事件监听，防止内存泄漏
• 覆盖error/disconnected/close多场景触发重连

完整代码示例 #

import Peer, { DataConnection } from "peerjs";
import { useEffect, useRef } from "react";

export default function App() {
  const targetPeerId = '...'; // 目标节点的Peer ID
  const peerRef = useRef<Peer | null>(null);
  const connRef = useRef<DataConnection | null>(null);
  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const reconnectAttemptsRef = useRef(0); // 记录重连次数

  // 统一处理数据接收
  const handleData = (message: any) => {
    console.log('收到消息:', message);
  };

  // 重连逻辑封装
  const handleReconnect = () => {
    // 清除之前的重连定时器
    if (reconnectTimeoutRef.current) {
      clearTimeout(reconnectTimeoutRef.current);
    }

    // 清理旧资源
    if (connRef.current) {
      connRef.current.off('data', handleData);
      connRef.current.close();
      connRef.current = null;
    }
    if (peerRef.current) {
      peerRef.current.destroy();
      peerRef.current = null;
    }

    // 指数退避：延迟时间随失败次数递增，最多延迟30秒
    const delay = Math.min(Math.pow(2, reconnectAttemptsRef.current) * 1000, 30000);
    reconnectTimeoutRef.current = setTimeout(() => {
      reconnectAttemptsRef.current += 1;
      initPeerConnection();
    }, delay);
  };

  // 初始化Peer与连接
  const initPeerConnection = () => {
    peerRef.current = new Peer({
      pingInterval: 2000,
      pingTimeout: 5000
    });

    peerRef.current.on('open', (peerId) => {
      console.log('当前Peer ID:', peerId);
      connRef.current = peerRef.current?.connect(targetPeerId);
      if (!connRef.current) return;

      // 重连成功后重置次数
      reconnectAttemptsRef.current = 0;

      connRef.current.on('open', () => console.log('连接成功'));
      connRef.current.on('data', handleData);
      connRef.current.on('close', () => {
        console.log('连接关闭，触发重连');
        handleReconnect();
      });
      connRef.current.on('error', (err) => {
        console.error('连接错误:', err);
        handleReconnect();
      });
      connRef.current.on('disconnected', () => {
        console.log('连接断开，触发重连');
        handleReconnect();
      });
    });

    peerRef.current.on('error', (err) => {
      console.error('Peer实例错误:', err);
      handleReconnect();
    });
  };

  useEffect(() => {
    initPeerConnection();

    // 组件卸载时清理所有资源
    return () => {
      if (reconnectTimeoutRef.current) clearTimeout(reconnectTimeoutRef.current);
      if (connRef.current) {
        connRef.current.off('data', handleData);
        connRef.current.close();
      }
      if (peerRef.current) peerRef.current.destroy();
    };
  }, []);

  return null;
}

内容的提问来源于stack exchange，提问作者anonymous