3

I'm using web app from which i send data to server very frequently. Option for sending data should be disabled if app has no internet connection. Which is the fastest way to check from browser if you are online? I've used navigator.onLine but it's unreliable because different browsers interpret it differently. My other solution was to put some plain file on server and attemp to reach it every time before sending. Code looked like this:

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

Function serverReachable() does the job but is there any faster way to do this(by faster I mean faster in terms of time not code quantity)?

amidzic89
  • 83
  • 1
  • 6

3 Answers3

1

use

navigator.onLine

to check if there is internet connection on yet, it should return True or False.

mohamed-ibrahim
  • 10,837
  • 4
  • 39
  • 51
  • navigator.onLine has different interpretations through browsers. For example Firefox and IE will return false only if we put it in offline mode regardless if we have connection to net. – amidzic89 Apr 23 '15 at 12:45
  • 1
    Yes, you right, i suggest you to do the same check for send Ajax to server but don't use your own server, use something more fast as CDN server for jQuery or S3/CloudFront so you can get more fast responce, and don't worry about your server if its down or so. – mohamed-ibrahim Apr 23 '15 at 12:49
1

I usually try to create an Image() then listen for the onerror/onload event.

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

This is however, most likely under the hood, exactly the same as making a XHR-request. You will have to fiddle and see what suits you best!

EDIT: Added timestamp to force a non-cached version.

Eric
  • 18,532
  • 2
  • 34
  • 39
  • 1
    Probably should use a cache breaker since it is a get request – epascarello Apr 23 '15 at 12:51
  • Just to add: if you want to really save bytes, only serve the tiniest image possible. The smallest valid image I can get with MS Paint is a 1x1 black square saved as 24-bit BMP, weighing in at 58 bytes. – Scott Apr 23 '15 at 15:47
0

Fastest way to check your server is connected or not is,

Try to access any file on your server, like any image.

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

Note: To make this call faster, image (a.png), you are trying to download should be very light; in KBs.

Vikrant
  • 4,920
  • 17
  • 48
  • 72