页面加载初期调用API时SignalR无法稳定接收响应的求助

我基于React前端+.NET后端搭建应用，API请求通过Kafka订阅消费，响应由SignalR在独立线程处理。目前遇到以下问题：

• 场景1：页面已打开后调用API，SignalR可稳定接收并处理响应
• 场景2：在React的useEffect钩子（页面初始加载阶段）调用API，SignalR经常错过响应，接收不稳定

提供的代码 #

SignalR连接注册代码

import * as signalR from '@microsoft/signalr';

class Connector {
  private url = 'https://localhost:5000/serviceGatewayHub';
  public connection: signalR.HubConnection | undefined;
  static instance: Connector | undefined;
  constructor() {
    this.connection = new signalR.HubConnectionBuilder().withUrl(this.url).withAutomaticReconnect().build();
    this.connection.start().catch();
    this.connection.onclose(this.reconnect);
    this.connection.onreconnecting(this.reconnect);
  }

  public static getInstance(): Connector | undefined {
    if (!Connector.instance) Connector.instance = new Connector();
    return Connector.instance;
  }

  reconnect = () => {
    setInterval(this.startConnection, 2000);
  };

  startConnection = () => {
    try {
      if (this.connection?.state !== 'Connected') {
        this.connection?.start().catch();
      }
    } catch (error: any) {
      console.log(error);
    }
  };
}

export default Connector.getInstance;

问题页面代码

import axios from 'axios';
import { useEffect, useState } from 'react';
import Connector from 'src/pages/signalRConnection';

const GetPageData = () => {
  const [signalRData, setSignalRData] = useState<any>();
  const [signalRHub, setSignalRHub] = useState(Connector);

  useEffect(() => {
    try {
      if (!signalRHub) {
        try {
          setSignalRHub(Connector);
        } catch { }
      } else if (signalRHub?.connection) {
        signalRHub.connection?.off("GetDataResponse");
        signalRHub.connection?.on("GetDataResponse", async (message) => {
          setSignalRData(message.Data);
        });

        return () => {
          signalRHub.connection?.off("GetDataResponse");
        };
      }
    } catch (error: any) {
      console.log(error);
    }
  });

  useEffect(() => {
    axios.get("https://localhost:5000/getData", getHeadersForAPI());
  }, []);

  const getHeadersForAPI = () => {
    return {
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: `Bearer ${localStorage.getItem('token')}`,
        TokenSalt: 'secretTokenSalt',
      },
    };
  };

  return (
    <>
      <h1>Data received via signalR: {signalRData}</h1>
    </>
  )
};
export default GetPageData;

1. SignalR连接未就绪就发送请求：Connector构造函数中直接调用connection.start()但未等待连接完成，页面初始加载时API请求可能在SignalR连接建立/监听注册前就发送，导致响应返回时前端无法捕获
2. 组件逻辑冗余且不稳定：页面中将SignalR实例存入useState是多余操作，且第一个useEffect无依赖数组，会频繁触发重复注册/取消监听逻辑
3. 错误吞掉导致排查困难：start().catch()未处理错误，无法及时发现连接失败问题
4. 重连逻辑缺陷：setInterval会重复创建定时器，导致多次重复发起连接请求

1. 重构SignalR连接类，确保连接状态可追踪 #

修改Connector类，添加连接就绪的Promise供外部等待，同时修复重连逻辑：

import * as signalR from '@microsoft/signalr';

class Connector {
  private url = 'https://localhost:5000/serviceGatewayHub';
  public connection: signalR.HubConnection;
  static instance: Connector | undefined;
  private connectionReadyPromise: Promise<void>;
  private reconnectTimer: NodeJS.Timeout | undefined;

  constructor() {
    this.connection = new signalR.HubConnectionBuilder()
      .withUrl(this.url)
      .withAutomaticReconnect()
      .build();
    
    // 保存连接就绪的Promise，供外部等待
    this.connectionReadyPromise = this.startConnection();
    
    this.connection.onclose(() => this.scheduleReconnect());
    this.connection.onreconnecting(() => this.scheduleReconnect());
  }

  public static getInstance(): Connector {
    if (!Connector.instance) {
      Connector.instance = new Connector();
    }
    return Connector.instance;
  }

  // 对外暴露等待连接就绪的方法
  public waitForConnectionReady(): Promise<void> {
    return this.connectionReadyPromise;
  }

  private scheduleReconnect = () => {
    // 避免重复创建定时器，先清除再设置
    if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
    this.reconnectTimer = setTimeout(this.startConnection, 2000);
  };

  private startConnection = async (): Promise<void> => {
    try {
      if (this.connection.state !== 'Connected') {
        await this.connection.start();
        console.log('SignalR连接成功');
        // 连接成功后更新Promise，确保后续等待能拿到最新状态
        this.connectionReadyPromise = Promise.resolve();
      }
    } catch (error: any) {
      console.error('SignalR连接失败:', error);
      // 连接失败时返回rejected状态的Promise，便于前端捕获处理
      this.connectionReadyPromise = Promise.reject(error);
    }
  };
}

export default Connector.getInstance;

2. 修复页面组件逻辑，确保监听就绪后再发请求 #

修改页面的useEffect逻辑，等待SignalR连接就绪后再注册监听并发送API请求，同时移除冗余的state存储：

import axios from 'axios';
import { useEffect, useState } from 'react';
import Connector from 'src/pages/signalRConnection';

const GetPageData = () => {
  const [signalRData, setSignalRData] = useState<any>();
  // 直接获取单例实例，无需存入state
  const signalRHub = Connector();

  useEffect(() => {
    let isMounted = true; // 防止组件卸载后更新state

    const setupSignalRListener = async () => {
      try {
        // 等待SignalR连接完全就绪
        await signalRHub.waitForConnectionReady();
        
        if (!isMounted) return;

        // 注册响应监听
        const handleDataResponse = async (message: any) => {
          if (isMounted) {
            setSignalRData(message.Data);
          }
        };
        
        signalRHub.connection.on("GetDataResponse", handleDataResponse);

        // 组件卸载时移除监听，避免内存泄漏
        return () => {
          isMounted = false;
          signalRHub.connection.off("GetDataResponse", handleDataResponse);
        };
      } catch (error) {
        console.error('SignalR监听初始化失败:', error);
      }
    };

    setupSignalRListener();
  }, [signalRHub]); // 依赖signalRHub，确保只执行一次

  useEffect(() => {
    const fetchDataAfterConnectionReady = async () => {
      try {
        // 必须等待SignalR连接就绪后再发送API请求
        await signalRHub.waitForConnectionReady();
        await axios.get("https://localhost:5000/getData", getHeadersForAPI());
      } catch (error) {
        console.error('API请求失败:', error);
      }
    };

    fetchDataAfterConnectionReady();
  }, [signalRHub]); // 依赖signalRHub，确保只执行一次

  const getHeadersForAPI = () => {
    return {
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: `Bearer ${localStorage.getItem('token')}`,
        TokenSalt: 'secretTokenSalt',
      },
    };
  };

  return (
    <>
      <h1>Data received via signalR: {signalRData}</h1>
    </>
  )
};
export default GetPageData;

3. 额外优化建议 #

• 后端添加请求ID关联：API请求时生成唯一ID，SignalR响应时携带该ID，前端可根据ID匹配响应，避免多请求场景下的响应混乱
• 连接状态可视化：在SignalR连接、重连、断开时给用户显示对应的状态提示，提升体验
• 错误监控：给SignalR连接和API请求添加全局错误捕获，便于线上问题排查

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