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

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到1x1pixel形象在网站上。 由于与您域的连接可能已经打开，因此加载起来会更快。 我通常为此目的使用动态生成的图像，因为我发现实现几行代码比创建和上传真实图像更容易。 以防万一您想尝试一下，我提供了用于制作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应用程序是否具有有效连接的唯一TRUE方法是调用远程服务并等待响应。 如果请求失败或超时，则可以假定没有连接。

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

很简单，遵循以下内容可以解决问题...

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应用程序缓存中的后备选项-尽管如果您要定位的是较旧的设备，则可能无法实现。