Blazor Server应用如何延迟显示重连服务器提示

Blazor Server 端会维护与后端的 SignalR 连接，用于实时通信完成 DOM 更新。实际观测显示，该 WebSocket 连接默认每2秒左右向服务器发送一次心跳ping，相关请求截图如下：

当连接断开时，前端会立即弹出“Attempting to reconnect to the server”重连提示，提示弹窗截图如下：

查阅微软官方关于Blazor Server回路处理选项、SignalR服务端配置的相关文档后，在ASP.NET Core 6.0版本项目的Program.cs中编写了两段配置代码，期望实现连接断开后延迟10秒再弹出重连提示，但两段配置均未生效。

已尝试的无效配置 #

第一段配置代码 #

builder.Services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.ClientTimeoutInterval = TimeSpan.FromSeconds(10);
        options.KeepAliveInterval = TimeSpan.FromSeconds(10);
        options.HandshakeTimeout = TimeSpan.FromSeconds(10);
    });

第二段配置代码 #

app.UseEndpoints(endpoints =>
{
    endpoints.MapBlazorHub(opts =>
    {
        opts.LongPolling.PollTimeout = TimeSpan.FromSeconds(10);
        opts.WebSockets.CloseTimeout = TimeSpan.FromSeconds(10);
        opts.TransportSendTimeout = TimeSpan.FromSeconds(10);
    });
    endpoints.MapFallbackToPage("/_Host");
});

需求说明：不需要自定义重连弹窗的样式或内容，仅需要在连接断开时延迟一段时间后再显示任意形式的重连提示，当前项目使用框架版本为ASP.NET Core 6.0。

之前编写的所有配置均为服务端参数，仅能控制服务端判断连接存活、超时的阈值，完全无法控制前端重连提示的弹出时机。Blazor Server的重连提示逻辑内置在前端blazor.server.js脚本中，必须修改前端启动配置才能实现延迟弹出的需求，操作步骤如下：

• 找到项目中Pages/_Host.cshtml文件（MVC托管场景找对应的Blazor入口页面），定位到默认的Blazor脚本引用，默认代码为<script src="_framework/blazor.server.js"></script>
• 给脚本标签添加autostart="false"属性禁用自动启动，再添加自定义脚本拦截连接断开事件，加延迟后再触发默认的重连提示逻辑，完整代码如下：

<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
    // 配置延迟时长，单位毫秒，示例为10秒
    const reconnectDelay = 10000;
    let disconnected = false;
    let delayTimer = null;

    Blazor.start({
        reconnectionHandler: {
            onConnectionDown: () => {
                disconnected = true;
                if (delayTimer) clearTimeout(delayTimer);
                delayTimer = setTimeout(() => {
                    if (disconnected) {
                        Blazor.defaultReconnectionHandler.onConnectionDown();
                    }
                }, reconnectDelay);
            },
            onConnectionUp: () => {
                disconnected = false;
                if (delayTimer) {
                    clearTimeout(delayTimer);
                    delayTimer = null;
                }
                Blazor.defaultReconnectionHandler.onConnectionUp();
            }
        }
    });
</script>

该方案不需要修改任何服务端配置，也不需要改动重连弹窗的样式和内容，仅延迟默认弹窗的触发时机：连接断开后先等待设定的时长，如果等待期间连接自动恢复则直接清除定时器不弹出提示，如果等待结束后仍处于断开状态，就弹出和默认逻辑完全一致的重连提示。

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