Angular和Net Core中的SignalR,试图刷新连接列表

发布于 2025-01-23 11:44:15 字数 2450 浏览 0 评论 0原文

请与我露面,我正在尝试学习Singalr,我什至看不到我的标签名称,大多数教程只是client.all.sendasync ,他们获得了网站的点击。

我想制作一个聊天应用程序,然后遵循Microsoft的一些文档,以供后端使用,但我没有为客户提供它。

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

这基本上是我拥有的所有代码,我想分解一些解释。

对我来说,令人困惑的是,HubConnection的某些方法是Promise void ,我觉得我不知道如何交流与后端。

我在这里要实现的目标是显示所有连接ID的列表,以后我将使用用户名进行操作,但是当我进行新连接或断开连接时,我不知道如何刷新列表或推入列表,因为< code> onclose()不做我认为应该做的事情,start()Promise,它不会推动新连接我在那里尝试的方式。

我是否需要创建一个控制器并在Hub中调用方法?但是再说一次,当用户断开连接时,我如何以角度反应,我假设ondisconnectasync在后端被调用,但是我该如何告诉客户端?由于客户没有对变化做出反应的观察。

HUB看起来像这样

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

,我没有控制器,因为我不知道为什么需要它。

我认为帮助我通过连接列表解决这个问题将是一个巨大的帮助,以了解如何在Angular Signalr和后端中心或控制器之间进行通信。 我想要的只是在发生这种情况时在列表中推出新连接,并在用户关闭他的浏览器选项卡时将其删除,我无法做到这一点,我不知道我应该如何使用控制器,因为ondisconnectanectasync被调用无论如何。

我知道我在问很多,谢谢你的宝贵时间

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文