如何在 Blazor 服务器端更新多个用户?

kg7*_*743 7 signalr blazor blazor-server-side

假设我想要一个用户界面,其中组中的用户具有同步视图。想象一个群聊应用程序,群中的每个人都应该看到完全相同的消息。

当用户向群组发布消息时,整个群组都需要接收它。

使用 JS,我可能会使用 SignalR 组,并让前端生成一个 SignalR 事件,并发布一条消息。服务器端集线器然后将该消息发送给该组。

在服务器端 Blazor 上,由于所有用户的状态都已经在服务器上,我将如何协调更新 Blazor 上用户组的 UI?

小智 7

我试图实现类似的目标。一段时间后,我发现了一种方法。凯尔的回答帮助我弄清楚了。

你必须创建一个类,让我们调用Messenger,它有一个 Action 属性,以及一个调用这个 Action 的方法。

public Action OnMessage { get; set; }
public void AddMessage(string message)
{
  Text = message;
  OnMessage?.Invoke();
}
Run Code Online (Sandbox Code Playgroud)

在剃刀组件中,注入 Messenger。此外,您应该为 OnMessage 属性设置一个事件,然后调用 StateHasChanged 以告诉视图它可以更新

@inject Messenger messenger
// rest of component here, and then the code block 
protected override async Task OnInitializedAsync()
{
  messenger.OnMessage += () =>
  {
    // do something with the messenger.Text here
    InvokeAsync(this.StateHasChanged);
  };
}
Run Code Online (Sandbox Code Playgroud)

不要忘记,在您的 Startup 类中,将 Messenger 类添加为 Singleton 以使其可用于注入

services.AddSingleton<Messenger>();
Run Code Online (Sandbox Code Playgroud)

我希望这就是你试图实现的目标,它也可以帮助其他人。干杯。