如何检查用户连接？

Question

我正在编写一个小型网络应用程序，并希望在允许他提交数据之前检查用户的连接性。

      function testConnection() {
       var xmlhttp;

       document.getElementById("checkingConnectivity").style.display = "block";

       if (window.XMLHttpRequest) {    // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
       } else {                        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }

       var success = false;

       xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
         document.getElementById("noConnectivity").style.display = "none";
         document.getElementById("checkingConnectivity").style.display = "none";
         success = true;
        }
       }

       connIterator = connIterator + 1;
       xmlhttp.open("GET","testConnection.jsp?i="+connIterator,true); // Dynamic URL to prevent caching
       xmlhttp.send();

       // Wait 10 seconds
       for(var i = 0; i < 10; i++) {
        // If no success so far, keep waiting
        if(!success) {
         window.setTimeout('1000');
        } else {
         return true;
        }
       }

       // success still isn't true, so we assume a timeout
       document.getElementById("noConnectivity").style.display = "block";
       document.getElementById("checkingConnectivity").style.display = "none";
       return false;
      }

问题是这个函数总是返回 false，即使文件是可访问的。 在window.setTimeout('1000'); 之前添加警报时它可以工作，所以我认为setTimeout 不起作用。

你有什么建议吗？

提前致谢！

Answer 1

有navigator.onLine。规范说：

如果用户代理确实离线（断开连接），则返回 false 来自网络）。如果用户代理可能在线，则返回 true。

当 this 的值触发时，会触发在线和离线事件 属性变化。

如果用户代理，navigator.onLine 属性必须返回 false 当用户点击链接或当 脚本请求一个远程页面（或知道这样的尝试会 失败），否则必须返回 true。

问题在于它不是那么可靠，因为计算机可能有网络连接，但无法访问互联网。

Answer 2

您的函数在检查完成之前返回。请记住，JavaScript 是事件驱动的。这是一个潜在的修复（未经测试）：

// when connected, call the callback
function testConnection(callback) {
 var xmlhttp;

 document.getElementById("checkingConnectivity").style.display = "block";

 if (window.XMLHttpRequest) {    // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
 } else {                        // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }

 xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("checkingConnectivity").style.display = "none";
    if (callback) {
      callback(xmlhttp);
    }
  }
 }

 connIterator = connIterator + 1;
 xmlhttp.open("GET","testConnection.jsp?i="+connIterator,true); // Dynamic URL to prevent caching
 xmlhttp.send();
}


document.getElementById("noConnectivity").style.display = "block";
document.getElementById("checkingConnectivity").style.display = "none";
testConnection(function() {
  // this code will run when the connection succeeds
  document.getElementById("noConnectivity").style.display = "none";
});