如何在Angular应用中为@microsoft/signalr设置SignalR组

要让Angular客户端仅接收特定组的SignalR消息，核心是让客户端主动加入目标组，配合你已有的服务端组消息发送逻辑即可实现。以下是具体修改步骤：

1. 给Azure Function添加组管理接口 #

需要新增一个Http触发器函数，用于处理客户端的加入组请求：

[FunctionName("addToGroup")]
public static async Task<IActionResult> AddToGroup(
    [HttpTrigger(AuthorizationLevel.Anonymous, "post", Route = null)] HttpRequest req,
    [SignalR(HubName = "broadcast")] IAsyncCollector<SignalRGroupAction> signalRGroupActions,
    ILogger log)
{
    var requestBody = await new StreamReader(req.Body).ReadToEndAsync();
    var groupData = JsonSerializer.Deserialize<GroupRequest>(requestBody);

    await signalRGroupActions.AddAsync(new SignalRGroupAction
    {
        UserId = groupData.ConnectionId,
        GroupName = groupData.GroupName,
        Action = GroupAction.Add
    });

    return new OkResult();
}

// 定义接收请求的模型类
public class GroupRequest
{
    public string ConnectionId { get; set; }
    public string GroupName { get; set; }
}

如果需要支持退出组，可以复制上述代码，将Action = GroupAction.Add改为Action = GroupAction.Remove，并将函数名改为removeFromGroup。

2. 修改Angular的SignalR服务，实现加入组逻辑 #

客户端连接成功后，获取自身连接ID，调用上面的接口加入指定组：

import { Injectable } from '@angular/core';
import * as signalR from '@microsoft/signalr';
import { HubConnection } from '@microsoft/signalr';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class SignalRService {
  private hubConnection: HubConnection;
  messages: Subject<string> = new Subject();
  private apiBaseUrl = 'http://localhost:7144/api';

  constructor(private http: HttpClient) { }

  async init(targetGroupName: string) {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl(`${this.apiBaseUrl}/negotiate`)
      .configureLogging(signalR.LogLevel.Information)
      .build();

    try {
      await this.hubConnection.start();
      console.log('SignalR连接成功');
      
      // 获取当前连接ID并加入目标组
      const connectionId = this.hubConnection.connectionId;
      if (connectionId && targetGroupName) {
        await this.http.post(`${this.apiBaseUrl}/addToGroup`, {
          connectionId: connectionId,
          groupName: targetGroupName
        }).toPromise();
        console.log(`已加入组：${targetGroupName}`);
      }
    } catch (err) {
      console.error('SignalR连接失败:', err.toString());
      // 连接失败自动重试
      setTimeout(() => this.init(targetGroupName), 5000);
    }

    this.hubConnection.on('notify', (data: any) => {
      this.messages.next(data);
    });

    // 连接断开后自动重连并重新加入组
    this.hubConnection.onclose(async () => {
      console.log('SignalR连接断开，尝试重连');
      await this.init(targetGroupName);
    });
  }
}

3. 在Angular组件中调用服务 #

在需要接收组消息的组件中，传入目标组名初始化服务：

import { Component, OnInit } from '@angular/core';
import { SignalRService } from './signal-r.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private signalRService: SignalRService) {}

  ngOnInit(): void {
    // 传入你要加入的组名，比如你的服务端指定的"myGroupName"
    this.signalRService.init('myGroupName');
  }
}

关键注意事项 #

• 生产环境安全：当前代码使用AuthorizationLevel.Anonymous，生产环境建议改为AuthorizationLevel.Function或添加身份验证，防止恶意用户随意加入组。
• 重连逻辑：添加了断开自动重连并重新入组的逻辑，保证客户端在网络波动后仍能接收组消息。

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