Quickest way to check internet connectivity in JS

Question

I have this code in a html file that checks for connectivity, but the problem here is that it takes about 10 seconds to throw the alert message box to indicate the connection is lost. I want to know if there's a much faster way to inform the user that the connection is lost without having to wait. Strictly JS thanks...

JS code:

<script language="JavaScript">
function SubmitButton()
{
    if(navigator.onLine)
    {
            document.getElementById('SubmitBtn').style.visibility='visible';
    }
    else
    {
        document.getElementById('SubmitBtn').style.visibility='hidden';
    }
}
function Online() 
{ 
    var status=false;
    status= navigator.onLine;
    if(status!= true)
    {
        alert('Network connectivity is lost, please try again later');
    }
}
</script>

Calling it in html file here:

<INPUT name="ccMCA1input" type="checkbox" onclick="ccMCA1.ccEvaluate(),Online()" value=False>

Is this way faster? http://stackoverflow.com/a/10249744/851498 — Florian Margaine, May 03 '12 at 07:36

Joseph · Answer 1 · 2014-09-08T04:40:06.010

7

You could periodically request a 1x1 gif image from a(ny) server, making sure you use the cache buster method to avoid caching. You could use the onload and onerror events.

var isOnline = (function isOnline(){
  // Create a closure to enclose some repeating data
  var state = false;
  var src = 'gif_url?t=' + Date.now();
  var function onLoad = function(){state = true;}
  var function onError = function(){state = false;}

  // Inside the closure, we create our monitor
  var timer = setInterval(function(){
    var img = new Image();
    img.onload = onLoad;
    img.onerror = onError;
    img.src = src;
  }, 10000);

  // Return a function that when called, returns the state in the closure
  return function(){return state;};
}());

//Use as
var amIOnline = isOnline();

edited Sep 08 '14 at 04:40

answered May 03 '12 at 07:34

Joseph

117,725
30
181
234

Thanks, seems a neaty way of doing things. – gaganHR May 08 '12 at 07:36
Hmm but if one calls multiple times the function, we could have a lot of checks, since you're using `setInterval`... – franzlorenzon Sep 05 '13 at 11:34
@franzlorenzon unless you modify this code to just run once, collect "listeners" instead. – Joseph Sep 06 '13 at 00:26

score 4 · Accepted Answer · answered May 03 '12 at 07:22

4

navigator.onLine is the only built-in property which can be checked (and not reliable btw).
You could create a XHR request to a reliable server, and check whether any response is being received.

answered May 03 '12 at 07:22

Rob W

341,306
83
791
678

AFAIK, window.navigator.onLine will check whether the browser is set to browse the content online. It does not check about the internet connectivity in your PC. It will work only when you set your browser specifically to browse offline. – Ruchira Feb 25 '16 at 23:40

score 1 · Answer 3 · answered May 03 '12 at 07:38

1

Consider checking out the following URLs:

answered May 03 '12 at 07:38

Dhwanil Shah

1,072
1
9
25

1

@Joseph And then you did the exact same thing ;) – Andreas Louv May 03 '12 at 07:52
@AndreasAL did the exact same thing? "providing an answer" (solutions+methods+references) is not the same as "providing a set of links" – Joseph May 03 '12 at 07:54
Went over the post quickly. Sounds a bit ambiguous, but probably the gist is to put more content in the answers. Will keep in mind. – Dhwanil Shah May 03 '12 at 07:54
@Joseph No not your answer witch is good and a save way to check for connection. But your comment to this post. ... – Andreas Louv May 03 '12 at 07:56

Quickest way to check internet connectivity in JS

3 Answers3