Détecter la connexion Internet est déconnecté?

https://stackoverflow.com/questions/189430

06-07-2019
|

Question

Comment détecter la connexion Internet est déconnecté en JavaScript?

La solution

Vous pouvez déterminer que la connexion est perdue en effectuant des demandes XHR échouées .

L'approche standard consiste à réessayer la demande à quelques reprises. S'il ne réussit pas, avertissez l'utilisateur de vérifier la connexion et échouera normalement .

Remarque: pour placer l'ensemble de l'application dans un " déconnecté " état peut entraîner de nombreuses tâches susceptibles de générer des erreurs. les connexions sans fil peuvent aller et venir, etc. Ainsi, votre meilleur choix est peut-être simplement d’échouer en douceur, de préserver les données et d’alerter l’utilisateur .. en leur permettant de corrigez le problème de connexion, le cas échéant, et continuez à utiliser votre application avec un certain pardon.

Remarque: vous pouvez vérifier la connectivité d'un site fiable tel que Google. Toutefois, cela peut ne pas être tout à fait utile, car vous pouvez simplement faire votre propre demande, car même si Google est disponible, votre propre application peut ne pas être, et vous devrez toujours gérer votre propre problème de connexion. Essayer d'envoyer un ping à Google serait un bon moyen de confirmer que la connexion Internet est en panne, donc si cette information vous est utile, cela en vaut peut-être la peine.

Sidenote : l'envoi d'un ping peut s'effectuer de la même manière que vous feriez toute sorte de demande ajax dans les deux sens, mais en envoyant un ping à Google, dans ce cas, poserait des défis. Premièrement, nous aurions les mêmes problèmes inter-domaines que ceux rencontrés lors des communications Ajax. Une option consiste à configurer un proxy côté serveur, dans lequel nous ping google (ou tout autre site), et à renvoyer les résultats du ping à l'application. Il s'agit d'un catch-22 , car si la connexion Internet pose problème, nous ne pourrons pas accéder au serveur. Si le problème de connexion concerne uniquement notre propre domaine, nous avons gagné ". t être capable de faire la différence. Vous pouvez également essayer d'autres techniques interdomaines, par exemple en incorporant un iframe dans votre page qui pointe vers google.com, puis en interrogeant celui-ci sur la réussite / l'échec (examinez le contenu, etc.). L'intégration d'une image peut ne pas vraiment nous dire quoi que ce soit, car nous avons besoin d'une réponse utile du mécanisme de communication afin de tirer une bonne conclusion de ce qui se passe. Encore une fois, déterminer l’état de la connexion Internet dans son ensemble risque de poser plus de problèmes. Vous devrez pondérer ces options pour votre application spécifique.

Autres conseils

IE 8 prend en charge la fenêtre. Propriété .navigator.onLine .

Mais bien sûr, cela n’aide en rien les autres navigateurs ou systèmes d’exploitation. Je prédis que d'autres fournisseurs de navigateurs décideront de fournir cette propriété également, compte tenu de l'importance de connaître le statut en ligne / hors ligne dans les applications Ajax.

Jusqu'à ce que cela se produise, XHR ou une requête Image() ou <img> peut fournir quelque chose de proche de la fonctionnalité souhaitée.

Mise à jour (2014/11/16)

Les principaux navigateurs prennent désormais en charge cette propriété, mais vos résultats varieront.

Citation de la documentation sur Mozilla :

Sous Chrome et Safari, si le navigateur ne parvient pas à se connecter à un réseau local (LAN) ou à un routeur, il est hors ligne. toutes les autres conditions sont renvoyées true. Ainsi, bien que vous puissiez supposer que le navigateur est hors ligne lorsqu'il renvoie une valeur false, vous ne pouvez pas supposer qu'une valeur vraie signifie nécessairement que le navigateur peut accéder à Internet. Vous pourriez recevoir de faux positifs, par exemple dans les cas où l'ordinateur exécute un logiciel de virtualisation doté d'adaptateurs Ethernet virtuels toujours & "; Connectés. &"; Par conséquent, si vous voulez vraiment déterminer l’état en ligne du navigateur, vous devez développer des moyens supplémentaires de vérification.

Dans Firefox et Internet Explorer, le passage du navigateur en mode hors connexion envoie une valeur <=>. Toutes les autres conditions renvoient une <=> valeur.

Il existe plusieurs façons de procéder:

demande AJAX sur votre propre site Web. Si cette demande échoue, il y a de fortes chances que ce soit la connexion en faute. La documentation JQuery contient une section sur traitement des demandes AJAX échouées . Faites attention à la règle de provenance identique , qui pourrait vous empêcher d'accéder à des sites extérieurs à votre domaine.
Vous pouvez mettre un onerror dans un img, comme
```
<img src='http://www.example.com/singlepixel.gif' 
      onerror='alert("Connection dead");' />
```
Cette méthode peut également échouer si l'image source est déplacée / renommée et constituerait généralement un choix inférieur à l'option ajax.

Il existe donc différentes manières d’essayer de détecter ceci, mais aucune n’est parfaite, mais en l’absence de la possibilité de sortir du sandbox du navigateur et d’accéder directement au statut de connexion Internet de l’utilisateur, elles semblent être les meilleures options.

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

Presque tous les principaux navigateurs prennent désormais en charge le window.navigator.onLine , ainsi que les événements de fenêtre online et offline correspondants:

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

Essayez de configurer votre système ou votre navigateur en mode hors connexion / en ligne et vérifiez la console ou la propriété true pour connaître les changements de valeur. Vous pouvez le tester sur ce site Web .

