Question

我正在使用网络应用程序从中非常频繁地向服务器发送数据。如果应用没有互联网连接，则应禁用发送数据的选项。如果您在线，哪种是从浏览器检查的最快方式？我使用过navigator.onLine，但它不可靠，因为不同的浏览器对它的解释不同。我的另一个解决方案是在服务器上放置一些普通文件，并在发送之前每次尝试访问它。代码看起来像这样：

function serverReachable() {
  var x = new XMLHttpRequest (),
  s;
  x.open(
    "HEAD",
    'http://servername/client/keepalive.txt',
    false
  );
  try {
    x.send();
    s = x.status;
    return ( s >= 200 && s < 300 || s === 304 );
  } catch (e) {
    return false;
  }
}

函数serverReachable（）可以完成这项任务，但有没有更快的方法（更快，我的意思是更快的时间而不是代码数量）？

Answer 1

使用

navigator.onLine

要检查是否还有互联网连接，它应该返回True或False。

Answer 2

我通常会尝试创建Image()，然后收听onerror / onload事件。

function isOnline(cb){
    var img = new Image();
    img.onerror = function() {
        cb(false)
    }
    img.onload = function() {
        cb(true)
    }
    img.src = "http://example.com/some_image.jpg?t=" + (+new Date);
}
isOnline(function(res){
    if (res) {
        // yup!
    } else {
        // nope
    }
});

然而，这很可能是在制定XHR请求时完全相同的。你将不得不摆弄，看看最适合你的是什么！

编辑：添加时间戳以强制使用非缓存版本。

Answer 3

检查服务器连接与否的最快方法是

尝试访问服务器上的任何文件，例如任何图片。

function doesConnectionExist() {
    var xhr = new XMLHttpRequest();
    var file = "img/a.png"; //image path in your project
    var randomNum = Math.round(Math.random() * 10000);
    xhr.open('HEAD', file + "?rand=" + randomNum, false);
    try {
        xhr.send(null);
        if (xhr.status >= 200 && xhr.status < 304) {
            return true;
        } else {
            return false;
        }
    } catch (e) {
        return false;
    }
}

注意：为了让这个电话更快，图像（a.png），你试图下载应该很轻;在KBs。

从浏览器检查连接状态的最快方法

3 个答案: