Detectar la conexión a Internet sin conexión a internet?

https://stackoverflow.com/questions/189430

06-07-2019
|

Pregunta

Cómo detectar la conexión a Internet está fuera de línea en JavaScript?

Solución

Puede determinar que la conexión se pierde realizando solicitudes XHR fallidas .

El enfoque estándar es volver a intentar la solicitud varias veces. Si no se realiza, alerta al usuario para verificar la conexión, y falla con gracia .

Nota al margen: Para poner toda la aplicación en un " offline " el estado puede conducir a una gran cantidad de trabajo de manejo del estado propenso a errores ... las conexiones inalámbricas pueden ir y venir, etc. Por lo tanto, su mejor opción puede ser simplemente fallar con gracia, preservar los datos y alertar al usuario ... permitiéndoles eventualmente solucione el problema de conexión si existe, y continúe usando su aplicación con una buena cantidad de perdón.

Nota: puede verificar la conectividad de un sitio confiable como google, pero esto puede no ser del todo útil simplemente tratando de hacer su propia solicitud, porque si bien Google puede estar disponible, su propia aplicación puede no sea así, y aún tendrá que manejar su propio problema de conexión. Intentar enviar un ping a Google sería una buena manera de confirmar que la conexión a Internet en sí misma no funciona, por lo que si esa información es útil para usted, entonces podría valer la pena.

Sidenote : Enviar un ping se puede lograr de la misma manera que haría cualquier tipo de solicitud ajax bidireccional, pero enviando un ping a google, en este caso, plantearía algunos desafíos. Primero, tendríamos los mismos problemas de dominio cruzado que normalmente se encuentran al hacer comunicaciones Ajax. Una opción es configurar un proxy del lado del servidor, en el que realmente ping google (o cualquier sitio), y devolver los resultados del ping a la aplicación. Este es un catch-22 porque si la conexión a Internet es realmente el problema, no podremos acceder al servidor, y si el problema de conexión es solo en nuestro propio dominio, ganaremos " No ser capaz de notar la diferencia. Se podrían probar otras técnicas de dominio cruzado, por ejemplo, incrustando un iframe en su página que apunta a google.com, y luego sondeando el iframe por éxito / fracaso (examine el contenido, etc.). Incrustar una imagen puede no decirnos nada realmente, porque necesitamos una respuesta útil del mecanismo de comunicación para sacar una buena conclusión sobre lo que está sucediendo. De nuevo, determinar el estado de la conexión a Internet en su conjunto puede ser más problemático de lo que vale. Tendrá que sopesar estas opciones para su aplicación específica.

Otros consejos

IE 8 admitirá la ventana ventana .navigator.onLine propiedad.

Pero, por supuesto, eso no ayuda con otros navegadores o sistemas operativos. Predigo que otros proveedores de navegadores decidirán proporcionar esa propiedad también dada la importancia de conocer el estado en línea / fuera de línea en las aplicaciones Ajax.

Hasta que eso suceda, XHR o una solicitud Image() o <img> pueden proporcionar algo cercano a la funcionalidad que desea.

Actualización (2014/11/16)

Los principales navegadores ahora admiten esta propiedad, pero sus resultados variarán.

Cita de Documentación de Mozilla :

En Chrome y Safari, si el navegador no puede conectarse a una red de área local (LAN) o un enrutador, está desconectado; todas las demás condiciones devuelven true. Entonces, si bien puede suponer que el navegador está fuera de línea cuando devuelve un valor false, no puede suponer que un valor verdadero necesariamente significa que el navegador puede acceder a Internet. Podría estar obteniendo falsos positivos, como en los casos en que la computadora está ejecutando un software de virtualización que tiene adaptadores virtuales de Ethernet que siempre están & "; Conectados. &"; Por lo tanto, si realmente desea determinar el estado en línea del navegador, debe desarrollar medios adicionales para verificar.

En Firefox e Internet Explorer, cambiar el navegador al modo fuera de línea envía un valor <=>. Todas las demás condiciones devuelven un valor <=>.

Hay varias formas de hacer esto:

Solicitud AJAX a su propio sitio web. Si esa solicitud falla, hay una buena posibilidad de que sea la conexión la que falla. La documentación JQuery tiene una sección sobre manejo de solicitudes AJAX fallidas . Tenga cuidado con la Política del mismo origen al hacer esto, lo que puede impedir que acceda a sitios fuera de su dominio.
Puedes poner un onerror en un img, como
```
<img src='http://www.example.com/singlepixel.gif' 
      onerror='alert("Connection dead");' />
```
Este método también podría fallar si la imagen de origen se mueve / cambia de nombre, y generalmente sería una opción inferior a la opción ajax.

Por lo tanto, hay varias formas diferentes de intentar detectar esto, ninguna perfecta, pero en ausencia de la capacidad de saltar del entorno limitado del navegador y acceder directamente al estado de conexión de red del usuario, parecen ser las mejores opciones.

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

Casi todos los principales navegadores ahora apoyo a la window.navigator.onLine de la propiedad, y el correspondiente online y offline eventos de la ventana:

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

