ReactJs类组件中W3CWebSocket断开后无法成功重连问题求助

问题根因 #

• 重连生成的新WebSocket实例没有重新绑定onmessage、onclose等事件回调，导致重连后消息监听、断连触发逻辑全部失效
• 将非序列化的长连接实例存储在React state中不符合state的设计规范，容易出现引用异常

修复后实现方案 #

核心实现逻辑 #

• WebSocket实例挂载到类实例属性（this.client）而非state中，避免状态更新带来的引用问题
• 封装统一的连接初始化方法，首次连接、重连复用同一逻辑，保证事件绑定不会遗漏
• 新增重连锁、指数退避延迟逻辑，避免短时间频繁重连给服务端造成压力
• 组件卸载时主动清理连接、终止重连逻辑，避免内存泄漏

完整代码示例 #

import { W3CWebSocket } from 'websocket';

const SOCKET_URL = '你的websocket服务地址';
const MAX_RECONNECT_DELAY = 30000; // 最大重连延迟30秒
const INIT_RECONNECT_DELAY = 1000; // 初始重连延迟1秒

class ChatApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 只放和视图渲染相关的状态，比如消息列表、未读数等，不要放socket实例
      messageList: [],
      unreadCount: 0
    };
    this.client = null; // socket实例挂载到类实例属性
    this.reconnectTimer = null; // 重连定时器
    this.reconnectDelay = INIT_RECONNECT_DELAY; // 当前重连延迟
    this.isReconnecting = false; // 重连状态锁，避免重复发起重连
  }

  componentDidMount() {
    // 组件挂载后初始化连接
    this.initSocket();
  }

  componentWillUnmount() {
    // 组件卸载时清理资源
    this.clearReconnectTimer();
    if (this.client) {
      // 主动关闭时移除onclose监听，避免触发不必要的重连
      this.client.onclose = () => {};
      this.client.close();
      this.client = null;
    }
  }

  // 统一的socket初始化方法
  initSocket = () => {
    if (this.client?.readyState === W3CWebSocket.OPEN) return;
    
    this.client = new W3CWebSocket(SOCKET_URL);

    // 连接成功回调
    this.client.onopen = () => {
      console.log('WebSocket连接成功');
      // 重置重连参数
      this.reconnectDelay = INIT_RECONNECT_DELAY;
      this.isReconnecting = false;
      this.clearReconnectTimer();
    };

    // 消息接收回调
    this.client.onmessage = (message) => {
      console.log('收到消息:', message.data);
      // 这里处理你的消息业务逻辑，比如更新消息列表到state
      // this.setState(prev => ({
      //   messageList: [...prev.messageList, JSON.parse(message.data)]
      // }))
    };

    // 连接错误回调
    this.client.onerror = (error) => {
      console.error('WebSocket连接错误:', error);
    };

    // 连接关闭回调
    this.client.onclose = (e) => {
      console.log('WebSocket连接关闭，code:', e.code, '原因:', e.reason);
      // 非主动关闭的情况才触发重连（约定code 1000是正常关闭，不需要重连）
      if (e.code !== 1000 && !this.isReconnecting) {
        this.handleReconnect();
      }
    };
  };

  // 重连逻辑
  handleReconnect = () => {
    this.isReconnecting = true;
    this.reconnectTimer = setTimeout(() => {
      console.log(`正在尝试重连，延迟${this.reconnectDelay}ms`);
      // 指数退避，最多到最大延迟
      this.reconnectDelay = Math.min(this.reconnectDelay * 2, MAX_RECONNECT_DELAY);
      this.initSocket();
    }, this.reconnectDelay);
  };

  // 清理重连定时器
  clearReconnectTimer = () => {
    if (this.reconnectTimer) {
      clearTimeout(this.reconnectTimer);
      this.reconnectTimer = null;
    }
  };

  // 发送消息的示例方法
  sendMessage = (content) => {
    if (this.client?.readyState === W3CWebSocket.OPEN) {
      this.client.send(JSON.stringify({
        type: 'chat',
        content: content
      }));
    } else {
      console.warn('WebSocket未连接，消息发送失败');
    }
  };

  render() {
    // 你的视图渲染逻辑
    return <div>聊天应用界面</div>
  }
}

额外注意事项 #

• 可以根据业务需求自定义不需要重连的关闭码，比如用户主动登出时返回1000码，就不会触发重连逻辑
• 网络恢复时如果还没到重连触发时间，可以监听online事件主动触发重连，提升体验
• 生产环境可以加个重连次数上限，达到上限后给用户提示网络异常，引导手动操作

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