SignalR in Angular and NET Core, trying to refresh connections lists

Question

Please bare with me I am trying to learn SingalR, I can't even see my tab names anymore and most of the tutorials just do Client.All.SendAsync and they got their clicks for their websites.

I wanna make a chat app and I followed some documentation from Microsoft for the backend which works but I don't get it for the client.

ngOnInit() {

this.hubConnection = new HubConnectionBuilder()
        .withUrl('https://localhost:7005/chat/')
        .withAutomaticReconnect()
        .build();

this.hubConnection
  .start()
  .then(() => {
      console.log('Connection started!');

      this.hubConnection.invoke('GetAllActiveConnections').then((result: any) => {
        this.connections = result;
    });
  }) 
  .catch((err:any) => console.log('Error while establishing connection :('));

  this.hubConnection.on('SendMessage', (nick: string, receivedMessage: string) => {
    this.messages.push(receivedMessage);
  });

  this.hubConnection.onclose(() => {
    console.log('connection closed')
  });
}

public sendMessage(): void {
  this.hubConnection
    .invoke('SendMessage', this.nick, this.message)
    .catch((err:any) => console.error(err));
}

This is basically all the code I have and I wanna break it down for some explanations.

what is confusing for me is that some methods from HubConnection are either a Promise or void and I feel stuck I don't know how to communicate with the backend.

What I am trying to achieve here is displaying a list of all connection ids and later I will do it with usernames but when I do a new connection or I disconnect I don't know how to refresh the list or push into the list since onClose() doesn't do what I think it should do, and start() is a Promise, which doesn't push new connections the way I am trying there.

Do I need to create a controller and call methods in the Hub? but then again how do I react in Angular when the user disconnects, I am assuming OnDisconnectAsync gets called in the backend but how do I tell that to the client? Since the client has no Obserable to react on changes.

The Hub looks like this

private readonly static ConnectionMapping<string> _connections =
        new ConnectionMapping<string>();
public async Task SendMessage(string user, string message)
{
    await Clients.All.SendAsync("SendMessage", user, message);
}

public string GetConnectionId() => Context.ConnectionId;

public override Task OnConnectedAsync()
{
    _connections.Add("bob", Context.ConnectionId);

    return base.OnConnectedAsync();
}

public override Task OnDisconnectedAsync(Exception ex)
{
    _connections.Remove("bob", Context.ConnectionId);

    return base.OnDisconnectedAsync(ex);
}

public IEnumerable<string> GetAllActiveConnections()
{
    return _connections.GetConnections("bob");
}

And I have no controller because I don't know why I would need it.

I think helping me solving this problem with connection list would be a tremendous help to understand how to communicate between angular signalr and the backend hub or a controller. All I want is to push a new connection in the list when that happens and remove it when user closes his browser tab and I have no way of doing it and I don't know how should I do it with a controller since OnDisconnectAsync gets called anyways.

I know I am asking a lot and thank you for your time