Detectar a conexão com a Internet está offline?

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

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 como apenas tentar 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 feito da mesma forma que você faria qualquer tipo de pedido de ajax bidirecional, mas enviar um ping para o google neste caso colocaria alguns desafios. Primeiro, teríamos os mesmos problemas de vários domínios que são normalmente encontrados ao fazer comunicações 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 a problema, não poderemos acessar o servidor, e se o problema de conexão for apenas em nosso próprio domínio, não poderemos dizer a diferença. Outras técnicas de vários domínios podem ser tentadas, por exemplo, incorporando um iframe na sua página que aponta para o 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.

O IE 8 suportará a propriedade window.navigator.onLine .

Mas é claro que isso não ajuda em outros navegadores ou sistemas operacionais. Eu prevejo que outros fornecedores de navegadores decidirão fornecer essa propriedade, bem como a importância de saber o status online / offline em aplicativos Ajax.

Até que isso aconteça, o XHR ou uma solicitação Image() ou pode fornecer algo próximo da funcionalidade desejada.

Atualização (2014/11/16)

Os principais navegadores agora suportam essa propriedade, mas seus resultados podem variar.

Citação da Mozilla Documentation :

No Chrome e no Safari, se o navegador não conseguir se conectar a uma rede local (LAN) ou a um roteador, ele estará off-line; todas as outras condições retornam true . Então, enquanto você pode assumir que o navegador está offline quando retorna um valor false , você não pode assumir que um valor verdadeiro necessariamente significa que o navegador pode acessar a Internet. Você pode estar obtendo falsos positivos, como nos casos em que o computador está executando um software de virtualização que possui adaptadores Ethernet virtuais sempre “conectados”. Portanto, se você realmente deseja determinar o status on-line do navegador, deve desenvolver meios adicionais de verificação.

No Firefox e no Internet Explorer, alternar o navegador para o modo offline envia um valor false . Todas as outras condições retornam um valor true .

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 tem uma seção sobre como lidar com solicitações AJAX com falha . 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

      

    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 pular fora da checkbox 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.

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

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

Como olliej disse, usar a propriedade de navegador navigator.onLine é preferível do que enviar solicitações de rede e, de acordo com o developer.mozilla.org/En/Online_and_offline_events , é até suportado por versões antigas do Firefox e do IE.

Recentemente, o WHATWG especificou a adição dos events onlineonline e offlineoffline , caso você precise reagir nas alterações do navigator.onLine .

Por favor, preste atenção também no link postado por Daniel Silveira, que indica que depender desses sinais / propriedades para sincronizar com o servidor nem sempre é uma boa idéia.

Você pode usar o retorno de chamada de error $ .ajax () , que é acionado se a solicitação falhar. Se textStatus for igual a string “timeout”, provavelmente significa que a conexão está quebrada:

 function (XMLHttpRequest, textStatus, errorThrown) { // typically only one of textStatus or errorThrown // will have info this; // the options for this ajax request } 

Do doc :

Erro : uma function a ser chamada se a solicitação falhar. A function é passada três argumentos: O object XMLHttpRequest, uma seqüência de caracteres descrevendo o tipo de erro que ocorreu e um object de exceção opcional, se ocorreu. Valores possíveis para o segundo argumento (além de nulo) são “timeout”, “error”, “notmodified” e “parsererror”. Este é um evento do Ajax

Então, por exemplo:

  $.ajax({ type: "GET", url: "keepalive.php", success: function(msg){ alert("Connection active!") }, error: function(XMLHttpRequest, textStatus, errorThrown) { if(textStatus == 'timeout') { alert('Connection seems dead!'); } } }); 

Eu tive que fazer um aplicativo web (baseado em ajax) para um cliente que trabalha muito com escolas, essas escolas muitas vezes têm uma conexão de internet ruim eu uso essa function simples para detectar se existe uma conexão, funciona muito bem!

Eu uso o CodeIgniter e o Jquery:

  function checkOnline(){ setTimeout("doOnlineCheck()", 20000); } function doOnlineCheck(){ var submitURL = $("#base_path").val() + "index.php/menu/online";//if the server can be reached it returns 1, other wise it times out $.ajax({ url : submitURL , type : 'post' , dataType: 'msg' , timeout : 5000 , success : function(msg){ if(msg==1){ $("#online").addClass("online"); $("#online").removeClass("offline"); }else{ $("#online").addClass("offline"); $("#online").removeClass("online"); } checkOnline(); } , error : function(){ $("#online").addClass("offline"); $("#online").removeClass("online"); checkOnline(); } }); } 

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 é apenas para dar-lhe o conceito, deve ser melhorado, verifique se há códigos de status http de retorno etc

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 de terceiros ou imagem, 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 o 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) } } }); 

Script muito interessante que resume muito acima:

http://www.codeproject.com/KB/scripting/InternetConnectionTest.aspx

É muito útil, e porque é baseado em Ajax, é asynchronous, assim você pode verificar se a Internet está conectada sem sair da página original. Usando isso com um timer você também pode ter um componente na página verificando a cada n minutos.

O meu caminho.

     Am I online? 

Existem 2 respostas para dois senários diferentes:

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

     

    The Navigator Object

    The onLine property returns true if the browser is online:

  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.

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"); } }); } }); 

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, triggersr uma maneira ‘alternativa’ de fazer isso. O tempo está se aproximando rapidamente quando tudo isso é necessário. Os outros methods são hacks.