Blazer 服务器端事件

Question

我是Blazor（服务器端）的新手，在我的原型中我想知道是否可以触发服务器端事件（由于客户端和服务器之间始终存在开放连接，也许有一种本机方法可以做到）最新版本8）。

我想实现一个示例用例，其中用户以 Blazor/Razor 表单编辑有关人员的一些元数据。与此同时，另一个用户开始编辑该人，两个表单都会更新。因此，双方都可以看到其他用户的更改（如 Google Docs 或 Office 365 中已知的更改）。

在我的研究中，大多数建议都是关于 SignalR，如下所述： https://stackoverflow.com/a/68000071/1099519

在这篇 Stackoverflow 文章的更新版本中，还有指向 JSRuntime 的链接。

Blazor（服务器端）有原生方式还是我需要使用其他技术，您会推荐什么？

Answer 1

您可以尝试以下样品，可能会满足您的需求。
创建 Blazor Web 应用程序模板。

安装包

Microsoft.AspNetCore.SignalR.Client

创建

MyHub.cs

    public class MyHub : Hub
    {
        public async Task SendProfile(Profile profile)
        {
            await Clients.All.SendAsync("SyncProfile", profile);
        }
    }

Profile.cs

    public class Profile
    {
        public string Name { get; set; } = ""; 
        public string Email { get; set; } = "";
    }

将以下内容添加到program.cs

...
builder.Services.AddSignalR();
...
app.MapHub<MyHub>("/myhub");

使用以下代码修改Home.razor：

@page "/"
@rendermode InteractiveServer
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@implements IAsyncDisposable


Name:
<input @bind="profile.Name" @bind:after="SyncAll" />
<hr />
Email:
<input @bind="profile.Email" @bind:after="SyncAll" />


@code {
    private Profile profile = new Profile();

    private HubConnection? hubConnection;
    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(Navigation.ToAbsoluteUri("/myhub"))
            .Build();

        hubConnection.On<Profile>("SyncProfile", (receivedProfile) =>
        {
            profile = receivedProfile;
            InvokeAsync(StateHasChanged);
        });

        await hubConnection.StartAsync();
    }

    public bool IsConnected =>
        hubConnection?.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }

    private async Task SyncAll()
    {
        if (hubConnection is not null)
        {
            await hubConnection.SendAsync("SendProfile", profile);
        }
    }
}

然后运行项目，打开主页的2个窗口。任一窗口中的修改将相互同步。