Notez cependant cette citation de la documentation de Mozilla :

Sous Chrome et Safari, si le navigateur ne parvient pas à se connecter à un réseau local (LAN) ou à un routeur, il est hors ligne. toutes les autres conditions sont renvoyées false. Ainsi, alors que vous pouvez supposer que le navigateur est hors ligne lorsqu'il renvoie une <=> valeur , vous ne pouvez pas supposer qu'une <=> valeur signifie nécessairement que le navigateur peut accéder à Internet Vous pourriez recevoir de faux positifs, par exemple dans les cas où l'ordinateur exécute un logiciel de virtualisation doté d'adaptateurs Ethernet virtuels toujours & "; Connectés. &"; Par conséquent, si vous voulez vraiment déterminer l’état en ligne du navigateur, vous devez développer des moyens supplémentaires de vérification.

Dans Firefox et Internet Explorer, le passage du navigateur en mode hors connexion envoie une valeur <=>. Jusqu'à Firefox 41, toutes les autres conditions renvoient une valeur <=>; depuis Firefox 41, sous OS X et Windows, la valeur suivra la connectivité réseau actuelle.

(c'est moi qui souligne)

Cela signifie que si <=> est <=> (ou si vous obtenez un <=> événement), vous êtes assuré de ne pas avoir de connexion Internet.

S'il s'agit de <=> cependant (ou si vous obtenez un <=> événement), cela signifie simplement que le système est au mieux connecté à un réseau. Cela ne signifie pas que vous avez un accès Internet par exemple. Pour vérifier cela, vous devrez toujours utiliser l'une des solutions décrites dans les autres réponses.

_{J'avais initialement l'intention de publier ceci sous la forme d'une mise à jour de réponse de Grant Wagner , mais cela semblait trop une modification, d'autant plus que la mise à jour de 2014 était déjà pas de lui .}

L'API HTML5 Application Cache spécifie navigator.onLine, qui est actuellement disponible dans les bêtas d'IE8, les nightlies WebKit (par exemple, Safari) et déjà pris en charge dans Firefox 3

Comme le dit olliej, il est préférable d’utiliser la propriété du navigateur navigator.onLine plutôt que d’envoyer des requêtes réseau et, en conséquence, developer.mozilla.org/En/Online_and_offline_events , il est même pris en charge par les anciennes versions de Firefox et IE.

Récemment, le WHATWG a spécifié l’ajout des événements online et offline au cas où vous auriez besoin de réagir à <=> modifications.

Veuillez également faire attention au lien posté par Daniel Silveira, qui indique que le recours à ces signaux / propriétés pour la synchronisation avec le serveur n’est pas toujours une bonne idée.

Vous pouvez utiliser les $ .ajax () error callback, qui se déclenche si la requête échoue. Si textStatus est égal à la chaîne & Quot; timeout & Quot; cela signifie probablement que la connexion est rompue:

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

Extrait du doc :

Erreur : fonction à appeler si la requête échoue. La fonction est passée trois arguments: l'objet XMLHttpRequest, une chaîne décrivant le type d'erreur qui s'est produit et une option objet exception, s'il en existe un. Valeurs possibles pour la seconde Les arguments (outre null) sont " timeout " ;, " erreur " ;, " non modifié " et & "; Analyseur de syntaxe &"; Ceci est un événement Ajax

Ainsi, par exemple:

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

un appel ajax à votre domaine est le moyen le plus simple de détecter si vous êtes hors ligne

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

ceci est juste pour vous donner le concept, il devrait être amélioré, vérifiez les codes de statut http, etc.

Je pense que c'est un moyen très simple.

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;

J'ai dû créer une application Web (basée sur ajax) pour un client qui travaille souvent avec des écoles. Ces écoles ont souvent une mauvaise connexion Internet. J'utilise cette fonction simple pour détecter si une connexion est établie, fonctionne très bien!

J'utilise CodeIgniter et 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();
        }
    });
}

Je recherchais une solution côté client pour détecter si Internet était en panne ou mon serveur en panne. Les autres solutions que j'ai trouvées semblaient toujours dépendre d'un fichier de script ou d'une image tiers, ce qui, à mon avis, ne résoudrait pas l'épreuve du temps. Un script ou une image hébergé externe pourrait changer à l'avenir et entraîner l'échec du code de détection.

J'ai trouvé un moyen de le détecter en recherchant un xhrStatus avec un code 404. De plus, j'utilise JSONP pour contourner la restriction CORS. Un code d'état autre que 404 indique que la connexion Internet ne fonctionne pas.

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

Mon chemin.

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

Il existe 2 réponses à deux senarios différents: -

Si vous utilisez JavaScript sur un site web (c'est-à-dire; n'importe quelle partie du front-end) Le moyen le plus simple de le faire est:

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

Mais si vous utilisez js côté serveur (noeud, etc.), vous pouvez déterminer que la connexion est perdue en effectuant des demandes XHR échouées.

L’approche standard consiste à réessayer la demande plusieurs fois. S'il ne réussit pas, avertissez l'utilisateur de vérifier la connexion et échouez normalement.

erreur de requête dans la requête

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

Voici un extrait d'un utilitaire d'aide que j'ai. Ceci est un espace de noms javascript:

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

Vous devriez l'utiliser avec la détection de méthode, sinon utilisez un autre moyen de le faire. Le temps approche à grands pas quand ce sera tout ce qui est nécessaire. Les autres méthodes sont des hacks.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow