sweet - ¿Cómo verificar si el usuario está en línea usando javascript o alguna biblioteca?

sweet alert bootstrap

Question

Necesito ayuda sobre cómo puedo verificar la conexión a Internet usando Javascript o jQuery o cualquier biblioteca si está disponible. porque estoy desarrollando una aplicación fuera de línea y quiero mostrar una versión si el usuario está fuera de línea y otra versión si está conectado.

Por el momento estoy usando este código:

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

Pero esto está funcionando muy lento para detectar. a veces solo se conecta a una red sin internet, se tarda de 5 a 10 segundos en alertar a false (sin internet).

Eché un vistazo a la biblioteca Offline.js, pero no estoy seguro si esta biblioteca es útil en mi caso. y no se como usarlo

Answer 1

Acabo de recibir esta funcionalidad de código de un sitio de 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);

Incluso tienen un enlace para verlo funcionar . Lo probé en IE, Firefox y Chrome. Chrome apareció como el más lento, pero solo duró medio segundo.

Answer 2

Consulte ¿Cómo verifico el tipo de conexión (WiFi / LAN / WWAN) con HTML5 / JavaScript? respuestas:

• Rob W sugiere navigator.connection ;
• Bergi sugiere la API de Windows.Networking.Connectivity través de este tutorial ;
• Gerard Sexton sugiere el enfoque de Gmail .

Answer 3

Creo que deberías probar OFFLINE.js ... parece bastante fácil de usar, solo pruébalo.

incluso proporciona la opción checkOnLoad que verifica la conexión inmediatamente en la carga de la página.

Offline.check (): verifica el estado actual de la conexión.

Estado sin conexión: el estado actual de la conexión ''arriba'' o ''abajo''

No lo he probado, sería bueno saber si funciona como se esperaba.

EDIT tomó un pequeño pico en el código, usa el método con SOLICITUD DE ERROR XHR sugerido en THIS Pregunta

Answer 4

Echa un vistazo a ¿ THIS Básicamente, realizar una solicitud de ajax a algo que usted sabe es probable que esté activo (por ejemplo, google.com) y si falla, no hay conexión a Internet.

Answer 5

Intente utilizar WebRTC , vea diafygi/webrtc-ips ; en parte

Además, estas solicitudes STUN se realizan fuera del procedimiento normal de XMLHttpRequest, por lo que no están visibles en la consola del desarrollador o no pueden ser bloqueadas por complementos como AdBlockPlus o Ghostery. Esto hace que estos tipos de solicitudes estén disponibles para el seguimiento en línea si un anunciante configura un servidor STUN con un dominio comodín.

modificado mínimamente para registrar "en línea" o "sin conexión" en la 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")
  }
});

Answer 6

Mi solución es tomar una imagen muy pequeña (1x1), no en caché y siempre en línea .

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

Notas:

• Use una copia local de jQuery contrario no funcionará fuera de línea .

• He probado el código onLine/offLine y funciona sin demora .

• Funciona con todos los navegadores, de escritorio o móviles.

• En caso de que se pregunte, no hay un seguimiento hecho desde Google Analytics ya que no usamos ningún argumento.

• Siéntase libre de cambiar la imagen, solo asegúrese de que no se almacene en caché y que sea de tamaño pequeño.

Answer 7

Puede usar la nueva API Fetch, que provocará un error casi de inmediato si no hay una red presente.

El problema con esto es que la API Fetch tiene soporte infantil en este momento (actualmente, Chrome tiene la implementación más estable, Firefox y Opera están llegando, IE no lo admite). Existe un polyfill para respaldar el principio de recuperación, pero no necesariamente el retorno rápido como con una implementación pura. Por otro lado, una aplicación sin conexión requeriría un navegador moderno ...

Un ejemplo que intentará cargar un archivo de texto sin formato a través de HTTPS para evitar los requisitos de CORS (el enlace se selecciona al azar, debe configurar un servidor con un archivo de texto pequeño para probar, por ahora en Chrome):

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

Otra opción es configurar un trabajador de servicio y usar la recuperación desde allí. De esta manera, podría servir una página sin conexión opcional / personalizada o una página en caché cuando la página solicitada no esté disponible. También esta es una API muy fresca.

Answer 8

Puede utilizar SignalR, si está desarrollando utilizando tecnologías web de MS. SignalR establecerá encuestas largas o sockets web en función de la tecnología del navegador de su servidor / cliente, y será transparente para usted como desarrollador. No necesita usarlo para nada más que para determinar si tiene una conexión activa con el sitio o no.

Si SignalR se desconecta por algún motivo, entonces se habrá perdido la conexión con el sitio, siempre y cuando la instancia de su servidor SignalR esté realmente instalada en el sitio. Por lo tanto, puede usar el evento / método $ .connection.hub.disconnected () en el cliente para establecer una var global que mantenga su estado de conexión.

Lea sobre SignalR y cómo usarlo para determinar los estados de conexión aquí ... http://www.asp.net/signalr/overview/guide-to-the-api/handling-connection-lifetime-events#clientdisconnect

Answer 9

navigator.onLine es una propiedad que mantiene un valor verdadero / falso (verdadero para en línea, falso para sin conexión). Esta propiedad se actualiza cada vez que el usuario cambia a "Modo sin conexión".

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

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

Answer 10

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