Angular和Net Core中的SignalR,试图刷新连接列表
请与我露面,我正在尝试学习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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论