Détecter la connexion Internet est déconnecté?
Comment détecter la connexion Internet est déconnecté en JavaScript?
Vous pouvez déterminer que la connexion est perdue en faisant demandes XHR échouées.
L’approche standard consiste à réessayer la demande quelques fois. S'il ne passe pas, alerte l'utilisateur pour vérifier la connexion et échec en douceur.
Sidenote: Pour mettre l’application entière dans un état "hors ligne", vous risquez de perdre beaucoup de temps. Les connexions sans fil peuvent être intermittentes, etc. votre meilleur pari peut donc être Pour échouer simplement, préserver les données et alerter l'utilisateur .. en leur permettant de résoudre éventuellement le problème de connexion, le cas échéant, et de continuer à utiliser votre application avec une certaine dose de tolérance.
Sidenote: Vous pouvez vérifier la connectivité d'un site fiable tel que Google, mais cela peut ne pas être tout à fait utile car vous essayez simplement de faire votre propre demande, car même si Google peut être disponible, votre propre application peut ne pas l'être, et vous allez toujours devoir 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. Si cette information vous est utile, cela en vaudrait peut-être la peine.
Sidenote: L'envoi d'un ping peut être réalisé de la même manière que vous feriez toute sorte de demande ajax dans les deux sens, mais envoyer un ping à google, dans ce cas, poserait des problèmes. 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. Ceci est un catch-22 parce que si la connexion Internet est réellement le problème, nous ne pourrons pas accéder au serveur, et 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.
IE 8 supportera la propriété window.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.
En attendant, 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 Documentation Mozilla :
Dans 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 retournent
true. Ainsi, bien que vous puissiez supposer que le navigateur est hors ligne lorsqu'il renvoie une valeurfalse, 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 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 connexion envoie une valeur
false. Toutes les autres conditions renvoient une valeurtrue.
Il y a un certain nombre de façons de le faire:
- 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 comporte une section sur le traitement des demandes AJAX ayant échoué . Méfiez-vous des politique de même origine , ce qui pourrait vous empêcher d'accéder à des sites extérieurs à votre domaine.
Vous pouvez mettre un
onerrordans unimg, 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 supporte maintenant la propriété 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 définir votre système ou votre navigateur en mode hors connexion/en ligne et vérifiez la console ou la propriété _window.navigator.onLine_ pour connaître les changements de valeur. Vous pouvez le tester sur ce site web également.
Notez cependant cette citation de Documentation Mozilla :
Dans 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 retournent
true. Ainsi, alors que , vous pouvez supposer que le navigateur est hors ligne lorsqu'il renvoie une valeurfalse, impossible à obtenir. supposons qu'une valeurtruesignifie nécessairement que le navigateur peut accéder à Internet . Vous pourriez recevoir des 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 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 connexion envoie une valeur
false. Jusqu'à Firefox 41, toutes les autres conditions renvoient une valeurtrue; depuis Firefox 41, sous OS X et Windows, la valeur suivra la connectivité réseau réelle.
(c'est moi qui souligne)
Cela signifie que si _window.navigator.onLine_ est false (ou si vous obtenez un événement offline), vous êtes assuré de ne pas avoir de connexion Internet.
Si c'est true cependant (ou si vous obtenez un événement online), 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.
Au départ, j'avais l'intention de poster ceci comme une mise à jour de réponse de Grant Wagner , mais cela semblait trop être 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é de navigateur navigator.onLine plutôt que d’envoyer des requêtes réseau. Ainsi, developer.mozilla.org/En/Online_and_offline_events , il est même pris en charge par les anciennes versions de Firefox et C'EST À DIRE.
Récemment, le WHATWG a spécifié l’ajout des événements online et offline au cas où vous deviez réagir aux modifications de navigator.onLine.
Faites également attention au lien posté par Daniel Silveira, qui souligne que le fait de s’appuyer sur ces signaux/propriétés pour la synchronisation avec le serveur n’est pas toujours une bonne idée.
Vous pouvez utiliser le error callback de $. Ajax () , qui se déclenche si la demande échoue. Si textStatus est égal à la chaîne "timeout", cela signifie probablement que la connexion est interrompue:
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 : fonction à appeler si la requête échoue. Trois arguments sont transmis à la fonction: l'objet XMLHttpRequest, une chaîne décrivant le type d'erreur survenue et un objet exception facultatif, le cas échéant. Les valeurs possibles pour le deuxième argument (outre null) sont "timeout", "erreur", "non modifié" 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!');
}
}
});
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é.
Par exemple. error = 404 devrait quand même indiquer que vous êtes en ligne
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 s'il existe une connexion qui 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 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;
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)
}
}
});
Il y a 2 réponses à deux questions pour deux sénarios différents: -
Si vous utilisez JavaScript sur un site Web (c'est-à-dire; ou tout autre composant frontal) La manière la plus simple de le faire est la suivante:
<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.
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>
Le problème de certaines méthodes telles que navigator.onLine est qu’elles ne sont pas compatibles avec certains navigateurs et versions mobiles. Une option qui m’a beaucoup aidé était d’utiliser la méthode classique XMLHttpRequest et de prévoir le cas possible le fichier a été stocké dans le cache avec la réponse XMLHttpRequest.status est supérieur à 200 et inférieur à 304.
Voici mon 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 :(');
}
}
}
request head in request error
$.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");
}
});
}
});