CODEWITHSUNDEEP
javascriptajaxtimeoutxmlhttprequest
Gundon
Gundon

Reputation: 2121

How to check the users connectivity?

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!

Upvotes: 0

Views: 290

Answers (2)

Jonathan Julian
Jonathan Julian

Reputation: 12272

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

Upvotes: 1

Rich Bradshaw
Rich Bradshaw

Reputation: 73025

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.

Upvotes: 0

Related Questions