Detect Internet Connectivity on client machine

Question

I have this web application (MVC using C#) that serves like an advertisement in my client's office. My client will open this "advertisement page" and display it on a big screen to their customers.

What happen is, every 30 minutes or so, the page will automatically refresh to fetch latest data from the database, however, they are using WIFI to connect to our server and sometimes the connection is very slow (or lost connection completely). My client requested me to write a code to prevent the page from refreshing if the connectivity is bad or no internet connection. (They do not want to show "No Internet Connection" on their advertisement TV)

I know I cannot do anything from the server side code because it is the client's machine that want to detect the internet connection, so leaving client side code as the only option. I am not good at this, can anyone help me out?

Send an ajax request to server which returns some sort of dummy data, if you receive it back successfully within a set time then you've got a connection and you can do the main refresh — Slappywag, Mar 24 '15 at 15:25

Mr.Manhattan · Accepted Answer · 2015-03-24T15:34:51.957

4

I'd suggest a "ping" sent via ajax:

var timeStart= new Date().getTime();
$.ajax({
    url:"url-to-ping-response-file",
    success:function(){
        var timeNow = new Date().getTime();
        var ping = timeNow - timeStart;

        //less than one second
        if(ping < 1000){
            window.location.reload();
        }
    }
});

edited Mar 24 '15 at 15:34

answered Mar 24 '15 at 15:27

Mr.Manhattan

5,315
3
22
34

score 1 · Answer 2 · answered Mar 24 '15 at 15:26

You can use the Circuit Breaker Pattern to gracefully handle intermittently connected environments.

Here are 2 open source JavaScript implementations. I have never used either of them, so I cannot attest to their quality.

score 0 · Answer 3 · edited May 23 '17 at 11:53

You can also make use of

 if (navigator.onLine) {
        location.reload();
    }

This will not detect slow internet. Now, I don't understand your web layout but for sites that I work on I tend to get HTML content and DATA as separate calls. I do this with a MVVM/MVC pattern which is worth learning. I use angularjs it is very awesome.

Now.. you can also use good old jQuery to replace the content have a read of this Replace HTML page with contents retrieved via AJAX you could couple this with the .onLine check.

http://www.w3schools.com/jsref/prop_nav_online.asp

Detect Internet Connectivity on client machine

3 Answers3