如何在ASP.NET 8.0 Blazor中通过ASPNetUserID用SignalR更新指定用户UI

1. 创建Blazor应用并集成SignalR #

• 新建ASP.NET 8.0 Blazor Web App项目，勾选身份认证（确保用户ID能关联到SignalR连接）。
• 安装NuGet包：Microsoft.AspNetCore.SignalR.Client（客户端）和Microsoft.AspNetCore.SignalR（服务端）。
• 在Program.cs中配置SignalR服务：

  builder.Services.AddAuthentication().AddCookie();
  builder.Services.AddAuthorization();
  builder.Services.AddSignalR();
  
  var app = builder.Build();
  
  app.UseAuthentication();
  app.UseAuthorization();
  
  app.MapHub<NotificationHub>("/notificationHub");
  

• 创建SignalR Hub类：

  public class NotificationHub : Hub
  {
      public override async Task OnConnectedAsync()
      {
          var userId = Context.UserIdentifier;
          if (userId == null)
          {
              await Context.AbortAsync();
              return;
          }
          await base.OnConnectedAsync();
      }
  }
  

2. 实现接收WebHook的InterfaceUpdate控制器 #

• 创建API控制器，注入SignalR Hub上下文，处理Azure Event Grid的WebHook请求：

  [ApiController]
  [Route("api/[controller]")]
  public class InterfaceUpdateController : ControllerBase
  {
      private readonly IHubContext<NotificationHub> _hubContext;
  
      public InterfaceUpdateController(IHubContext<NotificationHub> hubContext)
      {
          _hubContext = hubContext;
      }
  
      [HttpPost]
      public async Task<IActionResult> Post([FromBody] WebhookPayload webhookJson)
      {
          // 按Azure Event Grid规范验证WebHook请求合法性
          // ...
  
          // 向指定用户发送触发信号
          await _hubContext.Clients.User(webhookJson.ASPNetUserID)
              .SendAsync("TriggerFinalMethod");
  
          return Ok();
      }
  }
  
  // 定义WebHook载荷模型
  public class WebhookPayload
  {
      public string ASPNetUserID { get; set; }
      // 其他字段根据实际需求补充
  }
  

3. 在Blazor页面中定义FinalMethod #

• 在需要更新的Blazor页面（如Notifications.razor）中，建立SignalR连接并监听触发事件：

  @page "/notifications"
  @inject NavigationManager NavigationManager
  @using Microsoft.AspNetCore.SignalR.Client
  
  <h3>我的通知</h3>
  <div class="notification-update">@updateInfo</div>
  
  @code {
      private HubConnection? _hubConnection;
      private string updateInfo = "等待更新...";
  
      protected override async Task OnInitializedAsync()
      {
          _hubConnection = new HubConnectionBuilder()
              .WithUrl(NavigationManager.ToAbsoluteUri("/notificationHub"))
              .WithAutomaticReconnect()
              .Build();
  
          // 注册服务器事件监听
          _hubConnection.On("TriggerFinalMethod", async () =>
          {
              await FinalMethod();
              StateHasChanged(); // 强制UI刷新
          });
  
          try
          {
              await _hubConnection.StartAsync();
          }
          catch (Exception ex)
          {
              updateInfo = $"连接失败: {ex.Message}";
          }
      }
  
      private async Task FinalMethod()
      {
          // 实现具体UI更新逻辑，比如拉取最新数据
          updateInfo = $"UI已更新: {DateTime.Now:HH:mm:ss}";
          // 示例：var latestData = await _dataService.GetUserLatestData(Context.UserIdentifier);
          // 更新绑定的UI数据源
      }
  
      public async ValueTask DisposeAsync()
      {
          if (_hubConnection != null)
          {
              await _hubConnection.StopAsync();
              await _hubConnection.DisposeAsync();
          }
      }
  }
  

4. 定向触发指定用户的FinalMethod #

当Azure Event Grid向/api/InterfaceUpdate发送包含目标ASPNetUserID的请求时：

1. 控制器接收载荷后，调用SignalR Hub上下文定向推送TriggerFinalMethod事件。
2. SignalR服务器匹配该用户的所有活跃连接，将事件推送到对应客户端。
3. 用户的Blazor页面收到事件后自动执行FinalMethod，通过StateHasChanged()触发UI重新渲染。

注意：需确保Blazor身份认证配置正确，SignalR才能通过Context.UserIdentifier关联用户ID；WebHook请求的合法性验证必须按Azure Event Grid要求实现，防止恶意请求。

内容的提问来源于stack exchange，提问作者Manuel Basiri