Asp.Net Core 6 Signal-R连接耗时4分钟问题求助

问题概述 #

基于.NET 6的ASP.NET Core项目集成SignalR Hub，搭配Angular 13客户端，已指定仅使用WebSockets传输，但连接成功前会挂起4分钟，Hub的OnConnectedAsync方法延迟触发。

相关代码如下：

服务端（Program.cs） #

builder.Services.AddSignalR();

// ...

app.MapHub<GameHub>("/api/game-hub", options =>
{
    options.Transports = Microsoft.AspNetCore.Http.Connections.HttpTransportType.WebSockets;
});

Angular客户端 #

public readonly connection = new SignalR.HubConnectionBuilder().withUrl("https://localhost:44405/api/game-hub").build();

this.connection.start().then(() => {
  this.connectionId = `Success: ${this.connection.connectionId}`;
}, (error: any) => {
  this.connectionId = `error ${error}`;
}).catch((error: any) => {
  this.connectionId = `threw ${error}`;
});

Hub代码 #

public override Task OnConnectedAsync()
{
    return base.OnConnectedAsync();
}

排查与解决建议 #

1. 处理HTTPS证书信任问题 #

本地开发环境的自签名HTTPS证书可能未被Angular客户端信任，导致WebSocket握手延迟：

• 手动信任证书：运行dotnet dev-certs https --trust命令（Windows/macOS适用）。
• 开发环境临时禁用证书验证（仅测试用）：修改客户端连接配置

  public readonly connection = new SignalR.HubConnectionBuilder()
    .withUrl("https://localhost:44405/api/game-hub", {
      skipNegotiation: true,
      transport: SignalR.HttpTransportType.WebSockets
    })
    .build();
  

2. 强制跳过协商流程 #

由于已指定仅用WebSockets，跳过协商步骤可减少请求往返，避免协商阶段延迟：

• 客户端添加skipNegotiation: true并明确指定传输类型（如上述代码）。
• 服务端已限制传输类型为WebSockets，无需额外修改。

3. 检查中间件顺序 #

确保SignalR Hub的映射在正确的中间件顺序中，.NET 6 Program.cs的正确顺序示例：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSignalR();

var app = builder.Build();

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();

// 必须在UseRouting之后、MapControllers之前映射Hub
app.MapHub<GameHub>("/api/game-hub", options =>
{
    options.Transports = Microsoft.AspNetCore.Http.Connections.HttpTransportType.WebSockets;
});

app.MapControllers();

app.Run();

4. 排查防火墙/代理干扰 #

本地防火墙、杀毒软件或代理工具（如Fiddler）可能拦截WebSocket连接，导致超时重试：

• 关闭代理工具，或将localhost添加到代理例外列表。
• 临时关闭防火墙，测试连接是否恢复正常。

5. 启用详细日志定位问题 #

通过日志查看连接过程中的具体延迟点：

• 服务端在appsettings.json添加日志配置：

  {
    "Logging": {
      "LogLevel": {
        "Default": "Information",
        "Microsoft.AspNetCore.SignalR": "Debug",
        "Microsoft.AspNetCore.Http.Connections": "Debug"
      }
    }
  }
  

• 客户端添加事件监听：

  this.connection.onclose(error => console.error("连接关闭:", error));
  this.connection.onreconnecting(error => console.warn("正在重连:", error));
  this.connection.onreconnected(connectionId => console.log("重连成功:", connectionId));
  

6. 调整Angular客户端初始化时机 #

确保在组件生命周期的合适阶段启动连接，避免过早初始化导致资源未就绪：

ngOnInit(): void {
  // 在ngOnInit中启动连接，而非构造函数
  this.connection.start().then(/* ... */);
}

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