Question

我正在使用java/servlet和前端JSP开发一个Web应用程序。

我的页面显示了一些用户信息。

是否有任何适当的方法来检查网络连接是否处于活动状态（开/关）以及支持所有浏览器和设备？

如果网络出现故障，我想通过适当的消息重定向到其他页面。

我读过有关使用navigator.onLine的内容，但并非在所有浏览器中都支持它，有时它也会产生错误的结果。

Answer 1

在大多数浏览器中都有一个本机属性：navigator.onLine，但目前这种情况的实现从浏览器到浏览器的变化非常，这使得它在任何现实世界的情况下都很难使用。

考虑到这一点，我使用以下javascript函数来检查我的网页是否是网络连接。它非常简单，应该跨浏览器工作。它的工作原理是尝试从服务器加载图像并捕获发生的任何错误：

var isOnline = true;

function onlineCheck(){
    var testImg = new Image(); 
    testImg.onerror = function(){
        isOnline = false
        alert("Web access is unavailable. Please check that you are connected to the internet.")
    }
    testImg.onload = function(){ isOnline = true; }
    testImg.src = "https://www.google.ie/images/srpr/logo4w.png"; //replace this with an image on your site
}

最好将testImg.src更改为您网站上的1x1像素图像。加载速度会更快，因为与您的域的连接可能已经打开。我通常使用动态生成的图像来实现此目的，因为我发现实现几行代码更容易，而不是创建和上传真实图像。如果您想尝试这个，我已经包含了用于制作1x1像素图像的PHP代码。您可以轻松地将其改编为JSP：

        header(  "Content-type:  image/gif"); 
        header("Cache-Control: no-cache"); 
        header("Cache-Control: must-revalidate"); 
        printf ("%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c",71,73,70,56,57,97,1,0,1,0,128,255,0,192,192,192,0,0,0,33,249,4,1,0,0,0,0,44,0,0,0,0,1,0,1,0,0,2,2,68,1,0,59);
        exit();

Answer 2

判断Web应用程序是否具有有效连接的唯一正确方法是调用远程服务并等待响应。如果请求失败或超时，则可以假设没有连接。

导航器API的问题是它只会告诉您设备是否连接到第一级，无论是路由器还是局域网等，而不是真正连接到互联网。

很简单，下面的内容可以解决问题...

var appConnected = false;

function checkConnection() {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.timeout = 1000 //Miliseconds - Set this to whatever you feel appropriate for your app
    xmlHttp.open('GET', 'http://yourdomain.com/1x1.gif', true);

    xmlHttp.onreadystatechange = function () {
        switch (xmlHttp.readyState) {
            case 4:
                var r = xmlHttp.responseText;

                if ( xmlHttp.status === 200 )  {
                    appConnected = true;
                } else {
                    appConnected = false;
                }
                break;
            default:
                appConnected = false;
        }
    };
}

var intervalID = window.setInterval(checkConnection, 5000);

这将每5秒运行一次 - 这取决于您的特定用例可能不是那么有效。请记住考虑您的用户数据和带宽。

完成轮询连接状态后，请使用...

清除间隔

clearInterval(nIntervId);

您的另一个选择是在HTML5应用缓存中使用后备选项 - 但如果您定位的是较旧的设备，则可能无法实现。

检查连接/断开的网络连接

2 个答案: