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

如何解决在Angular中创建多个Signalr集线器代理

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

这是我的代码；

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(); 
    }

问题； 我不知道如何同时以角度使用两个独立的集线器，也不知道当我不再需要它时如何处置任何集线器连接。

解决方法

您可以启动两个单独的连接，然后停止连接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();
}