如何不强制刷新页面手动重新连接Blazor Server应用？

以下方案均不需要强制刷新页面，可保留用户当前页面操作状态：

方案1：复用Blazor内置自动重连逻辑 #

Blazor 默认自带了自动重连能力，你当前完全替换了默认的reconnectionHandler导致内置逻辑失效，只需移除自定义的重连处理逻辑，仅配置重连参数即可：

Blazor.start({
  // 配置重连参数，不需要自定义全量重连逻辑
  reconnectionOptions: {
    maxRetries: 10, // 最大自动重试次数
    retryIntervalMilliseconds: 1500 // 每次重试的间隔毫秒数
  }
});

• 内置逻辑会在连接断开后自动尝试重连，重连成功后自动恢复原有页面状态，不需要用户手动操作。
• 你可以保留自定义的刷新按钮作为兜底，内置逻辑重试次数耗尽后再显示按钮提示用户手动触发重连。

方案2：修改手动重连逻辑为调用原生重连API #

你当前的Reconnect方法用了刷新页面的逻辑，直接替换为Blazor公开的Blazor.reconnect()方法即可实现无刷新重连：

function Reconnect() {
  console.log("attempting to reconnect");
  // 调用原生重连API，无刷新
  Blazor.reconnect().then(success => {
    if (success) {
      document.getElementById("refreshButton").style.display = "none";
      console.log("重连成功");
    } else {
      console.log("重连失败，可提示用户再次尝试");
      // 仅当重连多次失败、服务端会话已销毁时，再走刷新逻辑作为最终兜底
      // window.location.reload(true);
    }
  });
}

方案3：自定义重连重试规则适配复杂场景 #

如果默认的重试规则不满足需求，你可以在保留原生重连能力的基础上，自定义重试判断逻辑：

Blazor.start({
  reconnectionHandler: {
    // 自定义是否需要继续重试的规则
    shouldReconnect: (retryCount, error) => {
      // 示例：最多重试15次，遇到特定错误直接终止重试
      return retryCount < 15 && !error?.message?.includes("权限过期");
    },
    onConnectionDown: (options, error) => { 
      document.getElementById("refreshButton").style.display = "block";
      console.error("Connection is down " + error)
    },
    onConnectionUp: () =>  {
      console.log("Up, up, and away!")
      document.getElementById("refreshButton").style.display = "none";
    }
  }
});

补充优化：状态持久化兜底 #

如果遇到服务端会话被回收、过期导致重连无法恢复原有状态的情况，可以提前把页面关键状态（比如表单输入、分页参数、筛选条件等）存储在localStorage/sessionStorage中，重连成功后读取存储的值恢复页面状态，全程不需要刷新页面。

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