在 Angular 中创建多个 Signalr 集线器代理

Question

我在 .net core 3.1 web 中有多个 signalR hub api。我想在同一页面访问 2 个中心，但我不需要在其他页面访问其中一个。我搜索了 signalR，发现所有集线器都使用相同的连接，所以我无法停止连接。在我的项目中，我不知道如何在 angular 中分离集线器。谁能帮助我了解如何在 angular 中使用多个集线器，以及有什么方法可以关闭集线器连接而不是信号器连接。

这是我的代码；

ChartHub.cs

  public class ChartHub : Hub
    {
        public async Task BroadcastChartData(List<ChartModel> data) =>
        await Clients.All.SendAsync("broadcastchartdata", data);
    }

UserHub.cs

    public class UserHub : Hub
    {
        static List<string> userlist = new List<string>() {.....};

        public async Task addUser() {
          await Task.Run(() => {
             userlist.add(Context.ConnectionId);
          });
        } 

        public async Task GetUserList() =>
        await Clients.All.SendAsync("getuserlist", data);
    }

Startup.cs

app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapHub<ChartHub>("/charthub");
            endpoints.MapHub<UserHub>("/userhub");
        });

SignalRService.ts

 private hubConnection: signalR.HubConnection
  private thenable: Promise<void>
  public data: any;

  public startConnection = (hubname) => {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl('https://localhost:44398' + hubname)
      .withAutomaticReconnect()
      .configureLogging(signalR.LogLevel.Information)
      .build();
    this.start();
  }

  private start() {
    this.thenable = this.hubConnection.start();
    this.thenable
      .then(() => console.log('Connection started!'))
      .catch(err => console.log('Error while establishing connection :('));
  }

  public broadcastChartData = () => {
  const data = this.data.map(m => {
    const temp = {
      data: m.data,
      label: m.label
    }
    return temp;
  });
  this.thenable.then(() => {
    this.hubConnection.invoke('broadcastchartdata', data)
      .catch(err => console.error(err));
  });
}
public addBroadcastChartDataListener = () => {
  this.thenable.then(() => {
    this.hubConnection.on('broadcastchartdata', (data) => {
      console.log('broadcasted Data : ',data);
    });
  });
 }

 public userData = () => {
  const data = this.data.map(m => {
    const temp = {
      data: m.data,
      label: m.label
    }
    return temp;
  });
  this.thenable.then(() => {
    this.hubConnection.invoke('adduser')
      .catch(err => console.error(err));
  });
}
public addGetUserListListener = () => {
  this.thenable.then(() => {
    this.hubConnection.on('getuserlist', (data) => {
      console.log('userlist Data : ',data);
    });
  });
}

app.component.ts

constructor(public signalRService: SignalRService) {}
//I want to use hubs like this.
  ngOnInit(): void {
    this.signalRService.startConnection("/userhub");
    this.signalRService.startConnection("/charthub");
    
    this.signalRService.addGetUserListListener();
    this.signalRService.addBroadcastChartDataListener();

    //A hub throws method not found exception.
    this.signalRService.userData();
    this.signalRService.broadcastChartData(); 
    }

问题; 我不知道如何在 angular 中同时使用 2 个独立的集线器，也不知道如何在我不再需要时处理任何集线器连接。

Answer 1

您可以启动两个单独的连接，然后停止连接 n#2，这是一个示例：

/**
 * Configure signalR
 */
private configureSignalR(signalRUrl: string, token: string) {
  this.hubMessageConnection = new signalR.HubConnectionBuilder()
    .configureLogging(signalR.LogLevel.Error).withUrl(signalRUrl + "/userhub",
      {
        accessTokenFactory: () => token
      })
    .withAutomaticReconnect()
    .build();

    this.hubMessageConnection2 = new signalR.HubConnectionBuilder()
    .configureLogging(signalR.LogLevel.Error).withUrl(signalRUrl + "/chartHub",
      {
        accessTokenFactory: () => token
      })
    .withAutomaticReconnect()
    .build();
}

/**
* Connect signalR
*/
private async connectSignalR() {
  await this.hubMessageConnection.start()
    .then(() => {
      // Register application
      this.registerApplication();
    }).catch(() => {
      this.onError.emit(WidgetStateEnum.connectError);
    });

    await this.hubMessageConnection2.start()
    .then(() => {
      // Register application
      this.registerApplication();
    }).catch(() => {
      this.onError.emit(WidgetStateEnum.connectError);
    });
}

/**
 * Disconnect signalR connection n#2
 */
private async disconnectSignalR() {
  this.hubMessageConnection2.stop();
}

在 Angular 中创建多个 Signalr 集线器代理

Creating multiple Signalr hub proxies in Angular

c#

signalr

signalr-hub

asp.net-core-webapi

angular