ASP. NET Ядро с - Refre sh Пользовательский интерфейс с SignalR, когда в БД вносятся определенные изменения - PullRequest
Новая
       37

ASP. NET Ядро с - Refre sh Пользовательский интерфейс с SignalR, когда в БД вносятся определенные изменения

0 голосов
/ 11 апреля 2020

У меня есть панель уведомлений, которая сама по себе содержит уведомления, относящиеся к текущему пользователю. Я изо всех сил пытаюсь обернуть голову вокруг всей концепции Hub и клиентских сценариев, выполняемых вместе. Я хочу обновить sh пользовательский интерфейс пользователя, который получает уведомления с помощью SignalR.

Класс концентратора 

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, здесь я хочу обновить sh Интерфейс уведомления Dogsitter: 

[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, который будет обновлять sh целевой пользовательский интерфейс пользователя. Я действительно не знаю, как начать работать с клиентской частью. Любая помощь высоко ценится.

1 Ответ

0 голосов
/ 14 апреля 2020

Вам просто нужен сервис, который подключается к 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);
}
...