ASP.NET Core with - 当对数据库进行某些更改时，使用 SignalR 刷新 UI

Question

我有一个通知面板，它本身保存与当前用户相关的通知。我正在努力理解集线器和客户端脚本一起执行的整个概念。我想刷新使用 SignalR 接收通知的用户的 UI。

中心类

public class NotificationHub : Hub
{
    private readonly ApplicationDbContext dbContext;

    public NotificationHub(ApplicationDbContext dbContext)
    {
        this.dbContext = dbContext;
    }

    public override Task OnConnectedAsync()
    {
        base.OnConnectedAsync();
        var user = this.Context.User.Identity.Name;
        // Groups.AddAsync(Context.ConnectionId, user);

        return Task.CompletedTask;
    }
}

配置：

        services.AddSignalR();
        services.AddSingleton(typeof(IUserIdProvider), typeof(MyUserIdProvider));

路线

        app.UseEndpoints(
            endpoints =>
                {
                    endpoints.MapControllerRoute("areaRoute", "{area:exists}/{controller=Home}/{action=Index}/{id?}");
                    endpoints.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
                    endpoints.MapRazorPages();
                    endpoints.MapHub<NotificationHub>("/notificationHub");
                });

这是向 Dogsitter 用户发送通知的控制器，这里我想刷新 Dogsitter 的通知 UI：

[HttpPost]
    public async Task<IActionResult> SendRequestToDogsitter([FromForm]string id, SendNotificationInputModel inputModel)
    {
        var user = await this.userManager.GetUserAsync(this.User);
        var owner = user.Owners.FirstOrDefault();
        var dogsitter = this.dogsitterService.GetDogsitterByDogsitterId(id);

        await this.ownerService.SendNotification(id, owner, inputModel.Date, inputModel.StartTime, inputModel.EndTime);

        // Refresh the page to reflect changes.
        await this.notificationHubContext.Clients.User(user.UserName).SendAsync("refreshUI");

        // Notify the user who is receiving the notification. (if connected)
        await this.notificationHubContext.Clients.User(owner.User.UserName).SendAsync("sendNotification", dogsitter.User.UserName);

        return this.RedirectToAction("FindDogsitter");
    }

由于我的通知面板存在于布局页面中呈现的部分视图中，因此我将脚本放在布局页面本身中：

 <script>
        var notificationConnection;
        openConnection();

        function openConnection() {
            notificationConnection = new signalR.HubConnection("/notificationHub");
            notificationConnection
                .start()
                .catch(() => {
                    alert("Error while establishing connection");
                });
        }

        notificationConnection.on("SendNotification", (user) => {

        });

        friendConnection.on("refreshUI", (user) => {

        });
    </script>

最后是我在这篇文章之后更改的 MyUserIdProvider：https://docs.microsoft.com/en-us/archive/msdn-magazine/2018/august/cutting-edge-social-style-notifications-with-asp-net-core-signalr

public class MyUserIdProvider : IUserIdProvider
{
    public string GetUserId(HubConnectionContext connection)
    {
        return connection.User.Identity.Name;
    }
}

基本上，当用户由于某些操作而必须通知另一个用户时，我希望服务器侦听函数调用 refreshUI 将刷新目标用户 UI。我真的不知道如何开始使用客户端部分.非常感谢任何帮助。

Answer 1

您只需要一个连接到 signalR 的服务、集线器上已有的通知面板、客户端连接时获取所有通知的方法和广播方法，例如：

在您的集线器上，当客户端连接时，您应该会收到所有通知：

public async Task<OperationResult> GetNotificationsAsync(Groups groups)
{
    try
    {
        IList<OutgoingNotification> notifications = await this.NotificationsManager.GetNotificationsForThisClientAsync(groups).ConfigureAwait(false);

        if (notifications.Count != 0)
        {
            // Send the notifications

            for (int i = 0; i < notifications.Count; i++)
            {
                await this.BroadcastNotificationToCallerAsync(notifications[i]).ConfigureAwait(false);
            }
        }

        return OperationResult.Success();
    }
    catch (ArgumentNullException)
    {
        throw new ServiceException(ServiceExceptionCode.NoDataProvidedToGetNotifications, Resources.RES_No_Data_Provided_To_Get_Notifications);
    }
}

在客户端：

private async getNotifications(groups: ISignalRGroups) {
  await this.hubMessageConnection.invoke("GetNotificationsAsync", groups)
    .then(() => {
      this.onGetNotificationsComplete.emit();
    })
    .catch(() => {
      this.onError.emit(WidgetStateEnum.getNotificationError);
    });
}

然后，当您想发送通知时，只需通过 DI 注入您的管理器中的集线器即可发送通知，例如：

private IHubContext<NotificationsHub, INotificationsHub> NotificationsHub
{
    get
    {
        return this.serviceProvider.GetRequiredService<IHubContext<NotificationsHub, INotificationsHub>>();
    }
}

public async Task SendNotificationToGroupAsync(OutgoingNotification outcomingNotification)
{
    await this.NotificationsHub.Clients.Group(outcomingNotification.Target).Message(outcomingNotification).ConfigureAwait(false);
}