如何实现离线ASP.NET页面自动检测及恢复连接后自动刷新？

嘿，别担心英语的问题～我来帮你搞定这个离线检测和自动刷新的需求！你提到的navigator.onLine()确实有局限性——它只能判断浏览器是否连接到本地网络，没法准确验证是否能访问你的服务器，所以有时候会出现误判。下面给你分享JavaScript前端的可靠实现，以及ASP.NET VB后台配合的方案：

一、JavaScript前端实现（推荐优先用这个） #

结合浏览器网络事件+服务器连通性检测，就能解决navigator.onLine()的不准确问题：

1. 监听网络状态事件+服务器连通性校验 #

// 监听浏览器在线/离线事件
window.addEventListener('online', handleNetworkStatusChange);
window.addEventListener('offline', handleNetworkStatusChange);

function handleNetworkStatusChange() {
  if (navigator.onLine) {
    // 浏览器显示在线，但先确认能连上服务器再刷新
    checkServerReachable().then(() => {
      alert('网络已恢复，页面即将刷新');
      window.location.reload();
    }).catch(() => {
      // 浏览器误判在线，实际连不上服务器，3秒后再重试
      setTimeout(checkServerReachable, 3000);
    });
  } else {
    // 离线时给用户提示
    alert('网络连接已断开，请检查你的网络');
  }
}

// 校验服务器是否可达的异步函数
async function checkServerReachable() {
  try {
    // 发送HEAD请求到服务器的简单接口（比如下面VB后台会提到的/api/ping）
    const response = await fetch('/api/ping', { 
      method: 'HEAD', 
      cache: 'no-store' // 避免缓存影响检测结果
    });
    if (!response.ok) throw new Error('服务器无响应');
    return true;
  } catch (error) {
    throw error;
  }
}

2. 定时检测作为补充（应对事件未触发的情况） #

有时候网络波动太快，浏览器的online/offline事件可能没触发，加个定时检测兜底：

// 每5秒检测一次网络状态
setInterval(() => {
  if (!navigator.onLine) {
    console.log('当前处于离线状态');
  } else {
    checkServerReachable().catch(() => {
      console.log('浏览器显示在线，但无法连接到服务器');
    });
  }
}, 5000);

二、ASP.NET VB后台配合方案 #

如果需要后台主动参与实时通知，推荐用SignalR实现双向通信，后台可以感知客户端连接状态，在网络恢复时主动通知前端刷新：

1. 后台SignalR Hub（VB代码） #

Imports Microsoft.AspNetCore.SignalR

Public Class ConnectionStatusHub
    Inherits Hub

    ' 客户端连接成功时触发
    Public Overrides Async Function OnConnectedAsync() As Task
        ' 可以记录客户端连接ID，方便后续定向通知
        Console.WriteLine($"客户端 {Context.ConnectionId} 已连接")
        Await MyBase.OnConnectedAsync()
    End Function

    ' 客户端断开连接时触发
    Public Overrides Async Function OnDisconnectedAsync(exception As Exception) As Task
        Console.WriteLine($"客户端 {Context.ConnectionId} 已断开")
        Await MyBase.OnDisconnectedAsync(exception)
    End Function

    ' 主动通知指定客户端刷新页面
    Public Async Function SendRefreshCommand(connectionId As String) As Task
        Await Clients.Client(connectionId).SendAsync("TriggerRefresh")
    End Function
End Class

2. 前端配合SignalR的代码 #

// 初始化SignalR连接
const connection = new signalR.HubConnectionBuilder()
    .withUrl("/connectionStatusHub")
    .build();

// 接收后台的刷新指令
connection.on("TriggerRefresh", () => {
    alert('网络已恢复，页面即将刷新');
    window.location.reload();
});

// 尝试建立连接，失败后自动重试
async function startSignalRConnection() {
    try {
        await connection.start();
        console.log("SignalR连接成功");
    } catch (err) {
        console.log("SignalR连接失败，3秒后重试...");
        setTimeout(startSignalRConnection, 3000);
    }
}

// 页面加载时启动连接
startSignalRConnection();

// 网络恢复时，如果SignalR连接断开则重新连接
window.addEventListener('online', () => {
    if (connection.state === signalR.HubConnectionState.Disconnected) {
        startSignalRConnection();
    }
});

3. 简单后台Ping接口（配合前端检测） #

如果不需要实时通信，也可以写个简单的VB接口让前端定时请求：

Imports Microsoft.AspNetCore.Mvc

Public class PingController
    Inherits Controller

    <HttpGet>
    <Route("api/ping")>
    Public Function GetPingStatus() As IActionResult
        ' 仅返回成功状态，证明服务器正常运行
        Return Ok("Server Online")
    End Function
End Class

这个接口就可以和前面JavaScript的checkServerReachable()函数配合使用。

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