首次连接失败后SignalR陷入重连停滞问题求助

环境与基础实现 #

后端基于ASP.NET WebAPI，前端使用Angular，组件内SignalR连接核心代码：

connection: signalR.HubConnection | undefined;

connect(): void {
  this.connection = new signalR.HubConnectionBuilder()
    .configureLogging(signalR.LogLevel.Information)
    .withUrl(myUrl)
    .build();

  this.connection
    .start()
    .then(() => {
      console.log('connected');
    })
    .catch((err) => {
      console.warn(err);
    });
}

后端重启重连逻辑：

this.connection.onclose(() => {
  this.attemptToReconnectEvery5Seconds();
});

场景对比 #

正常执行流程 #

• 后端启动 → Angular启动建立连接 → 后端关闭触发断开 → Angular每5秒重连 → 后端重启后成功重连

异常流程 #

• 后端关闭状态下启动Angular → Angular每5秒尝试重连 → 后端重启后，Angular陷入「Connecting」状态无法完成连接 → 刷新页面恢复正常

已尝试的无效操作 #

重连前清除旧连接实例：

this.connection.stop();
this.connection = undefined;

手动触发connect()后，后端协商请求返回200，但connection.start()既不触发成功日志也不触发错误日志，调用处于停滞状态。

排查思路 #

1. 异步操作未彻底终止：首次连接失败时，旧连接的异步请求可能未完全终止，干扰新连接创建。修改重连逻辑，确保等待旧连接停止完成：

async attemptToReconnectEvery5Seconds(): Promise<void> {
  if (this.connection) {
    await this.connection.stop().catch(() => {});
    this.connection = undefined;
  }
  setTimeout(() => this.connect(), 5000);
}

2. 提升日志级别排查细节：将SignalR日志级别改为LogLevel.Trace，查看首次连接失败到重连过程中的协商、握手阶段日志，确认是否存在状态流转异常或隐性错误。
3. Angular Zone 适配：SignalR的异步回调可能未被Angular Zone捕获，导致then/catch不触发。将连接启动逻辑包裹在NgZone.run()中：

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

// 修改connect内的start逻辑
this.connection.start()
  .then(() => this.ngZone.run(() => console.log('connected')))
  .catch((err) => this.ngZone.run(() => console.warn(err)));

4. 避免浏览器缓存干扰：首次失败的请求可能被浏览器缓存，在连接URL后添加随机参数：

.withUrl(`${myUrl}?t=${Date.now()}`)

5. 版本兼容性检查：确认前端@microsoft/signalr包版本与后端ASP.NET SignalR版本完全匹配，版本不兼容可能导致握手逻辑异常。

临时修复方案 #

用页面刷新替代重连逻辑，可覆盖两种场景：

tryToReconnect(): void {
  location.reload();
}

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