React Native中使用SignalR无法传递ConnectionId的问题求助

以下是针对React Native环境下SignalR无法传递ConnectionId的排查与解决步骤：

• 确认依赖版本一致性
  确保React Native项目中@microsoft/signalR的版本和ReactJS项目完全一致，不同版本在跨平台环境下的兼容逻辑可能存在差异，优先使用最新稳定版或与Web端匹配的版本。

• 修复闭包作用域问题
  React Native的闭包捕获逻辑可能与浏览器存在差异，避免在useEffect内部定义变量后直接在accessTokenFactory中引用。可以直接在工厂函数中获取令牌（比如从全局状态或常量中），或者用状态变量确保捕获正确的值：

  // 示例：直接在工厂函数中返回常量或状态值
  accessTokenFactory: () => "e48950002479"
  // 若令牌来自状态，确保状态在useEffect依赖中
  accessTokenFactory: () => user.token
  

• 改用useRef管理连接对象
  React Native中useState的更新会触发组件重渲染，容易导致闭包捕获旧的连接对象或令牌值。建议用useRef保存SignalR连接实例，避免状态更新带来的闭包问题：

  import { useRef, useEffect } from 'react';
  import { HubConnectionBuilder, LogLevel } from '@microsoft/signalR';
  
  // ...
  
  const connectionRef = useRef(null);
  
  useEffect(() => {
    const ConnectionId = "e48950002479";
    const newConnection = new HubConnectionBuilder()
      .withUrl('https://none_of_your_business/chatHub', {
        accessTokenFactory: () => ConnectionId
      })
      .configureLogging(LogLevel.Debug)
      .build();
  
    connectionRef.current = newConnection;
  
    connectionRef.current.start()
      .then(() => {
        console.log("SignalR Connected!");
        connectionRef.current.on("ReceiveMessage", (message) => {
          console.log("Received message:", message);
        });
      })
      .catch(error => console.log(`SignalR Connection error: ${error}`));
  
    // 组件卸载时关闭连接
    return () => {
      connectionRef.current?.stop();
    };
  }, []);
  
  const sendMessage = async () => {
    connectionRef.current?.invoke('SendMessage', "1626659a57c6", "Heyo", "1626659a57c6");
  };
  

• 切换传输方式
  React Native的WebSocket实现与浏览器存在差异，可以强制使用Long Polling传输方式测试是否解决问题：

  import { HttpTransportType } from '@microsoft/signalR';
  
  // ...
  .withUrl('https://none_of_your_business/chatHub', {
    accessTokenFactory: () => ConnectionId,
    transport: HttpTransportType.LongPolling
  })
  

• 检查网络请求与权限

  • 查看SignalR的Debug日志（已配置LogLevel.Debug），确认连接请求的Authorization头是否携带了正确的ConnectionId；
  • 确保React Native应用拥有网络权限：Android在AndroidManifest.xml中添加<uses-permission android:name="android.permission.INTERNET" />，iOS若使用非HTTPS地址需配置NSAppTransportSecurity例外。

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