ReactJS函数式应用如何通过HubConnectionBuilder配置Azure SignalR Service连接

你的核心错误是直接将完整的Azure SignalR连接字符串传给了withUrl，这不符合SignalR客户端的配置要求，导致客户端向错误路径发送请求，返回404。以下是正确的配置方案：

错误原因说明 #

withUrl需要接收的是SignalR Hub的访问URL，而非完整的连接字符串。你之前的代码让客户端尝试向当前域名下的/Endpoint=https://xxxxxxxxxx-signalr.service.signalr.net;.../negotiate发送请求，这个路径不存在，因此触发404错误。另外，客户端直接暴露AccessKey存在严重安全风险，生产环境绝对不能这么做。

推荐配置方案（后端协商模式） #

生产环境必须通过后端服务与Azure SignalR Service协商，客户端仅连接后端的Hub端点，避免暴露AccessKey。

客户端（React）代码 #

useEffect(() => {
  console.log('testing const2');
  // 替换为你的后端Hub路由，比如'/chatHub'
  const newConnection = new HubConnectionBuilder()
    .withUrl('/chatHub')
    .withAutomaticReconnect()
    .build();

  setConnection(newConnection);
}, []);

后端（以ASP.NET Core为例）配置 #

1. 在Program.cs中添加Azure SignalR服务配置：

// 从配置文件读取Azure SignalR连接字符串
builder.Services.AddSignalR()
  .AddAzureSignalR(builder.Configuration["AzureSignalR:ConnectionString"]);

// 映射Hub路由，与客户端的withUrl路径保持一致
app.MapHub<ChatHub>("/chatHub");

测试用直接连接（不推荐生产环境） #

如果仅用于本地测试，可从连接字符串中提取Endpoint和AccessKey，生成SAS Token后直接连接：

useEffect(() => {
  console.log('testing const2');
  // 从连接字符串中提取的信息
  const endpoint = 'https://xxxxxxxxxxxx-signalr.service.signalr.net';
  const accessKey = 'm5QcxLFV+3Wx+tzxxn4SUiBqWZUOmzG8nix4OxxxOhg4=';
  const hubName = '你的Hub名称'; // 替换为实际的Hub名称
  const hubUrl = `${endpoint}/${hubName}`;

  // 生成SAS Token（仅测试用，客户端生成会暴露密钥）
  const generateSasToken = (uri, key, expiresInMinutes = 60) => {
    const encodedUri = encodeURIComponent(uri);
    const expires = Math.floor(Date.now() / 1000) + expiresInMinutes * 60;
    const signature = encodeURIComponent(
      crypto.createHmac('sha256', key)
        .update(`${encodedUri}\n${expires}`)
        .digest('base64')
    );
    return `sr=${encodedUri}&sig=${signature}&se=${expires}`;
  };

  const token = generateSasToken(hubUrl, accessKey);

  const newConnection = new HubConnectionBuilder()
    .withUrl(hubUrl, {
      accessTokenFactory: () => token
    })
    .withAutomaticReconnect()
    .build();

  setConnection(newConnection);
}, []);

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