如何从Angular 6及以上版本直接连接Azure SignalR Hub？

前置依赖安装 #

直接使用微软官方维护的SignalR JS客户端即可实现直连，无需额外中间层，兼容Angular 6及以上所有版本，安装命令：
npm install @microsoft/signalr

核心实现步骤 #

• 第一步：封装共用SignalR服务
  推荐创建独立服务统一管理连接逻辑，生成服务命令：
  ng generate service services/signalr
  服务代码示例：

  import { Injectable } from '@angular/core';
  import * as signalR from '@microsoft/signalr';
  
  @Injectable({ providedIn: 'root' })
  export class SignalrService {
    private hubConnection: signalR.HubConnection;
  
    // 初始化连接
    public initConnection(azureSignalRHubUrl: string, accessToken: string): void {
      this.hubConnection = new signalR.HubConnectionBuilder()
        .withUrl(azureSignalRHubUrl, {
          accessTokenFactory: () => accessToken
        })
        .withAutomaticReconnect() // 自动重连配置，可选
        .build();
  
      // 启动连接
      this.hubConnection.start()
        .then(() => console.log('Azure SignalR 连接成功'))
        .catch(err => console.error('连接失败: ', err));
    }
  
    // 监听服务端推送消息
    public addMessageListener(methodName: string, callback: (...args: any[]) => void): void {
      this.hubConnection.on(methodName, callback);
    }
  
    // 向服务端发送消息
    public sendMessage(methodName: string, ...args: any[]): Promise<void> {
      return this.hubConnection.invoke(methodName, ...args);
    }
  }
  

  注意：不要在前端硬编码Azure SignalR的连接密钥，访问令牌必须由后端鉴权后生成返回给前端，避免密钥泄露

• 第二步：组件中调用服务
  代码示例：

  import { Component, OnInit } from '@angular/core';
  import { SignalrService } from './services/signalr.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent implements OnInit {
    constructor(private signalrService: SignalrService) {}
  
    ngOnInit(): void {
      // 先从你自己的后端接口获取Azure SignalR Hub地址和访问令牌
      const hubUrl = '你的Azure SignalR Hub完整地址';
      const token = '后端返回的访问令牌';
      
      // 初始化连接
      this.signalrService.initConnection(hubUrl, token);
  
      // 示例：监听名为ReceiveMessage的服务端推送消息
      this.signalrService.addMessageListener('ReceiveMessage', (user, message) => {
        console.log(`收到${user}的消息: ${message}`);
      });
    }
  
    // 示例：向服务端发送消息
    sendTestMsg(): void {
      this.signalrService.sendMessage('SendMessage', '测试用户', '这是一条测试消息')
        .catch(err => console.error('发送失败: ', err));
    }
  }
  

常见注意事项 #

• 需要在Azure SignalR服务端配置跨域策略，允许你的Angular应用域名访问，否则会触发CORS错误
• 测试场景可以临时配置Azure SignalR允许匿名访问，生产环境必须走后端鉴权签发令牌的逻辑
• 如果遇到Angular旧版本兼容问题，可以降级安装@microsoft/signalr@5.x版本，该版本对Angular 6/7/8兼容性更好

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