Blazor Server自定义重连UI：如何显示重试次数

要在自定义重连UI里展示“X of Y”这类重试进度文本，核心是利用Blazor内置的连接状态跟踪服务，以下是具体实现方向：

• 依赖内置的ReconnectionHandler服务
  Blazor Server的ReconnectionHandler类（位于Microsoft.AspNetCore.Components.Server.Circuits命名空间）会自动跟踪当前重试次数和最大重试次数。你可以直接通过依赖注入获取这个服务，读取它的CurrentRetryCount和MaxRetryCount属性来拿到所需数据。

• 在自定义组件中注入并监听状态变化
  在你的重连UI组件里，通过[Inject]注入ReconnectionHandler实例，然后订阅它的StateChanged事件，当重试状态更新时触发组件重新渲染：

  [Inject]
  private ReconnectionHandler ReconnectionHandler { get; set; }
  
  protected int CurrentRetry { get; set; }
  protected int MaxRetries { get; set; }
  
  protected override void OnInitialized()
  {
      UpdateRetryValues();
      ReconnectionHandler.StateChanged += OnReconnectionStateChanged;
  }
  
  private void OnReconnectionStateChanged(object sender, EventArgs e)
  {
      UpdateRetryValues();
      StateHasChanged();
  }
  
  private void UpdateRetryValues()
  {
      CurrentRetry = ReconnectionHandler.CurrentRetryCount;
      MaxRetries = ReconnectionHandler.MaxRetryCount;
  }
  
  public void Dispose()
  {
      ReconnectionHandler.StateChanged -= OnReconnectionStateChanged;
  }
  

  之后在组件的Razor模板里，直接输出@CurrentRetry of @MaxRetries就能显示重试进度。

• 额外配置与注意事项

  • 确保项目引用了Microsoft.AspNetCore.Components.Server包，否则无法访问ReconnectionHandler类。
  • 组件要实现IDisposable接口，在销毁时取消订阅事件，避免内存泄漏。
  • 如果需要自定义全局最大重试次数，可以在Program.cs中配置CircuitOptions：

    builder.Services.AddServerSideBlazor()
        .AddCircuitOptions(options => options.MaxRetryCount = 8);
    

    这样ReconnectionHandler的MaxRetryCount会同步这个配置值。

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