slow - navigator.online javascript

¿Detecta que la conexión a Internet está fuera de línea?

Question

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

Answer 1

Aquí hay un fragmento de una utilidad auxiliar que tengo. Esto es javascript con nombre de página:

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

Deberías usar esto con la detección de métodos, si no disparar una forma ''alternativa'' de hacer esto. El tiempo se acerca rápidamente cuando esto será todo lo que se necesita. Los otros métodos son hacks.

Answer 2

Como dijo olliej, el uso de la propiedad del navegador navigator.onLine es preferible a enviar solicitudes de red y, de acuerdo con developer.mozilla.org/En/Online_and_offline_events , incluso es compatible con versiones anteriores de Firefox e IE.

Recientemente, WHATWG ha especificado la adición de eventos en online y offline , en caso de que necesite reaccionar en los cambios de navigator.onLine .

También preste atención al enlace publicado por Daniel Silveira que señala que depender de esas señales / propiedades para sincronizar con el servidor no siempre es una buena idea.

Answer 3

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

Answer 4

Estaba buscando una solución del lado del cliente para detectar si Internet no funciona o mi servidor no funciona. 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 que resistiría la prueba del tiempo. Un script o imagen alojada externa podría cambiar en el futuro y provocar un error en el código de detección.

Encontré una manera de detectarlo buscando un xhrStatus con un código 404. Además, uso JSONP para eludir 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)
        }
    }
});

Answer 5

Hay 2 respuestas para dos senarios diferentes:

1. Si usa JavaScript en un sitio web (es decir, o en cualquier parte del front-end), 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>

2. Pero si usa 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 funciona, alerta al usuario para que verifique la conexión y falle con elegancia.

Answer 6

Hay muchas maneras de hacer esto:

• Solicitud de AJAX a su propio sitio web Si esa solicitud falla, hay buenas posibilidades de que sea la conexión la que falla. La documentación de JQuery tiene una sección sobre el manejo de solicitudes AJAX fallidas . Tenga cuidado con la misma política de origen al hacer esto, lo que puede impedirle el acceso a sitios fuera de su dominio.

• Podrías 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 de ajax.

Así que hay varias formas diferentes de probar y detectar esto, ninguna perfecta, pero a falta 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.

Answer 7

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

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 de Ajax.

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

Actualización (16/11/2014)

Los principales navegadores ahora son compatibles con esta propiedad, pero los resultados pueden variar.

Cita de la 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á fuera de línea; 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 obtener falsos positivos, como en los casos en que la computadora ejecuta un software de virtualización que tiene adaptadores Ethernet virtuales 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 false . Todas las demás condiciones devuelven un valor true .

Answer 8

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

Answer 9

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>

Answer 10

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 funciona, alerta al usuario para que verifique la conexión y falle con elegancia .

Nota: Poner toda la aplicación en un estado "fuera de línea" puede llevar a una gran cantidad de trabajo propenso a errores de manejar el estado ... las conexiones inalámbricas pueden aparecer y desaparecer, etc. Por lo tanto, su mejor opción puede ser fallar con elegancia, preservar el datos, y alertar al usuario ... permitiéndole eventualmente solucionar el problema de conexión, si hay uno, y continuar usando su aplicación con una buena cantidad de perdón.

Nota: Puede consultar un sitio confiable como google para obtener conectividad, pero puede que no sea del todo útil como tratar de hacer su propia solicitud, porque mientras que Google esté disponible, su propia aplicación puede no estar disponible, y usted todavía va a hacerlo. tiene que manejar su propio problema de conexión. Intentar enviar un ping a Google sería una buena forma 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.

Nota : El envío de un Ping podría lograrse de la misma manera que haría cualquier tipo de solicitud de Ajax bidireccional, pero enviar un ping a google en este caso plantearía algunos desafíos. En primer lugar, tendríamos los mismos problemas entre dominios que se encuentran normalmente al hacer las comunicaciones ajax. Una opción es configurar un proxy del lado del servidor, donde hacemos ping Google (o al sitio) y devolvemos los resultados del ping a la aplicación. Esto es un catch-22 , porque si la conexión a Internet es en realidad la problema, no podremos acceder al servidor, y si el problema de conexión es solo en nuestro propio dominio, no podremos notar la diferencia. Se podrían intentar otras técnicas entre dominios, por ejemplo, incrustando un iframe en su página que apunta a google.com, y luego sondear el iframe para determinar si tiene éxito o no (examine los contenidos, etc.). Incrustar una imagen puede que realmente no nos diga nada, 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ás que ponderar estas opciones para tu aplicación específica.

Answer 11

Puede usar la devolución de llamada de error $.ajax() , que se dispara si la solicitud falla. Si textStatus es igual a la cadena "timeout", probablemente significa que la conexión se ha roto:

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

Del $.ajax() :

Error : una función que debe invocarse si la solicitud falla. La función recibe tres argumentos: el objeto XMLHttpRequest, una cadena que describe el tipo de error que ocurrió y un objeto de excepción opcional, si se produjo. Los valores posibles para el segundo argumento (además de nulo) son "timeout", "error", "notmodified" y "parsererror". Este es un evento de Ajax

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

Answer 12

Script muy interesante que resume mucho de lo anterior:

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

Es muy útil, y porque está basado en Ajax, es asíncrono, por lo que puede verificar si Internet está conectado sin salir de la página original. Utilizando esto con un temporizador también puede tener un componente en la página revisando cada n minutos.

Answer 13

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 sencilla función para detectar si hay una conexión, ¡funciona muy bien!

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

Answer 14

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, verificar los códigos de estado de retorno http, etc.

Answer 15

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