.NET 8 Blazor Web App切标签页后自动重载，如何维持SignalR连接？

针对你遇到的标签页切换返回后页面重载、表单数据丢失的问题，核心是优化SignalR连接稳定性并修改Blazor默认的重载行为，以下是具体方案：

1. 修改Blazor自动重新连接逻辑，阻止默认页面重载 #

Blazor Server模式下，默认的SignalR连接断开后会触发页面重载。通过自定义JavaScript重新连接处理器，可以拦截这一行为并尝试恢复连接：

在Pages/_Host.cshtml中修改Blazor启动脚本：

<!-- 禁用自动启动，自定义配置 -->
<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
    Blazor.start({
        reconnectionHandler: {
            // 连接断开时触发，返回false阻止默认重载
            onConnectionDown: () => {
                const statusEl = document.getElementById('reconnection-status');
                if (statusEl) {
                    statusEl.style.display = 'block';
                    statusEl.textContent = '连接已断开，正在尝试重新连接...';
                }
                return false;
            },
            // 连接恢复时触发
            onConnectionUp: () => {
                const statusEl = document.getElementById('reconnection-status');
                if (statusEl) {
                    statusEl.style.display = 'none';
                }
            }
        },
        reconnectionOptions: {
            maxRetries: 6, // 最多重试6次
            retryIntervalMilliseconds: 2000 // 每次重试间隔2秒
        }
    });
</script>

同时在页面中添加状态提示元素（比如放在_Host.cshtml的body里）：

<div id="reconnection-status" class="alert alert-warning fixed-top m-3" style="display: none;"></div>

2. 优化SignalR连接与服务器Circuit配置 #

延长服务器端的Circuit保留时间，确保标签页休眠期间服务器不会回收会话；同时调整SignalR心跳参数，降低连接断开概率：

在Program.cs中更新配置：

// 配置Blazor Server选项
builder.Services.AddServerSideBlazor(options =>
{
    // 断开后的Circuit保留10分钟
    options.DisconnectedCircuitRetentionPeriod = TimeSpan.FromMinutes(10);
    // 最大Circuit保留时长15分钟
    options.MaxCircuitRetainedTime = TimeSpan.FromMinutes(15);
});

// 配置SignalR选项
builder.Services.AddSignalR(options =>
{
    // 缩短心跳间隔，确保浏览器能及时响应
    options.KeepAliveInterval = TimeSpan.FromSeconds(15);
    // 延长客户端超时时间
    options.ClientTimeoutInterval = TimeSpan.FromMinutes(10);
    // 启用详细错误（调试阶段使用，生产可关闭）
    options.EnableDetailedErrors = true;
});

3. 利用Page Visibility API主动恢复连接 #

浏览器标签页非活跃时，定时器会被节流，可能导致SignalR心跳失效。通过监听页面可见性变化，在标签页恢复活跃时主动检查并恢复连接：

在wwwroot/js/site.js中添加以下代码（如果没有该文件则新建）：

document.addEventListener('visibilitychange', () => {
    // 当标签页变为可见时
    if (document.visibilityState === 'visible') {
        // 检查Blazor连接状态，断开则手动触发重连
        if (typeof Blazor !== 'undefined' && Blazor.connectionState === 'disconnected') {
            Blazor.reconnect();
        }
    }
});

然后在_Host.cshtml中引入该脚本：

<script src="js/site.js"></script>

4. 组件内状态保护（可选） #

在表单组件中，确保连接恢复时不会重置本地状态。比如在表单组件中添加连接状态监听：

@inject IConnectionStateManager ConnectionStateManager

<!-- 你的表单内容 -->

@code {
    private bool _isReconnecting;

    protected override void OnInitialized()
    {
        ConnectionStateManager.OnConnectionStateChanged += state =>
        {
            _isReconnecting = state == ConnectionState.Disconnected;
            StateHasChanged();
        };
    }

    // 提交表单时跳过重连状态
    private async Task HandleSubmit()
    {
        if (_isReconnecting) return;
        // 表单提交逻辑
    }
}

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