.NET 6集成SignalR时React连接成功但无法接收推送消息

问题现象 #

• 浏览器控制台已成功打印SignalR服务连接成功日志
• 后端调用消息发送接口无显性异常抛出
• 前端ReceiveAlert事件始终无响应，收不到推送的告警内容

根因排查及修复方案 #

以下按问题出现概率从高到低排序，逐一检查即可定位解决：

• CORS中间件缺失/执行顺序错误
  当前Program.cs仅注册了CORS服务、定义了跨域策略，但没有调用中间件启用策略，且.NET中间件执行顺序严格，顺序错误会导致策略完全不生效。
  修复后的正确中间件顺序参考：

  var app = builder.Build();
  
  // 顺序不能乱：先路由，再CORS，再鉴权，最后映射端点
  app.UseRouting();
  // 必须显式调用，启用你定义的CORS策略
  app.UseCors("ClientPermission");
  app.UseAuthorization();
  // 建议显式开启WebSocket支持，避免传输协议降级带来的异常
  app.UseWebSockets();
  
  app.MapControllers();
  app.MapHub<AlertHub>("hubs/alert");
  

• 前端回调逻辑存在运行时错误，静默中断事件处理
  当前前端代码有三个直接影响消息接收的问题：

  1. latestAlert ref初始值设为null，收到消息后执行[...latestAlert.current]时会触发null is not iterable错误，直接中断事件回调，控制台没开详细日志很容易漏掉这个报错
  2. 没有更新latestAlert.current的存储值，后续收到消息永远拿不到历史告警数据
  3. setCountAlert(countAlert+1)存在React闭包陷阱，永远拿初始的0值做计算，计数逻辑失效
     另外事件监听注册要放到connection.start()之前，避免连接建立瞬间的消息漏接。之前把连接创建、事件注册、启动连接拆到两个useEffect的写法也容易产生闭包、重复监听问题，合并到一个useEffect更稳妥。
     修复后的前端连接代码参考：

  const [connection, setConnection] = useState(null)
  const [alert, setAlert] = useState([]);
  // 初始值改为空数组，不要设为null
  const latestAlert = useRef([])
  const [countAlert, setCountAlert] = useState(0)
  
  useEffect(() => {
    const newConnection = new HubConnectionBuilder()
        .withUrl('http://localhost:5146/hubs/alert')
        .withAutomaticReconnect()
        .build();
  
    // 先注册事件监听，再启动连接
    newConnection.on('ReceiveAlert', message => {
        const updatedChat = [...latestAlert.current]
        updatedChat.push(message)
        // 同步更新ref存储值
        latestAlert.current = updatedChat
        setAlert(updatedChat)
        // 用函数式更新解决闭包问题
        setCountAlert(prev => prev + 1)
        console.log('收到告警消息:', message)
    });
  
    newConnection.start()
        .then(() => console.log('SignalR连接成功'))
        .catch(e => console.log('连接失败: ', e));
  
    setConnection(newConnection);
  
    // 组件卸载时关闭连接，避免内存泄漏
    return () => {
      if(newConnection.state === HubConnectionState.Connected) {
        newConnection.stop()
      }
    }
  }, []);
  

• 后端实体序列化失败导致消息静默丢弃
  SignalR默认使用System.Text.Json做序列化，如果Alert类没有公共无参构造函数、存在循环引用、属性有非公开访问修饰符限制，会导致序列化失败，外层接口不会抛出显性异常但消息根本没有发出。另外要检查接口的catch块是否加了日志打印，避免异常被吞掉误以为发送成功。
  修复配置参考：

  1. 给Alert类添加公共无参构造函数，确保需要传递的属性都是public修饰
  2. 如果实体存在循环引用，修改SignalR序列化配置：

     builder.Services.AddSignalR()
       .AddJsonProtocol(options => {
         options.PayloadSerializerOptions.ReferenceHandler = ReferenceHandler.IgnoreCycles;
       });
     

• 链路验证方法
  可以先在Hub里加一个测试方法，前端连接成功后主动调用，排除控制器注入IHubContext的问题：

  public class AlertHub : Hub<IAlertClient>
  {
    // 前端连接成功后调用 connection.invoke("TestSend") 验证链路
    public async Task TestSend()
    {
      await Clients.Caller.ReceiveAlert(new Alert { /* 填入测试数据 */ });
    }
  }
  

  如果调用测试方法能收到消息，说明问题出在控制器环节，检查IHubContext注入的泛型参数是否和MapHub的类型完全一致、发送代码行是否真的被执行到。

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