SignalR协商成功但消息无法发送（.NET/Angular环境）

服务端排查点 #

• 消息发送上下文验证
  如果StartProcess是通过API接口/后台任务触发（而非客户端直接调用Hub方法），必须使用IHubContext<ProgressHub>注入发送消息，不能直接实例化Hub类。示例代码：

  public class ProgressController : ControllerBase
  {
      private readonly IHubContext<ProgressHub> _hubContext;
  
      public ProgressController(IHubContext<ProgressHub> hubContext)
      {
          _hubContext = hubContext;
      }
  
      [HttpPost("start")]
      public async Task<IActionResult> StartProcess()
      {
          for (int i = 0; i <= 100; i += 10)
          {
              // 确保目标客户端范围正确，比如Clients.All/Clients.Client(connectionId)
              await _hubContext.Clients.All.SendAsync("ReceiveProgressUpdate", i);
              await Task.Delay(500);
          }
          return Ok();
      }
  }
  

  注意：如果用Clients.Caller，仅当StartProcess是客户端通过SignalR直接调用的Hub方法时才有效，后台触发场景下Caller无对应连接。

• Hub注册与路由匹配
  确认服务端Hub路由（如/progressHub）和客户端连接URL完全一致，大小写、路径拼写无错误。无论用app.MapHub还是UseEndpoints，确保路由配置唯一且无冲突：

  // 正确注册顺序：CORS之后，MapControllers之前
  app.UseCors("AllowAngular");
  app.MapHub<ProgressHub>("/progressHub");
  app.MapControllers();
  

客户端排查点 #

• 消息订阅时机与名称匹配
  必须在Hub连接启动成功后再订阅消息，且消息名称大小写完全匹配（SignalR消息名大小写敏感）：

  async startConnection() {
      await this.hubConnection.start()
          .then(() => {
              // 连接成功后再订阅
              this.hubConnection.on('ReceiveProgressUpdate', (progress) => {
                  console.log(progress); // 先打印验证是否收到消息
                  this.updateProgress(progress);
              });
          })
          .catch(err => console.error(err));
  }
  

• Angular NgZone更新问题
  SignalR回调运行在Angular外部线程，直接更新数组不会触发视图刷新，需用NgZone包裹更新逻辑：

  import { NgZone } from '@angular/core';
  
  constructor(private ngZone: NgZone) {}
  
  private updateProgress(progress: number) {
      this.ngZone.run(() => {
          this.progressUpdates.push(progress);
      });
  }
  

• 连接实例单例验证
  确保SignalRService是根级别单例（providedIn: 'root'），避免重复创建连接导致订阅失效：

  @Injectable({ providedIn: 'root' })
  export class SignalRService {
      private hubConnection: HubConnection;
      // ...
  }
  

CORS与中间件顺序验证 #

• 必须保证CORS中间件在UseRouting之后、MapHub之前，且开启AllowCredentials()（SignalR需要携带认证信息）：

  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowAngular",
          policy => policy.WithOrigins("http://localhost:4200")
                          .AllowAnyHeader()
                          .AllowAnyMethod()
                          .AllowCredentials());
  });
  

• 客户端连接时需同步开启withCredentials：

  this.hubConnection = new HubConnectionBuilder()
      .withUrl('https://localhost:5001/progressHub', { withCredentials: true })
      .build();
  

调试技巧 #

1. 查看Chrome开发者工具Network > WebSocket > Frames：如果能看到服务端发送的消息帧，说明服务端发送正常，问题在客户端；如果看不到，说明服务端发送逻辑有误。
2. 在客户端订阅回调中加console.log，验证是否进入回调函数。

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