Real-time verification of connection status with JS [duplicate]

Navigation
0

I'm trying to do a real-time check of the internet connection status using JS, here is my code below: 

var checkConexao = window.setInterval(function() {

    if (this.readyState == 4 && this.status == 200) {
        //Oculta a modal informativa.
        $('#checkStatusConexao').fadeOut(1000);
    } else {
        //Exibe a modal informando que não há conexão com à internet.
        $('#checkStatusConexao').fadeIn('slow');
    }

}, 50);

When I give an alert in the "readyState" it always shows as "undefined", but when I leave it this way: 

if (this.readyState = 4 && this.status == 200) {

It works, but always displays the modal informing that there is no internet, even when there is a connection.

Thanks in advance for any help!

    
asked by anonymous 06.02.2018 / 15:47

2 answers

1

There is already a workaround for this question here . Take a look and see if that's what you need.

    
06.02.2018 / 15:53
0

Well, thanks to @Jorge, because one of the links he indicated led me to another link that gave me a light to create a homemade solution (hack) and solve the problem ... rsrs

Here is the ready code (all commented code): 

<script>
//Aqui é feita a verificação de conexão com o "navigator.onLine" à cada 50 milisegundos.
var checkConexao = window.setInterval(function() {

    if (navigator.onLine) {
        //Aqui você está conectado, e oculta a modal informativa.
        $('#checkConexao').fadeOut(1000);
    } else {
        //Aqui você está desconectado, e exibe a modal informativa.
        $('#checkConexao').fadeIn('slow');
    }

}, 50);



//Aqui é carregada dentro de uma div vazia uma imagem da internet de 1px por 1px, de 20 em 20 segundos à fim de testar a conectividade com a internet na conexão atual.
var checkConexao = window.setInterval(function() {

    //A função "online" é ativada se a imagem for carregada corretamente (onload).
    //A função "offline" é ativada se houver erro no carregamento da imagem (onerror).
    document.getElementById("testeDeConexao").innerHTML = "<img id='imgCheckConexao' src='http://www.seusite.com.br/images/checkConexao.png' onload='online()' onerror='offline()' style='display: none;'>";

}, 20000);



function online() {
    //Aqui é feita a remoção da imagem carregada para poder carregá-la novamente do zero, e continuar com o ciclo.
    $('#imgCheckConexao').remove();

    //Aqui você tem acesso à internet na conexão atual, e oculta a modal informativa.
    $('#checkStatusConexao').fadeOut(1000);
}
function offline() {
    //Aqui é feita a remoção da imagem carregada para poder carregá-la novamente do zero, e continuar com o ciclo.
    $('#imgCheckConexao').remove();

    //Aqui você não tem acesso à internet na conexão atual, e exibe a modal informativa.
    $('#checkStatusConexao').fadeIn('slow');
}

Informational modes (No stylization): 

<div onclick="window.location.reload()" id="checkConexao" style="display: none;">
<center><img src="desconectado.png" alt="Será exibida se não estiver conectado à nenhuma rede" ></center>


<div onclick="window.location.reload()" id="checkStatusConexao" style="display: none;">
<center><img src="sem-internet.png" alt="Será exibida se não tiver acesso à internet na conexão atual"></center>

    
08.02.2018 / 16:26
How does the field update via Ajax? Regular expression PHP - Text of a site