Rilevare che la connessione Internet è offline?

https://stackoverflow.com/questions/189430

06-07-2019
|

Domanda

Come rilevare che la connessione Internet è offline in JavaScript?

Soluzione

Puoi determinare che la connessione viene persa effettuando richieste XHR non riuscite .

L'approccio standard è ritentare la richiesta alcune volte. In caso contrario, avvisa l'utente di verificare la connessione e non riesce con grazia .

Sidenote: per mettere l'intera applicazione in un " offline " state può portare a un sacco di lavoro soggetto a errori di gestione dello stato .. le connessioni wireless possono andare e venire, ecc. Quindi la soluzione migliore potrebbe essere semplicemente fallire con garbo, preservare i dati e avvisare l'utente .. permettendo loro alla fine risolvi il problema di connessione, se presente, e continua a utilizzare la tua app con una buona dose di perdono.

Sidenote: potresti verificare la connettività di un sito affidabile come google, ma questo potrebbe non essere del tutto utile come il solo tentativo di fare la tua richiesta, perché mentre Google potrebbe essere disponibile, la tua applicazione potrebbe non esserlo e dovrai comunque gestire il tuo problema di connessione. Cercare di inviare un ping a Google sarebbe un buon modo per confermare che la connessione a Internet stessa è inattiva, quindi se tali informazioni ti sono utili, allora potrebbe valere la pena.

Sidenote : L'invio di un ping potrebbe essere ottenuto nello stesso modo in cui si farebbe qualsiasi tipo di richiesta ajax bidirezionale, ma inviando un ping a google, in in questo caso, porterebbe alcune sfide. Innanzitutto, avremmo gli stessi problemi tra domini che si verificano in genere durante le comunicazioni Ajax. Un'opzione è impostare un proxy lato server, in cui in realtà ping google (o qualunque sito) e restituire i risultati del ping all'app. Questo è un catch-22 perché se la connessione Internet è effettivamente il problema, non saremo in grado di accedere al server e se il problema di connessione è solo sul nostro dominio, abbiamo vinto " essere in grado di dire la differenza. Altre tecniche tra domini potrebbero essere provate, ad esempio, incorporando un iframe nella tua pagina che punta a google.com e quindi eseguendo il polling dell'iframe per esito positivo / negativo (esaminare i contenuti, ecc.). Incorporare un'immagine potrebbe non dirci davvero nulla, perché abbiamo bisogno di una risposta utile dal meccanismo di comunicazione per trarre una buona conclusione su ciò che sta accadendo. Quindi, di nuovo, determinare lo stato della connessione Internet nel suo insieme potrebbe essere più un problema di quanto valga la pena. Dovrai ponderare queste opzioni per la tua app specifica.

Altri suggerimenti

IE 8 supporterà la finestra .navigator.onLine .

Ma ovviamente ciò non aiuta con altri browser o sistemi operativi. Prevedo che altri fornitori di browser decideranno di fornire tale proprietà, data l'importanza di conoscere lo stato online / offline nelle applicazioni Ajax.

Fino a quando ciò non accadrà, XHR o una richiesta Image() o <img> possono fornire qualcosa di simile alla funzionalità desiderata.

Aggiornamento (2014/11/16)

I browser principali ora supportano questa proprietà, ma i risultati possono variare.

Citazione da Documentazione di Mozilla :

In Chrome e Safari, se il browser non è in grado di connettersi a una rete locale (LAN) o un router, è offline; tutte le altre condizioni restituiscono true. Quindi, mentre puoi presumere che il browser non sia in linea quando restituisce un valore false, non puoi supporre che un valore vero significhi necessariamente che il browser può accedere a Internet. È possibile che si ottengano falsi positivi, ad esempio nei casi in cui il computer esegue un software di virtualizzazione con adattatori Ethernet virtuali che sono sempre & Quot; connessi. & Quot; Pertanto, se si desidera veramente determinare lo stato online del browser, è necessario sviluppare ulteriori mezzi per il controllo.

In Firefox e Internet Explorer, il passaggio alla modalità offline del browser invia un valore <=>. Tutte le altre condizioni restituiscono un <=> valore.

Esistono diversi modi per farlo:

Richiesta AJAX al tuo sito web. Se la richiesta fallisce, ci sono buone probabilità che sia la connessione a essere difettosa. La documentazione JQuery contiene una sezione su gestione richieste AJAX non riuscite . Fai attenzione alla stessa politica sull'origine , facendo ciò, che potrebbe impedirti di accedere ai siti al di fuori del tuo dominio.
Potresti inserire un onerror in un img, come
```
<img src='http://www.example.com/singlepixel.gif' 
      onerror='alert("Connection dead");' />
```
Questo metodo potrebbe anche fallire se l'immagine di origine viene spostata / rinominata e sarebbe generalmente una scelta inferiore all'opzione ajax.

Quindi ci sono diversi modi per provare a rilevarlo, nessuno perfetto, ma in assenza della possibilità di saltare fuori dalla sandbox del browser e accedere direttamente allo stato della connessione di rete dell'utente, sembrano essere le migliori opzioni.

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

Quasi tutti i principali browser ora supportano lo sviluppatore window.navigator.onLine e i corrispondenti eventi finestra online e offline:

window.addEventListener('online', () => console.log('came online'));
window.addEventListener('offline', () => console.log('came offline'));

Prova a impostare il tuo sistema o browser in modalità offline / online e controlla la console o la proprietà true per le modifiche del valore. Puoi provarlo su anche questo sito web .

Nota comunque questa citazione da Documentazione Mozilla :

In Chrome e Safari, se il browser non è in grado di connettersi a una rete locale (LAN) o un router, è offline; tutte le altre condizioni restituiscono false. Pertanto, mentre puoi presumere che il browser non sia in linea quando restituisce un <=> valore , non puoi presumere che un <=> valore significhi necessariamente che il browser può accedere a Internet . È possibile che si ottengano falsi positivi, ad esempio nei casi in cui il computer esegue un software di virtualizzazione con adattatori Ethernet virtuali che sono sempre & Quot; connessi. & Quot; Pertanto, se si desidera veramente determinare lo stato online del browser, è necessario sviluppare ulteriori mezzi per il controllo.

In Firefox e Internet Explorer, il passaggio alla modalità offline del browser invia un valore <=>. Fino a Firefox 41, tutte le altre condizioni restituiscono un valore <=>; da Firefox 41, su OS X e Windows, il valore seguirà l'attuale connettività di rete.

(l'enfasi è la mia)

Ciò significa che se <=> è <=> (o ricevi un <=> evento), sei sicuro di non avere una connessione Internet.

Se è <=> comunque (o ottieni un <=> evento), significa solo che il sistema è connesso ad una rete, nella migliore delle ipotesi. Ad esempio, non si ha accesso a Internet. Per verificarlo, dovrai comunque utilizzare una delle soluzioni descritte nelle altre risposte.

_{Inizialmente intendevo pubblicare questo come aggiornamento a La risposta di Grant Wagner , ma sembrava troppo una modifica, soprattutto considerando che l'aggiornamento del 2014 era già non da lui .}

L'API della cache dell'applicazione HTML5 specifica navigator.onLine, che è attualmente disponibile nelle beta IE8, nei nightly WebKit (es. Safari) ed è già supportato in Firefox 3

Come ha detto olliej, è preferibile utilizzare la proprietà navigator.onLine browser piuttosto che inviare richieste di rete e, di conseguenza con developer.mozilla.org/En/Online_and_offline_events , è persino supportato da vecchie versioni di Firefox e IE.

Di recente, WHATWG ha specificato l'aggiunta degli eventi online e offline, nel caso in cui sia necessario reagire alle <=> modifiche.

Prestare attenzione anche al collegamento pubblicato da Daniel Silveira che sottolinea che fare affidamento su tali segnali / proprietà per la sincronizzazione con il server non è sempre una buona idea.

Puoi utilizzare $ .ajax () 's error callback, che si attiva se la richiesta non riesce. Se textStatus è uguale alla stringa & Quot; timeout & Quot; probabilmente significa che la connessione è interrotta:

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

Dal doc :

Errore : una funzione da chiamare se la richiesta non riesce. La funzione è passata tre argomenti: l'oggetto XMLHttpRequest, una stringa che descrive il tipo di errore che si è verificato e un facoltativo oggetto eccezione, se presente. Valori possibili per il secondo argomento (oltre a null) sono " timeout " ;, " errore " ;, " non modificato " e quot &; & ParserError quot ;. Questo è un evento Ajax

Quindi, per esempio:

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

una chiamata Ajax al tuo dominio è il modo più semplice per rilevare se sei offline

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

questo è solo per darti il concetto, dovrebbe essere migliorato, controllare i codici di stato http di ritorno ecc

Penso che sia un modo molto semplice.

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

Ho dovuto creare un'app Web (basata su Ajax) per un cliente che lavora molto con le scuole, queste scuole hanno spesso una cattiva connessione a Internet. Uso questa semplice funzione per rilevare se esiste una connessione, funziona molto bene!

Uso CodeIgniter e Jquery:

function checkOnline() {
    setTimeout("doOnlineCheck()", 20000);
}

function doOnlineCheck() {
    //if the server can be reached it returns 1, other wise it times out
    var submitURL = $("#base_path").val() + "index.php/menu/online";

    $.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();
        }
    });
}

Stavo cercando una soluzione sul lato client per rilevare se Internet era inattivo o il mio server inattivo. Le altre soluzioni che ho trovato sembravano sempre dipendere da un file di script o un'immagine di terze parti, che per me non sembrava resistere alla prova del tempo. Uno script o un'immagine ospitati esterni potrebbero cambiare in futuro e causare il fallimento del codice di rilevamento.

Ho trovato un modo per rilevarlo cercando un xhrStatus con un codice 404. Inoltre, utilizzo JSONP per aggirare la restrizione CORS. Un codice di stato diverso da 404 indica che la connessione Internet non funziona.

$.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)
        }
    }
});

A modo mio.

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

Sono disponibili 2 risposte per due diversi senari: -

Se si utilizza JavaScript su un sito Web (ovvero qualsiasi parte front-end) Il modo più semplice per farlo è:

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

Ma se stai usando js sul lato server (ad es. nodo ecc.), puoi determinare che la connessione viene persa facendo richieste XHR fallite.

L'approccio standard è di ripetere la richiesta più volte. Se il problema persiste, avvisare l'utente di controllare la connessione e fallire con grazia.

richiesta head nell'errore richiesta

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

Ecco un frammento di un'utilità di supporto che ho. Questo è javascript con spaziatura dei nomi:

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

Dovresti usarlo con il rilevamento del metodo, altrimenti spegni un modo "alternativo" per farlo. Il tempo si sta avvicinando rapidamente quando sarà tutto ciò che è necessario. Gli altri metodi sono hack.

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow