Détecter la connexion Internet est hors ligne?

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

L’approche standard consiste à réessayer la demande plusieurs fois. Si ce n’est pas le cas, avertissez l’utilisateur de vérifier la connexion et échouez correctement .

Note Sidenote: Le fait de mettre l’ensemble de l’application dans un état «hors ligne» peut entraîner beaucoup de manipulation des états. Les connexions sans fil peuvent aller et venir, etc. les données et alerter l’utilisateur .. leur permettant éventuellement de résoudre le problème de connexion, le cas échéant, et de continuer à utiliser votre application avec beaucoup de tolérance.

Sidenote: Vous pouvez vérifier un site fiable comme Google pour la connectivité, mais cela peut ne pas être tout à fait utile car il suffit d’essayer de faire votre propre demande, car alors que Google est disponible, votre propre application peut ne pas l’être, et vous allez toujours avoir à 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.

Note Sidenote : L’ envoi d’un ping pourrait être réalisé de la même manière que vous feriez n’importe quelle requête ajax bidirectionnelle, mais l’envoi d’un ping à google dans ce cas poserait quelques problèmes. Premièrement, nous aurions les mêmes problèmes interdomaines que ceux généralement rencontrés lors des communications ajax. Une option consiste à configurer un proxy côté serveur, dans lequel nous envoyons ping requête ping Google (ou à un autre site), puis renvoyons les résultats du ping à l’application. problème, nous ne pourrons pas accéder au serveur, et si le problème de connexion concerne uniquement notre propre domaine, nous ne pourrons pas faire la différence. D’autres techniques interdomaines peuvent être essayées, par exemple, l’intégration d’un iframe dans votre page qui pointe vers google.com, puis l’interrogation du succès / de l’échec de l’iframe (parsing du contenu, etc.). L’intégration d’une image ne nous dit peut-être rien, car nous avons besoin d’une réponse utile du mécanisme de communication pour tirer une bonne conclusion sur ce qui se passe. Donc, encore une fois, déterminer l’état de la connexion Internet dans son ensemble peut représenter plus de problèmes qu’elle n’en vaut la peine. Vous devrez pondérer ces options pour votre application spécifique.

IE 8 prendra en charge la propriété window.navigator.onLine .

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

Tant que cela ne se produit pas, une requête XHR ou Image() ou peut fournir quelque chose 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 varient.

Citation de la documentation de Mozilla :

Dans Chrome et Safari, si le navigateur ne peut pas se connecter à un réseau local (LAN) ou à un routeur, il est hors ligne. toutes les autres conditions sont true . Donc, même si vous pouvez 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 des faux positifs, par exemple lorsque l’ordinateur exécute un logiciel de virtualisation doté d’adaptateurs Ethernet virtuels toujours “connectés”. Par conséquent, si vous souhaitez vraiment déterminer le statut 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 ligne envoie une valeur false . Toutes les autres conditions renvoient une valeur true .

Il y a un certain nombre de façons de le faire:

• AJAX demande à votre propre site Web. Si cette demande échoue, il y a de fortes chances que la connexion soit en cause. La documentation JQuery comporte une section sur la gestion des requêtes AJAX ayant échoué . Faites attention à la politique Same Origin en procédant de la sorte, ce qui peut vous empêcher d’accéder à des sites extérieurs à votre domaine.

• Vous pourriez mettre une onerror dans un img , comme

  Cette méthode pourrait également échouer si l’image source est déplacée / renommée et serait généralement un choix inférieur à l’option ajax.

Il existe donc plusieurs manières différentes d’essayer et de détecter ce problème, mais elles ne sont pas parfaites, mais en l’absence de capacité à accéder directement au statut de connexion de l’utilisateur, elles semblent être les meilleures.

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

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

Comme l’a dit olliej, utiliser la propriété browser de navigator.onLine est préférable à l’envoi de requêtes réseau et, en conséquence, avec developer.mozilla.org/En/Online_and_offline_events , elle est même supscope par les anciennes versions de Firefox et IE.

Récemment, le WHATWG a spécifié l’ajout des événements en online et offline , au cas où vous deviez réagir aux modifications de navigator.onLine .

Veuillez également faire attention au lien publié par Daniel Silveira qui souligne que le fait de compter sur ces signaux / propriétés pour la synchronisation avec le serveur n’est pas toujours une bonne idée.

Vous pouvez utiliser le rappel d’ error $ .ajax () , qui se déclenche si la demande échoue. Si textStatus est égal à la chaîne “timeout”, 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 } 

De la doc :

Erreur : Une fonction à appeler si la demande échoue. La fonction reçoit trois arguments: L’object XMLHttpRequest, une chaîne décrivant le type d’erreur survenue et un object d’exception facultatif, le cas échéant. Les valeurs possibles pour le deuxième argument (outre null) sont “timeout”, “error”, “notmodified” et “parsererror”. Ceci est un événement Ajax

Donc 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!'); } } }); 

Je devais créer une application web (basée sur ajax) pour un client qui travaille beaucoup avec les écoles, ces écoles ont souvent une mauvaise connexion internet. J’utilise cette fonction simple pour détecter si une connexion existe, ça marche très bien!

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

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

c’est juste pour vous donner le concept, il devrait être amélioré, vérifier les codes d’état de retour http etc.

Je pense que c’est très simple.

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

Je cherchais une solution côté client pour détecter si Internet était en panne ou si mon serveur était en panne. Les autres solutions que j’ai trouvées semblaient toujours dépendre d’un fichier script ou d’une image tiers, ce qui ne me semblait pas résister à l’épreuve du temps. Un script ou une image hébergé externe pourrait changer à l’avenir et provoquer 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 ressortingction 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) } } }); 

Script très intéressant qui reprend beaucoup de dessus:

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

C’est très utile, et comme il est basé sur Ajax, il est asynchrone, vous pouvez donc vérifier si Internet est connecté sans quitter la page d’origine. En utilisant ceci avec une timer, vous pouvez également avoir un composant dans la page vérifiant toutes les n minutes.

Ma façon.

     Am I online? 

Il y a 2 réponses pour deux senarios différents: –

1. Si vous utilisez JavaScript sur un site Web (c.-à-d., Ou toute partie frontale), la façon la plus simple de procéder est la suivante:

    
   The Navigator Object
    
   The onLine property returns true if the browser is online:
    
     

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

   L’approche standard consiste à réessayer la demande plusieurs fois. Si ce n’est pas le cas, avertissez l’utilisateur de vérifier la connexion et échouez correctement.

demande de tête dans l’erreur de demande

 $.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 javascript namespaced:

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

Vous devriez utiliser ceci avec la détection de méthode sinon déclencher une manière «alternative» de le faire. Le temps approche à grands pas lorsque tout sera nécessaire. Les autres méthodes sont des hacks.