如何在不刷新页面丢失数据的前提下自动重连Blazor Server应用？

以下方案可实现无需刷新页面的自动重连，同时避免用户输入内容丢失：

• 自定义客户端重连逻辑
  覆盖Blazor默认的强制刷新逻辑，自定义重连规则，在_Layout.cshtml（.NET 6+）或index.html的blazor.server.js加载前添加如下配置：

<!-- 关闭blazor自动启动，自定义配置后手动启动 -->
<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
Blazor.start({
  reconnectionOptions: {
    maxRetries: 30, // 最大重试次数，可根据场景调整
    retryIntervalMilliseconds: 2000, // 每次重试间隔2秒
  },
  reconnectionHandler: {
    onConnectionDown: () => {
      // 此处可添加前端弱提示，告知用户连接断开正在重连
      console.log("连接断开，正在尝试恢复");
    },
    onReconnectionFailed: async () => {
      try {
        // 重试失败后主动触发重新连接逻辑，不跳转刷新
        await Blazor.defaultReconnectionHandler._reconnect();
      } catch (e) {
        // 极端情况重连失败时再提示用户，不自动刷新
        alert("连接长时间无法恢复，请保存已输入内容后手动刷新");
      }
    }
  }
});
</script>

该配置兼容.NET 5及以上版本的Blazor Server

• 客户端输入状态持久化兜底
  即便是极端场景下服务端释放了旧连接，也可以通过本地存储自动回填用户已输入内容，避免丢失，表单组件示例代码如下：

public partial class EditFormComponent : IDisposable
{
    private string _formInput;
    private const string _storageKey = "EditForm_InputCache";

    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    protected override async Task OnInitializedAsync()
    {
        // 组件初始化时读取本地缓存的输入内容
        var cachedInput = await JSRuntime.InvokeAsync<string>("sessionStorage.getItem", _storageKey);
        if (!string.IsNullOrWhiteSpace(cachedInput))
        {
            _formInput = cachedInput;
        }
    }

    private async Task HandleInputChange(ChangeEventArgs e)
    {
        _formInput = e.Value?.ToString();
        // 输入实时同步到本地sessionStorage，页面关闭自动清除，不会永久留存
        await JSRuntime.InvokeVoidAsync("sessionStorage.setItem", _storageKey, _formInput);
    }

    private async Task HandleSubmit()
    {
        // 表单提交成功后清除本地缓存
        await JSRuntime.InvokeVoidAsync("sessionStorage.removeItem", _storageKey);
        // 其余提交逻辑
    }

    public async void Dispose()
    {
        // 组件销毁时同步清除缓存
        await JSRuntime.InvokeVoidAsync("sessionStorage.removeItem", _storageKey);
    }
}

• 调整服务端断开连接保留时长
  默认服务端会保留断开的连接上下文300秒，可根据用户后台停留的实际场景调整时长，在Program.cs中配置：

builder.Services.AddServerSideBlazor(options =>
{
    // 调整断开连接的上下文最长保留时间，最长可设置到24小时
    options.DisconnectedCircuitRetentionPeriod = TimeSpan.FromHours(4);
    // 调整最大保留的断开连接数量，根据服务端内存资源调整
    options.DisconnectedCircuitMaxRetained = 200;
});

以上方案组合使用可覆盖绝大多数用户后台停留后切回的场景，无需刷新页面即可恢复连接，即使极端情况需要手动刷新，本地缓存也会自动回填用户已输入内容，不会造成数据丢失。

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