with - title javascript




Detectar a conexão com a Internet está offline? (11)

A API do Cache de aplicativo HTML5 especifica navigator.onLine, que atualmente está disponível nos betas do IE8, nos nightlies do WebKit (por exemplo, Safari) e já é suportada no Firefox 3

Como detectar a conexão com a Internet está offline em JavaScript?


Aqui está um trecho de um utilitário auxiliar que eu tenho. Este é o javascript namespaced:

network: function() {
    var state = navigator.onLine ? "online" : "offline";
    return state;
}

Você deve usar isso com a detecção do método, mais, disparar uma maneira 'alternativa' de fazer isso. O tempo está se aproximando rapidamente quando tudo isso é necessário. Os outros métodos são hacks.


Eu acho que é muito simples.

var x = confirm("Are you sure you want to submit?");
if(x){
    if(navigator.onLine == true) {
        return true;
    } else {
        alert('Internet connection is lost');
        return false; 
    }
}
else {
    return false;
}

Eu estava procurando uma solução do lado do cliente para detectar se a internet estava inativa ou se meu servidor estava inativo. As outras soluções que eu encontrei sempre pareciam ser dependentes de um arquivo de script ou imagem de terceiros, o que para mim não parecia que resistiria ao teste do tempo. Um script ou imagem hospedado externamente pode mudar no futuro e causar falha no código de detecção.

Eu encontrei uma maneira de detectá-lo, procurando por um xhrStatus com um código 404. Além disso, uso JSONP para ignorar a restrição CORS. Um código de status diferente de 404 mostra que a conexão com a internet não está funcionando.

$.ajax({
    url:      'https://www.bing.com/aJyfYidjSlA' + new Date().getTime() + '.html',
    dataType: 'jsonp',
    timeout:  5000,

    error: function(xhr) {
        if (xhr.status == 404) {
            //internet connection working
        }
        else {
            //internet is down (xhr.status == 0)
        }
    }
});

Existem 2 respostas para dois diferentes senários:

  1. Se você estiver usando JavaScript em um site (ou qualquer parte do front-end), a maneira mais simples de fazer isso é:

    <h2>The Navigator Object</h2>
    
    <p>The onLine property returns true if the browser is online:</p>
    
    <p id="demo"></p>
    
    <script>
      document.getElementById("demo").innerHTML = "navigator.onLine is " + navigator.onLine;
    </script>

  2. Mas se você estiver usando js no lado do servidor (ou seja, nó etc.), você pode determinar que a conexão é perdida fazendo solicitações XHR com falha.

    A abordagem padrão é tentar novamente a solicitação algumas vezes. Se isso não ocorrer, avise o usuário para verificar a conexão e falhe normalmente.


Existem várias maneiras de fazer isso:

  • Solicitação de AJAX para seu próprio site. Se essa solicitação falhar, há uma boa chance de que a conexão seja falha. A documentação do JQuery possui uma seção sobre como lidar com solicitações AJAX com falha . Tenha cuidado com a Política de mesma origem ao fazer isso, o que pode impedi-lo de acessar sites fora do seu domínio.
  • Você poderia colocar um onerror em um img , como

    <img src='http://www.example.com/singlepixel.gif' 
          onerror='alert("Connection dead");' />

    Esse método também pode falhar se a imagem de origem for movida / renomeada e geralmente seria uma escolha inferior para a opção ajax.

Portanto, há várias maneiras diferentes de tentar detectar isso, nenhuma perfeita, mas, na falta da capacidade de saltar da caixa de proteção do navegador e acessar diretamente o status de conexão da rede do usuário, elas parecem ser as melhores opções.


O meu caminho.

<!-- the file named "tt.jpg" should exist in the same directory -->

<script>
function testConnection(callBack)
{
    document.getElementsByTagName('body')[0].innerHTML +=
        '<img id="testImage" style="display: none;" ' +
        'src="tt.jpg?' + Math.random() + '" ' +
        'onerror="testConnectionCallback(false);" ' +
        'onload="testConnectionCallback(true);">';

    testConnectionCallback = function(result){
        callBack(result);

        var element = document.getElementById('testImage');
        element.parentNode.removeChild(element);
    }    
}
</script>

<!-- usage example -->

<script>
function myCallBack(result)
{
    alert(result);
}
</script>

<a href=# onclick=testConnection(myCallBack);>Am I online?</a>

Você pode determinar que a conexão seja perdida fazendo solicitações XHR com falha .

A abordagem padrão é tentar novamente a solicitação algumas vezes. Se isso não ocorrer, avise o usuário para verificar a conexão e falhe normalmente .

Nota: Para colocar o aplicativo inteiro em um estado "offline" pode levar a um monte de trabalho propenso a erros de lidar com estado .. conexões sem fio podem ir e vir, etc Então a sua melhor aposta pode ser apenas falhar graciosamente, preservar o dados, e alertar o usuário ... permitindo que eles eventualmente corrijam o problema de conexão, se houver um, e continuem usando seu aplicativo com uma quantia justa de perdão.

Sidenote: Você pode verificar um site confiável como o google por conectividade, mas isso pode não ser totalmente útil apenas tentando fazer sua própria solicitação, porque enquanto o Google pode estar disponível, seu próprio aplicativo pode não ser, e você ainda tem que lidar com seu próprio problema de conexão. Tentar enviar um ping para o Google seria uma boa maneira de confirmar que a conexão com a Internet está desativada, portanto, se essa informação for útil para você, talvez valha a pena.

Nota : Enviar um Ping pode ser obtido da mesma forma que você faria qualquer tipo de solicitação de ajax bidirecional, mas enviar um ping para o google, nesse caso, colocaria alguns desafios. Primeiro, teríamos os mesmos problemas de vários domínios que são normalmente encontrados na comunicação Ajax. Uma opção é configurar um proxy do lado do servidor, no qual realmente fazemos ping google (ou qualquer site) e retornamos os resultados do ping para o aplicativo. Isso é um problema, porque se a conexão com a Internet for realmente o problema, não poderemos acessar o servidor, e se o problema de conexão for apenas em nosso próprio domínio, não seremos capazes de dizer a diferença. . Outras técnicas de vários domínios podem ser tentadas, por exemplo, incorporando um iframe em sua página que aponta para google.com e, em seguida, pesquisando o iframe em busca de sucesso / falha (examine o conteúdo etc.). Incorporar uma imagem pode não nos dizer nada, porque precisamos de uma resposta útil do mecanismo de comunicação para tirar uma boa conclusão sobre o que está acontecendo. Então, novamente, determinar o estado da conexão à internet como um todo pode ser mais problemático do que vale a pena. Você terá que ponderar essas opções para o seu aplicativo específico.


cabeça de solicitação no erro de solicitação

$.ajax({
    url: /your_url,
    type: "POST or GET",
    data: your_data,
    success: function(result){
      //do stuff
    },
    error: function(xhr, status, error) {

      //detect if user is online and avoid the use of async
        $.ajax({
            type: "HEAD",
            url: document.location.pathname,
            error: function() { 
              //user is offline, do stuff
              console.log("you are offline"); 
              }
         });
    }   
});

uma chamada ajax para seu domínio é a maneira mais fácil de detectar se você está off-line

$.ajax({
      type: "HEAD",
      url: document.location.pathname + "?param=" + new Date(),
      error: function() { return false; },
      success: function() { return true; }
   });

isso é só para dar-lhe o conceito, deve ser melhorado, verifique se há códigos de status http de retorno etc


 if(navigator.onLine){
  alert('online');
 } else {
  alert('offline');
 }




internet-connection