Pruebe la configuración de su sistema o navegador fuera de línea/en línea y modo de verificación de la consola o el window.navigator.onLine la propiedad de los cambios de valor.Puedes probarlo en este sitio web así.

Nota, sin embargo, esta cita de Mozilla Documentación:

En Chrome y Safari, si el navegador no es capaz de conectarse a una red de área local (LAN) o de un router, es fuera de línea;todas las demás condiciones de devolución true.Así, mientras que usted puede asumir que el navegador está fuera de línea cuando se devuelve un false valor, usted no puede asumir que un true valor necesariamente significa que el navegador puede acceder a internet.Usted podría conseguir falsos positivos, como en los casos en donde el equipo se está ejecutando un software de virtualización que ha virtual adaptadores ethernet que siempre están "conectados". Por lo tanto, si usted realmente desea determinar el estado en línea del navegador, usted debe desarrollar medios adicionales para su verificación.

En Firefox y Internet Explorer, cambiar el navegador para el modo sin conexión envía un false valor.Hasta que Firefox 41, todas las demás condiciones de devolución de un true valor;desde Firefox 41, en OS X y Windows, el valor real de la conectividad de red.

(el énfasis es mío)

Esto significa que si window.navigator.onLine es false (o de obtener un offline caso), usted está garantizado para no tener conexión a Internet.

Si es true sin embargo (o de obtener un online caso), sólo significa que el sistema está conectado a alguna red, en el mejor.Esto no significa que usted tiene acceso a Internet por ejemplo.Para comprobar que, usted todavía tendrá que utilizar una de las soluciones que se describen en las otras respuestas.

_{Yo inicialmente la intención de publicar esto como una actualización de Concesión de Wagner respuesta, pero parecía demasiado de una edición, sobre todo teniendo en cuenta que el 2014 actualización ya estaba no de él.}

La API de caché de aplicaciones HTML5 especifica navigator.onLine, que actualmente está disponible en las versiones beta de IE8, WebKit (por ejemplo, Safari), y ya es compatible con Firefox 3

Como olliej dijo, utilizando el navigator.onLine navegador de la propiedad es preferible que el envío de las solicitudes de red y, en consecuencia, con developer.mozilla.org/En/Online_and_offline_events, es incluso compatible con antiguas versiones de Firefox y el IE.

Recientemente, el WHATWG se ha especificado la adición de la online y offline los eventos, en caso de que usted necesita para reaccionar en navigator.onLine cambios.

Por favor, prestar atención a que el enlace publicado por Daniel Silveira, que señala que confiar en aquellos señal/propiedad para la sincronización con el servidor no es siempre una buena idea.

Puede usar $ .ajax () 's error devolución de llamada, que se activa si la solicitud falla. Si textStatus es igual a la cadena & Quot; timeout & Quot; probablemente significa que la conexión está rota:

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

Del doc :

Error : una función que se llamará si la solicitud falla La función se pasa tres argumentos: el objeto XMLHttpRequest, una cadena que describe el tipo de error que ocurrió y un opcional objeto de excepción, si se produjo uno. Posibles valores para el segundo argumento (además de nulo) son " timeout " ;, " error " ;, " no modificado " y " parsererror " ;. Este es un evento de Ajax

Entonces, por ejemplo:

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

una llamada ajax a su dominio es la forma más fácil de detectar si está desconectado

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

esto es solo para darle el concepto, debe mejorarse, verifique los códigos de estado http de retorno, etc.

Creo que es una forma muy 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;

Tuve que hacer una aplicación web (basada en ajax) para un cliente que trabaja mucho con las escuelas, estas escuelas a menudo tienen una mala conexión a Internet. ¡Utilizo esta función simple para detectar si hay una conexión, funciona muy bien!

Uso CodeIgniter y 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();
        }
    });
}

Estaba buscando una solución del lado del cliente para detectar si Internet estaba caído o si mi servidor estaba caído. Las otras soluciones que encontré siempre parecían depender de un archivo o imagen de script de un tercero, lo que para mí no parecía resistir el paso del tiempo. Una secuencia de comandos o imagen externa alojada podría cambiar en el futuro y provocar que el código de detección falle.

He encontrado una manera de detectarlo buscando un xhrStatus con un código 404. Además, uso JSONP para evitar la restricción CORS. Un código de estado que no sea 404 muestra que la conexión a Internet no funciona.

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

A mi manera.

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

Hay dos respuestas para dos senarios diferentes: -

Si está utilizando JavaScript en un sitio web (es decir, o cualquier parte frontal) La forma más sencilla de hacerlo es:

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

Pero si está utilizando js en el lado del servidor (es decir, nodo, etc.), puede determinar que la conexión se pierde al realizar solicitudes XHR fallidas.

El enfoque estándar es volver a intentar la solicitud varias veces. Si no se realiza, alerta al usuario para que compruebe la conexión y falla correctamente.

cabeza de solicitud en error de solicitud

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

Aquí hay un fragmento de una utilidad auxiliar que tengo. Este es JavaScript de espacio de nombres:

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

Debería usar esto con la detección de métodos; de lo contrario, active una forma 'alternativa' de hacerlo. Se acerca rápidamente el momento en que esto será todo lo que se necesita. Los otros métodos son hacks.

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow