webentwicklung-frage-antwort-db.com.de

Erkennen Sie, dass die Internetverbindung offline ist?

Wie erkennt man, dass die Internetverbindung in JavaScript offline ist?

205
Daniel Silveira

Sie können feststellen, dass die Verbindung unterbrochen wurde, indem Sie fehlgeschlagene XHR-Anforderungen eingeben.

Der Standardansatz ist: wiederholen Sie die Anforderung einige Male. Wenn dies nicht der Fall ist, Benutzer benachrichtigen, um die Verbindung zu überprüfen, und ordnungsgemäß fehlschlagen.

Sidenote: Wenn Sie die gesamte Anwendung in einen "Offline" -Status versetzen, kann dies zu einer Menge fehleranfälliger Bearbeitungsschritte führen. Drahtlose Verbindungen können kommen und gehen usw. Ihre beste Wahl ist also Um einen Fehler zu vermeiden, die Daten beizubehalten und den Benutzer zu benachrichtigen, können sie das Verbindungsproblem gegebenenfalls beheben und Ihre App mit einigem Nachsehen weiter verwenden.

Sidenote: Sie könnten eine zuverlässige Website wie Google auf Konnektivität überprüfen, aber dies ist möglicherweise nicht ganz nützlich, da Sie nur versuchen, eine eigene Anfrage zu stellen, da Google möglicherweise verfügbar ist, Ihre eigene Anwendung jedoch möglicherweise nicht. und du wirst immer noch mit deinem eigenen Verbindungsproblem fertig werden müssen. Der Versuch, einen Ping an Google zu senden, ist eine gute Möglichkeit, um zu bestätigen, dass die Internetverbindung selbst unterbrochen ist. Wenn diese Informationen für Sie nützlich sind, ist sie möglicherweise die Mühe wert.

Sidenote: Das Senden eines Pings kann auf die gleiche Weise erfolgen, wie Sie eine bidirektionale Ajax-Anfrage stellen würden. In diesem Fall würde das Senden eines Pings an Google einige Herausforderungen mit sich bringen. Erstens würden wir dieselben domänenübergreifenden Probleme haben, die normalerweise bei der Ajax-Kommunikation auftreten. Eine Möglichkeit besteht darin, einen serverseitigen Proxy einzurichten, in dem wir tatsächlich ping google (oder eine beliebige Site) und die Ergebnisse des Pings an die App zurückgeben. Dies ist ein catch-22 denn wenn die Internetverbindung tatsächlich das Problem ist, können wir nicht zum Server gelangen, und wenn das Verbindungsproblem nur auf unserer eigenen Domain liegt, haben wir gewonnen. ' Ich kann den Unterschied nicht erkennen. Andere domänenübergreifende Techniken könnten ausprobiert werden, z. B. das Einbetten eines Iframes in Ihre Seite, der auf google.com verweist, und das anschließende Abfragen des Iframes auf Erfolg/Misserfolg (Überprüfen des Inhalts usw.). Das Einbetten eines Bilds sagt möglicherweise nichts aus, da wir eine nützliche Antwort des Kommunikationsmechanismus benötigen, um einen guten Schluss zu ziehen, was vor sich geht. Die Bestimmung des Zustands der Internetverbindung als Ganzes kann daher mehr Mühe bereiten, als es wert ist. Sie müssen diese Optionen für Ihre spezifische App abwägen.

125
keparo

IE 8 unterstützt die Eigenschaft window.navigator.onLine .

Bei anderen Browsern oder Betriebssystemen hilft das natürlich nicht. Ich gehe davon aus, dass andere Browser-Anbieter diese Eigenschaft ebenfalls anbieten werden, da der Online-/Offline-Status in Ajax-Anwendungen bekannt sein muss.

Bis dahin entweder XHR oder eine Image() oder <img> request kann in etwa die gewünschte Funktionalität bereitstellen.

Update (16.11.2014)

Hauptbrowser unterstützen diese Eigenschaft jetzt, aber Ihre Ergebnisse variieren.

Zitat aus Mozilla-Dokumentation :

In Chrome und Safari ist der Browser offline, wenn er keine Verbindung zu einem lokalen Netzwerk (LAN) oder Router herstellen kann. Alle anderen Bedingungen geben true zurück Während Sie davon ausgehen können, dass der Browser offline ist, wenn er einen false -Wert zurückgibt, können Sie nicht davon ausgehen, dass ein wahrer Wert zwangsläufig bedeutet, dass der Browser auf das Internet zugreifen kann Auf dem Computer wird eine Virtualisierungssoftware ausgeführt, die über virtuelle Ethernet-Adapter verfügt, die immer "verbunden" sind. Wenn Sie den Onlinestatus des Browsers wirklich ermitteln möchten, sollten Sie zusätzliche Mittel zur Überprüfung entwickeln.

