web-dev-qa-db-fra.com

Comment vérifier si l'utilisateur est en ligne en utilisant javascript ou n'importe quelle bibliothèque?

J'ai besoin d'aide pour savoir comment vérifier la connexion Internet à l'aide de Javascript ou jQuery ou de n'importe quelle bibliothèque si disponible. parce que je développe une application hors ligne et je veux afficher une version si l'utilisateur est hors ligne et une autre version si l'utilisateur est en ligne.

Pour le moment j'utilise ce code:

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

Mais cela fonctionne très lentement à détecter. Parfois, il est simplement connecté à un réseau sans Internet, il faut 5 à 10 secondes pour alerter false (pas d'Internet).

J'ai jeté un œil à la bibliothèque Offline.js, mais je ne sais pas si cette bibliothèque est utile dans mon cas. et je ne sais pas comment l'utiliser

javascriptjqueryoffline
26
Stranger B.

je pense que vous devriez essayer OFFLINE.js .. il semble assez facile à utiliser, essayez-le.

il fournit même l'option checkOnLoad qui vérifie la connexion immédiatement au chargement de la page.

Offline.check (): Vérifiez l'état actuel de la connexion.

Offline.state: l'état actuel de la connexion "haut" ou "bas"

je ne l'ai pas essayé, ce serait bien de savoir si cela fonctionne comme prévu.

[~ # ~] edit [~ # ~] a pris un petit pic dans le code, il utilise la méthode avec ÉCHEC DE LA DEMANDE XHR suggéré dans CE SO Question

9
Doml The-Bread

Je viens de recevoir ce morceau de fonctionnalité de code d'un Site Mozilla :

window.addEventListener('load', function(e) {
  if (navigator.onLine) {
    console.log('We\'re online!');
  } else {
    console.log('We\'re offline...');
  }
}, false);

window.addEventListener('online', function(e) {
  console.log('And we\'re back :).');
}, false);

window.addEventListener('offline', function(e) {
  console.log('Connection is down.');
}, false);

Ils ont même un lien pour le voir fonctionner . Je l'ai essayé dans IE, Firefox et Chrome. Chrome est apparu le plus lent, mais ce n'était qu'environ une demi-seconde.

9
Jamie Barker

Jetez un oeil à Détectez-vous que la connexion Internet est hors ligne? Fondamentalement, faites une demande ajax à quelque chose que vous savez susceptible d'être en place (disons google.com) et s'il échoue, il n'y a pas de connexion Internet .

4
dmeglio

Essayez d'utiliser WebRTC, voir diafygi/webrtc-ips ; en partie

En outre, ces demandes STUN sont effectuées en dehors de la procédure XMLHttpRequest normale, de sorte qu'elles ne sont pas visibles dans la console du développeur ou ne peuvent pas être bloquées par des plugins tels que AdBlockPlus ou Ghostery. Cela rend ces types de demandes disponibles pour le suivi en ligne si un annonceur configure un serveur STUN avec un domaine générique.

modifié au minimum pour se connecter "en ligne" ou "hors ligne" à console

// https://github.com/diafygi/webrtc-ips
function online(callback){

    //compatibility for firefox and chrome
    var RTCPeerConnection = window.RTCPeerConnection
        || window.mozRTCPeerConnection
        || window.webkitRTCPeerConnection;
    var useWebKit = !!window.webkitRTCPeerConnection;

    //bypass naive webrtc blocking using an iframe
    if(!RTCPeerConnection) {
        //NOTE: you need to have an iframe in the page
        // right above the script tag
        //
        //<iframe id="iframe" sandbox="allow-same-Origin" style="display: none"></iframe>
        //<script>...getIPs called in here...
        //
        var win = iframe.contentWindow;
        RTCPeerConnection = win.RTCPeerConnection
            || win.mozRTCPeerConnection
            || win.webkitRTCPeerConnection;
        useWebKit = !!win.webkitRTCPeerConnection;
    }

    //minimal requirements for data connection
    var mediaConstraints = {
        optional: [{RtpDataChannels: true}]
    };

    //firefox already has a default stun server in about:config
    //    media.peerconnection.default_iceservers =
    //    [{"url": "stun:stun.services.mozilla.com"}]
    var servers = undefined;

    //add same stun server for chrome
    if(useWebKit)
        servers = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]};

    //construct a new RTCPeerConnection
    var pc = new RTCPeerConnection(servers, mediaConstraints);

    //create a bogus data channel
    pc.createDataChannel("");

    var fn = function() {};

    //create an offer sdp
    pc.createOffer(function(result){

        //trigger the stun server request
        pc.setLocalDescription(result, fn, fn);

    }, fn);

    //wait for a while to let everything done
    setTimeout(function(){
        //read candidate info from local description
        var lines = pc.localDescription.sdp.split("\n");
        // return `true`:"online" , or `false`:"offline"
        var res = lines.some(function(line) {
          return line.indexOf("a=candidate") === 0
        });
        callback(res);
    }, 500);
}

