在SignalR中配置不同备用URL适配Azure API Management

我想通过Azure API Management（APIM）实现SignalR，但目前Azure APIM不支持同一后缀下配置不同类型的API，导致无法将SignalR设置为以WebSocket为主协议、ServerSentEvent/LongPolling为备用协议。我打算用规避方案：在SignalR客户端设置两个URL，一个用于WebSocket主连接，另一个用于备用协议连接。

我的初步实现思路如下：

let connection = new HubConnectionBuilder()
  .withUrl('url1', {transport: HttpTransportType.WebSockets})
  .build();
connection
  .start()
  .catch(reason => {
    if(reason === 'WebSocket not supported') {
      connection = new HubConnectionBuilder()
        .withUrl('url2')
        .build();
      connection.start();
  }
});

但我找不到可靠的方式判断连接失败是否是因为WebSocket不支持，请问这个方案可行吗？有没有更好的实现方式？

补充：我查看SignalR源码找到了对应的错误类型，请问以下实现是否存在问题？

let connection = new HubConnectionBuilder()
  .withUrl('url1', {transport: HttpTransportType.WebSockets})
  .build();
connection
  .start()
  .catch(err => {
    if((err instanceof UnsupportedTransportError && err.transport === HttpTransportType.WebSockets) || 
   (err instanceof AggregateErrors && 
   err.innerErrors.some(ie => ie instanceof UnsupportedTransportError && ie.transport === HttpTransportType.WebSockets))) {
      connection = new HubConnectionBuilder()
        .withUrl('url2')
        .build();
      connection.start();
  }
});

方案可行性 #

你提出的双URL规避方案是可行的，核心思路是强制优先使用WebSocket连接指定URL，失败后切换到备用URL让SignalR自动协商支持的备用协议，刚好适配Azure APIM的限制。

补充实现的问题分析 #

你基于源码错误类型的实现比字符串匹配更可靠，但存在几个细节问题：

1. 未处理备用连接失败：备用URL的start()调用没有错误捕获，一旦备用连接也失败，会产生未处理的Promise异常。
2. 拼写错误：代码里的AggregateErrors应为标准JS错误类型AggregateError。
3. 无错误分层处理：没有区分“WebSocket不支持”和其他连接失败（如网络问题）的场景，可能导致不必要的切换。

优化后的实现 #

async function initSignalRConnection() {
  let connection;
  try {
    // 优先尝试WebSocket连接url1
    connection = new HubConnectionBuilder()
      .withUrl('url1', { transport: HttpTransportType.WebSockets })
      .build();
    await connection.start();
    console.log('WebSocket连接成功');
  } catch (err) {
    // 精准判断是否为WebSocket不支持的错误
    const isWebSocketUnsupported = 
      (err instanceof UnsupportedTransportError && err.transport === HttpTransportType.WebSockets) ||
      (err instanceof AggregateError && 
        err.innerErrors?.some(ie => 
          ie instanceof UnsupportedTransportError && ie.transport === HttpTransportType.WebSockets
        )
      );

    if (isWebSocketUnsupported) {
      try {
        // 切换到备用URL，自动协商支持的协议
        connection = new HubConnectionBuilder()
          .withUrl('url2')
          .build();
        await connection.start();
        console.log('备用协议连接成功');
      } catch (backupErr) {
        console.error('备用连接也失败:', backupErr);
        // 此处可添加重试逻辑或用户友好提示
      }
    } else {
      console.error('WebSocket连接失败（非协议不支持）:', err);
      // 处理网络异常、URL无效等其他错误
    }
  }
  return connection;
}

// 初始化连接
initSignalRConnection();

额外建议 #

• 确保url1在APIM中仅配置WebSocket类型的API，url2配置支持ServerSentEvent/LongPolling的API，避免协议冲突。
• 结合SignalR内置的reconnect()方法添加断连重连逻辑，提升连接稳定性。
• 测试时模拟WebSocket禁用场景（如浏览器关闭WebSocket支持），验证切换逻辑是否正常触发。

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