Wenn Sie in Firefox und Internet Explorer den Browser in den Offline-Modus schalten, wird ein false -Wert gesendet. Alle anderen Bedingungen geben einen true -Wert zurück.

49
Grant Wagner

Hierfür gibt es verschiedene Möglichkeiten:

  • AJAX-Anfrage an Ihre eigene Website. Wenn diese Anforderung fehlschlägt, liegt wahrscheinlich die Verbindung am Fehler. Die JQuery Dokumentation enthält einen Abschnitt über Bearbeitung fehlgeschlagen AJAX Anforderungen . Beachten Sie dabei die Same Origin Policy Dies kann dazu führen, dass Sie nicht mehr auf Websites außerhalb Ihrer Domain zugreifen können.
  • Sie könnten ein onerror in ein img einfügen, wie

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

    Diese Methode könnte auch fehlschlagen, wenn das Quellbild verschoben/umbenannt wird, und wäre im Allgemeinen eine schlechtere Wahl als die Ajax-Option.

Es gibt also verschiedene Möglichkeiten, dies zu erkennen. Keine ist perfekt. Da Sie jedoch nicht aus der Browsersandbox herausspringen und direkt auf den Netzverbindungsstatus des Benutzers zugreifen können, sind sie die besten Optionen.

33
ConroyP
 if(navigator.onLine){
  alert('online');
 } else {
  alert('offline');
 }
31
Edmhs

Fast alle gängigen Browser unterstützen jetzt window.navigator.onLine Eigenschaft und die entsprechenden online und offline Fensterereignisse:

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

Versuchen Sie, Ihr System oder Ihren Browser in den Offline-/Online-Modus zu versetzen, und überprüfen Sie die Konsole oder das window.navigator.onLine Eigenschaft für die Wertänderungen. Sie können es auch auf dieser Website testen.

Beachten Sie jedoch dieses Zitat aus Mozilla-Dokumentation :

In Chrome und Safari ist der Browser offline, wenn er keine Verbindung zu einem lokalen Netzwerk (LAN) oder Router herstellen kann. Alle anderen Bedingungen geben true zurück während können Sie davon ausgehen, dass der Browser offline ist, wenn er einen false -Wert zurückgibt , können Sie nicht Es wird davon ausgegangen, dass ein true -Wert zwangsläufig bedeutet, dass der Browser auf das Internet zugreifen kann . Es kann vorkommen, dass auf dem Computer eine Virtualisierungssoftware ausgeführt wird Virtuelle Ethernet-Adapter, die immer "verbunden" sind. Wenn Sie den Onlinestatus des Browsers wirklich ermitteln möchten, sollten Sie zusätzliche Mittel zur Überprüfung entwickeln.

Wenn Sie in Firefox und Internet Explorer den Browser in den Offline-Modus schalten, wird ein false -Wert gesendet. Bis Firefox 41 geben alle anderen Bedingungen einen true -Wert zurück. Seit Firefox 41 unter OS X und Windows richtet sich der Wert nach der tatsächlichen Netzwerkverbindung.

(Schwerpunkt liegt bei mir)

Dies bedeutet, dass, wenn window.navigator.onLine ist false (oder Sie erhalten ein offline -Ereignis), Sie haben garantiert keine Internetverbindung.

Wenn es sich jedoch um true handelt (oder Sie ein online -Ereignis erhalten), bedeutet dies nur, dass das System bestenfalls mit einem Netzwerk verbunden ist. Dies bedeutet nicht, dass Sie zum Beispiel über einen Internetzugang verfügen. Um dies zu überprüfen, müssen Sie weiterhin eine der in den anderen Antworten beschriebenen Lösungen verwenden.

Ich hatte ursprünglich vor, dies als Update für Grant Wagners Antwort zu veröffentlichen, aber es schien zu viel von einer Bearbeitung zu sein, insbesondere angesichts der Tatsache, dass das 2014-Update bereits nicht von ihm war.

18
Didier L

Die HTML5 Application Cache-API spezifiziert navigator.onLine, die derzeit in den IE8-Betas, WebKit-Nightlies (z. B. Safari) verfügbar ist und bereits in Firefox 3 unterstützt wird

11
olliej

Wie olliej sagte, ist die Verwendung der Browsereigenschaft navigator.onLine Dem Senden von Netzwerkanforderungen vorzuziehen und wird dementsprechend mit developer.mozilla.org/En/Online_and_offline_events sogar von alten Versionen von Firefox unterstützt und IE.

Kürzlich hat die WHATWG das Hinzufügen der Ereignisse online und offline festgelegt, falls Sie auf Änderungen von navigator.onLine Reagieren müssen.

Bitte beachten Sie auch den Link von Daniel Silveira, der darauf hinweist, dass es nicht immer eine gute Idee ist, sich für die Synchronisierung mit dem Server auf dieses Signal/diese Eigenschaft zu verlassen.

9
Emanuele Aina

Sie können den error -Rückruf von $. Ajax () verwenden, der ausgelöst wird, wenn die Anforderung fehlschlägt. Wenn textStatus der Zeichenfolge "timeout" entspricht, bedeutet dies wahrscheinlich, dass die Verbindung unterbrochen ist:

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

Aus dem doc :

Fehler : Eine Funktion, die aufgerufen werden soll, wenn die Anforderung fehlschlägt. Der Funktion werden drei Argumente übergeben: Das XMLHttpRequest-Objekt, eine Zeichenfolge, die die Art des aufgetretenen Fehlers beschreibt, und ein optionales Ausnahmeobjekt, falls eines aufgetreten ist. Mögliche Werte für das zweite Argument (neben null) sind "timeout", "error", "notmodified" und "parsererror". Dies ist ein Ajax-Event

Also zum Beispiel:

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

ein Ajax-Anruf bei Ihrer Domain ist die einfachste Methode, um festzustellen, ob Sie offline sind

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

dies ist nur, um Ihnen das Konzept zu geben, es sollte verbessert werden.

Z.B. error = 404 sollte immer noch bedeuten, dass Sie online sind

6
harishr

Ich musste eine Web-App (Ajax-basiert) für einen Kunden erstellen, der viel mit Schulen arbeitet. Diese Schulen haben oft eine schlechte Internetverbindung. Ich benutze diese einfache Funktion, um festzustellen, ob eine Verbindung besteht. Funktioniert sehr gut!

Ich benutze CodeIgniter und 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();
        }
    });
}
4
THEO

Ich denke es ist ein sehr einfacher Weg.

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

Ich suchte nach einer clientseitigen Lösung, um festzustellen, ob das Internet ausgefallen ist oder mein Server ausgefallen ist. Die anderen Lösungen, die ich gefunden habe, schienen immer von einer Skriptdatei oder einem Image eines Drittanbieters abhängig zu sein, was mir nicht so erschien, als ob es den Test der Zeit bestehen würde. Ein externes gehostetes Skript oder Image kann sich in Zukunft ändern und dazu führen, dass der Erkennungscode fehlschlägt.

Ich habe eine Möglichkeit gefunden, dies zu erkennen, indem ich nach einem xhrStatus mit einem 404-Code gesucht habe. Außerdem benutze ich JSONP, um die CORS-Einschränkung zu umgehen. Ein anderer Statuscode als 404 zeigt an, dass die Internetverbindung nicht funktioniert.

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

Es gibt 2 Antworten für zwei verschiedene Szenarien:

  1. Wenn Sie JavaScript auf einer Website verwenden (d. H. Auf einem Front-End-Teil), ist dies am einfachsten:

    <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. Wenn Sie jedoch auf der Serverseite js verwenden (d. H. Knoten usw.), können Sie feststellen, dass die Verbindung unterbrochen wurde, indem Sie fehlgeschlagene XHR-Anforderungen senden.

    Der Standardansatz besteht darin, die Anforderung einige Male zu wiederholen. Wenn dies nicht der Fall ist, benachrichtigen Sie den Benutzer, um die Verbindung zu überprüfen, und schlagen Sie ordnungsgemäß fehl.

0
Rishabh Anand

Auf meine Art.

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

Das Problem einiger Methoden wie navigator.onLine Ist, dass sie nicht mit einigen Browsern und mobilen Versionen kompatibel sind. Eine Option, die mir sehr geholfen hat, war die Verwendung der klassischen XMLHttpRequest -Methode und das Vorsehen des möglichen Falls dass die Datei mit der Antwort XMLHttpRequest.status im Cache gespeichert wurde, ist größer als 200 und kleiner als 304.

Hier ist mein Code:

 var xhr = new XMLHttpRequest();
 //index.php is in my web
 xhr.open('HEAD', 'index.php', true);
 xhr.send();

 xhr.addEventListener("readystatechange", processRequest, false);

 function processRequest(e) {
     if (xhr.readyState == 4) {
         //If you use a cache storage manager (service worker), it is likely that the
         //index.php file will be available even without internet, so do the following validation
         if (xhr.status >= 200 && xhr.status < 304) {
             console.log('On line!');
         } else {
             console.log('Offline :(');
         }
     }
}
0

anforderungskopf im Anforderungsfehler

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