基于JS/VB.NET实现局域网连接检测与页面循环跳转自动重连

Hey there! I get exactly what you're dealing with—nothing's more frustrating than a smart TV display getting stuck on an error page just because the network dropped right at a jump time. Let's fix this by adding reliable network detection before each page transition, with automatic retries until the connection comes back.

Core Idea #

Instead of jumping immediately, we'll first check if we can reach your local server (since it's a LAN app, this is the best way to confirm connectivity). If the check passes, we proceed with the jump. If it fails, we keep retrying at a set interval until the network is back up—no manual refresh needed.

Modified Code with Network Detection #

Here's how to update your existing JavaScript logic, broken down step by step:

// Reusable function to check LAN connectivity
async function isNetworkAvailable() {
  try {
    // Use a small local resource for fast, reliable detection (adjust URL to your server's static file)
    // A 1x1 pixel image or empty text file works great—something that loads instantly on LAN
    const response = await fetch('../QC/empty.txt', { method: 'HEAD', cache: 'no-store' });
    return response.ok; // Returns true if we get a valid 200-299 status code
  } catch (error) {
    return false; // Any error means the connection is down
  }
}

// Refactored jump logic that waits for network to be available
async function handlePageJump() {
  // Keep retrying until network is restored
  while (!await isNetworkAvailable()) {
    // Wait 5 seconds before next check (adjust this interval as needed)
    await new Promise(resolve => setTimeout(resolve, 5000));
  }

  // Execute your original jump logic once network is back
  if (params[1] == "slide=1") {
    window.location.href = '../QC/BigMonitorRealTime?operationOID=50';
  } else if (params[1] == "slide=2") {
    window.location.href = '../QC/BigMonitorRealTime?operationOID=60';
  } else {
    window.location.href = '../QC/BigMonitorRealTime';
  }
}

// Replace your original myHandler with this, or call handlePageJump wherever you trigger jumps
function myHandler(e) {
  handlePageJump();
}

Key Details to Note: #

• Why fetch with a local resource? The navigator.onLine API is unreliable—it only checks if the device is connected to a network, not if it can reach your specific app server. Using a HEAD request to a small local file ensures we can actually communicate with your server.
• Retry Interval: The 5-second wait (5000 ms) is adjustable. Lower it for faster retries, or increase it to reduce network traffic during outages.
• Static File Setup: Make sure you have a small static file (like empty.txt) in your ../QC/ directory. If you don't, use any existing small resource on your server—just update the URL in the fetch call.
• Compatibility: If your smart TV browser doesn't support async/await, you can rewrite the logic using Promise chains or XMLHttpRequest instead. Just let me know if you need that version!

How to Integrate This #

1. Add the isNetworkAvailable and handlePageJump functions to your script.
2. Replace your existing myHandler function with the one above, or modify your existing jump trigger to call handlePageJump() instead.
3. Test it by disconnecting your LAN—you’ll see the app keep retrying until the network is restored, then resume the loop automatically.

This should eliminate those stuck error pages and keep your slideshow/graph loop running smoothly, even with temporary LAN outages.

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