How to check the users connectivity?

Question

I'm writing a little web-app and want to check the users connectivity before I allow him to submit his data.

      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;
      }

The problem is that this function always returns false, even if the file is reachable. When adding an alert before window.setTimeout('1000'); it works, so I assume the the setTimeout does not work.

Do you have any suggestions?

Thanks in advance!

Why do you even create a connectivity check when you're developing an webapp? — , Nov 03 '11 at 10:08
In my case it is quite sure that the user might loose the connection from time to time — Gundon, Nov 03 '11 at 10:11
If the server is not reachable at all, it won't return a statuscode too :P — Gundon, Nov 03 '11 at 10:15
possible duplicate of [How to detect timeout on an AJAX (XmlHttpRequest) call in the browser?](http://stackoverflow.com/questions/1018705/how-to-detect-timeout-on-an-ajax-xmlhttprequest-call-in-the-browser) — Jonathan Julian, Nov 03 '11 at 12:26

score 1 · Accepted Answer · answered Nov 03 '11 at 10:34

Your function is returning before the check is complete. Remember, JavaScript is event-driven. Here is a potential fix (untested):

// 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";
});

thanks for your help! but doesnt this elliminate the possibility that the request just times out? — Gundon, Nov 03 '11 at 11:26
In this code `noConnectivity` will remain on the screen until the request succeeds. But you can certainly do various things as the `xmlhttp` object goes through different states. — Jonathan Julian, Nov 03 '11 at 11:37
thanks! I would tick your answer now, but I found that this http://stackoverflow.com/questions/1018705/how-to-detect-timeout-on-an-ajax-xmlhttprequest-call-in-the-browser does solve my issue too. Do you think I should mark my question as duplicate? — Gundon, Nov 03 '11 at 11:56
Treat this question as it's own, since it already has a couple of answers. I'll edit this question to add a link to that other one. — Jonathan Julian, Nov 03 '11 at 12:25

score 0 · Answer 2 · answered Nov 03 '11 at 10:33

There is navigator.onLine. The spec says:

Returns false if the user agent is definitely offline (disconnected from the network). Returns true if the user agent might be online.

The events online and offline are fired when the value of this attribute changes.

The navigator.onLine attribute must return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail), and must return true otherwise.

The problems it that it's not that reliable as the computer may have a network connection, but no internet access.

How to check the users connectivity?

2 Answers2