Real-time check of connection status with JS

Asked

Viewed 982 times

0

I am trying to perform a real-time check of the state of internet connection using JS, follows below my code:

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 this excerpt like this:

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

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

From now on I appreciate any help!

javascript http-request

  • Goes well beyond that @Julio Henrique.

  • Explain in your question what goes beyond for us to better understand your doubt.

2 answers

1


There is already a solution to this question here. Take a look and see if it’s what you need.

  • 1

    Because it is @Jorge, thanks for your help, but I already use "Navigator.online", the problem is that it only checks if the connection exists, but it doesn’t tell me if there is active internet in it or not (If there is server response to http request)

  • 1

    @Wandersonborges, I thought that link , give a look there, can help you. Also have some suggestions here.

0

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

Below is the code ready (all code commented):

<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 modals (Not stylized):

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

Browser other questions tagged javascript http-request

You are not signed in. Login or sign up in order to post.