ASP.NET 核心 - 當對 DB 進行某些更改時，使用 SignalR 刷新 UI

Question

我有一個通知面板，它本身保存與當前用戶相關的通知。 我正在努力理解集線器和客戶端腳本一起執行的整個概念。 我想刷新使用 SignalR 接收通知的用戶的 UI。

集線器 class

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 用戶發送通知的 controller，這里我想刷新 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 -核心信號

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

基本上，當用戶由於某些操作而必須通知另一個用戶時，我希望服務器監聽 function 調用 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);
}