//Test: Print "online" or "offline" into the console
online(function(connection) {
  if (connection) {
    console.log("online")
  } else {
    console.log("offline")
  }
});
2
guest271314

navigator.onLine est une propriété qui conserve une valeur vrai/faux (vrai pour en ligne, faux pour hors ligne). Cette propriété est mise à jour chaque fois que l'utilisateur passe en "mode hors ligne".

window.addEventListener('load', function() {

  function updateOnlineStatus(event) {
     document.body.setAttribute("data-online", navigator.onLine);
  }
  updateOnlineStatus();
  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});
2
Selva kumar

Ma solution est de saisir un très petite image (1x1), non mis en cache et toujours en ligne.

<head>
<script src="jquery.min.js"></script>
</head>
<body>
<script>
$( document ).ready(function() {
function onLine() {
alert("onLine")
}
function offLine() {
alert("offLine")
}
var i = new Image();
i.onload = onLine;
i.onerror = offLine;
i.src = 'http://www.google-analytics.com/__utm.gif';
});
</script>
<body>

Remarques:

  • Utilisez un copie locale de jQuery sinon cela ne fonctionnera pas offLine.

  • J'ai testé le code onLine/offLine et ça marche sans délai.

  • Fonctionne avec tous les navigateurs, de bureau ou mobiles.

  • Au cas où vous vous poseriez la question, aucun suivi n'est effectué à partir de Google Analytics, car nous n'utilisons aucun argument.

  • N'hésitez pas à modifier l'image, assurez-vous simplement qu'elle n'est pas mise en cache et qu'elle est de petite taille.

2
Pedro Lobito

Vous pouvez utiliser le nouveau Fetch API qui déclenchera une erreur presque immédiatement si aucun réseau n'est présent.

Le problème avec cela est que l'API Fetch a support infantile en ce moment (actuellement Chrome a le plus implémentation stable, Firefox et Opera y arrivent, IE ne le prend pas en charge). Il existe un polyfill pour supporter le principe de fetch mais pas forcément le retour rapide comme avec une implémentation pure. D'un autre côté, une application hors ligne nécessiterait un navigateur moderne ...

Un exemple qui tentera de charger un fichier texte brut sur HTTPS pour éviter les exigences CORS (le lien est choisi au hasard, vous devez configurer un serveur avec un petit fichier texte pour tester - tester dans Chrome, pour l'instant):

fetch("https://link.to/some/testfile")
    .then(function(response) {
        if (response.status !== 200) {  // add more checks here, ie. 30x etc.
            alert("Not available");     // could be server errors
        }
        else
            alert("OK");
    })
    .catch(function(err) {
        alert("No network");           // likely network errors (incl. no connection)
    });

Une autre option consiste à configurer un Service worker et à utiliser la récupération à partir de là. De cette façon, vous pourriez servir une page hors ligne facultative/personnalisée ou une page mise en cache lorsque la page demandée n'est pas disponible. C'est aussi une API très récente.

1
user1693593

Vous pouvez utiliser SignalR, si vous développez à l'aide des technologies Web MS. SignalR établira une longue interrogation ou des sockets Web en fonction de la technologie de votre navigateur serveur/client, transparente pour vous, le développeur. Vous n'avez pas besoin de l'utiliser pour autre chose que de déterminer si vous avez une connexion active au site ou non.

Si SignalR se déconnecte pour une raison quelconque, vous avez perdu la connexion au site, tant que votre instance de serveur SignalR est réellement installée sur le site. Ainsi, vous pouvez utiliser l'événement/méthode $ .connection.hub.disconnected () sur le client pour définir une variable globale qui contient l'état de votre connexion.

Pour en savoir plus sur SignalR et comment l'utiliser pour déterminer les états de connexion ici ... http://www.asp.net/signalr/overview/guide-to-the-api/handling-connection-lifetime-events #clientdisconnect

1
Justin Russo
// check if online/offline
// http://www.kirupa.com/html5/check_if_internet_connection_exists_in_javascript.htm
function doesConnectionExist() {
    var xhr = new XMLHttpRequest();
    var file = "http://www.yoursite.com/somefile.png";
    var randomNum = Math.round(Math.random() * 10000);

    xhr.open('HEAD', file + "?rand=" + randomNum, false);

    try {
        xhr.send();

        if (xhr.status >= 200 && xhr.status < 304) {
            return true;
        } else {
            return false;
        }
    } catch (e) {
        return false;
    }
}
1
Teo Dragovic

Voir Comment puis-je vérifier le type de connexion (WiFi/LAN/WWAN) en utilisant HTML5/JavaScript? réponses:

1
falsarella