What is the best way to check internet connection

Question

I made a CMS which during operation pulls large amounts of data. CMS is made in PHP, MySQL, jQuery, Bootstrap and use AJAX.

The problem is if you lose your internet connection can cause problems on displaying and scrolling.

I would love if there is a good way to show the error and blocks all functions on the site when there is no internet connection. When the connection is established it should be all function allowed on the site.

Thanks!

(Sorry for my bad English.)

user connection to server? server connection to other servers? server connection to specific server (db, mail) ? — , Feb 26 '14 at 19:57

score 3 · Accepted Answer · edited May 23 '17 at 12:24

If you are using jQuery, you can just hook on the global error handler and lock up your application when an error occurs. The lock up screen could simply ask to try again.

$( document ).ajaxError(function() {
  // lock your UI here
});

Also, once the UI is locked, you could execute a function that would ping your server in an Exponential Backoff fashion and automatically unlock the application on network restore.

Locking your app can easily be done with jQuery's blockUI plugin.

Example

(function ($) {
  var locked = false;
  var errorRetryCount = 0;
  var blockUiOptions = { message: "Oops! Could not reach the server!" };

  // change this function to adjust the exponential backoff delay
  function backoff(n) {
    return Math.pow(2, n) * 100;
  }

  $(function () {
    $( document ).ajaxError(function () {
      var req = this;

      errorRetryCount += 1;

      if (!locked) {
         locked = true;
         $.blockUI(blockUiOptions);
      }

      // retry to send the request...
      setTimeout(function () { $.ajax(req); }, backoff(errorRetryCount));
    }).ajaxSuccess(function () {
      locked && $.unblockUI();
      locked = false;
      errorRetryCount = 0;
    });
  });
})(jQuery);

Note: You may not want to retry indefinitely your request upon network failure, and would want to quit retrying at some point. Since this is out of the scope of this question, I'll leave it as it is. However, you may take a look at this related question, which may help you sort this part out.

You beat me to it. +1 for giving a thorough answer =) – MonkeyZeus Feb 26 '14 at 20:17 — MonkeyZeus, Feb 26 '14 at 20:17

score 2 · Answer 2 · answered Feb 26 '14 at 19:57

2

If you're using jQuery already, you could create a simple ajax call to your server, and if it fails within a couple of seconds, either your server or the clients internet connection is down.

Something like this:

setInterval(function() {
  $.ajax({
    url: "https://cms.example.com/ping",
  })
  .fail(function( data ) {
    alert('Connection lost?');
    // remember do to something smart which shows the error just once
    // instead of every five seconds. Increasing the interval every 
    // time it fails seems a good start.
  });
}, 5*1000);

answered Feb 26 '14 at 19:57

Bjorn

5,272
1
24
35

I would not use `setInterval` here, but `setTimeout`. Also, the potential problem you may encounter with this is that, if a request takes up longer than 5 seconds (yes, it happens very easily on large scale apps! For example when the server is very busy and cannot respond within your delimited time frame.) then your `alert` would fire up for no reason at all. – Yanick Rochon Feb 26 '14 at 20:34
I'm not very good with jQuery, I know the basics and I'm still learning but I think this is a good solution but it should somehow set up counter to be activated only when the page is load. I like the way how Gmail displays when there is no internet connection, and I would also do like that. I experimented with this and we'll see. Thank you! – Ivijan Stefan Stipić Feb 27 '14 at 13:10

score 1 · Answer 3 · answered Sep 04 '21 at 07:47

1

Using plain JavaScript and simple code:

window.navigator.onLine ? 'on' : 'off'

It supports by almost every browser, please check Can I use

answered Sep 04 '21 at 07:47

itskawsar

1,232
1
19
30

score 0 · Answer 4 · answered Feb 26 '14 at 20:09

edit: re-read your question and misunderstood my first pass through so this wouldn't be valid for continuous monitoring... but i'll leave it here anyways as it may be useful for someone else.

i would suggest loading a small js file that adds a class to an element of your page and then checking if that class is applied after the fact... assuming you are using jQuery

file on the remote server loaded into your page after jQuery via script tag

$('html').addClass('connected');

local code

if($('html').hasClass('connected')) {
    // connected
} else {
    // not connected
}

What is the best way to check internet connection

4 Answers4

Example