¿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

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

El enfoque estándar es reintento de la solicitud un par de veces. Si no se procesa, alerta al usuario para verificar la conexión, y falla correctamente.

Sidenote: Poner toda la aplicación en un estado "fuera de línea" puede conducir a un montón de trabajo propenso a errores del estado ... las conexiones inalámbricas pueden aparecer y desaparecer, etc. Así que su mejor opción es simplemente falle con elegancia, conserve los datos y avise al usuario ... permitiéndole eventualmente solucionar el problema de conexión, si hay uno, y continúe usando su aplicación con una buena cantidad de perdón.

Sidenote: Puede consultar un sitio confiable como google para la conectividad, pero esto puede no ser del todo útil como tratar de hacer su propia solicitud, porque mientras google esté disponible, su propia aplicación puede no serlo, y usted todavía tendrá 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 al margen: El envío de un ping podría lograrse de la misma manera que lo haría con cualquier tipo de petición ajax de dos vías, pero el envío de un ping a Google en este caso sería plantear algunos retos. 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 en realidad ping google (o cualquier sitio), y devolver los resultados del ping a la aplicación .. Esto es catch-22, porque si la conexión a Internet es De hecho, el problema no será posible llegar 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 2

Hay un número de maneras de hacer esto:

• petición 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 JQuery tiene una sección en handling failed AJAX requests. Tenga cuidado con el Same Origin Policy al hacer esto, lo que puede evitar que acceda a sitios fuera de su dominio.

• Se puede 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 en general, sería una opción inferior a la opción ajax.

por lo que hay varias maneras diferentes para tratar de detectar esto, ninguno es perfecto, pero en ausencia de la capacidad de saltar fuera de la zona protegida del explorador y acceder estado de conexión de la red del usuario directamente, que parece ser el mejores opciones

Answer 3

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

Pero por supuesto que no ayuda con otros navegadores o sistemas operativos. Predigo otros proveedores de navegadores decidirán establecer que la propiedad, así 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 parecido a la funcionalidad que desea.

actualización (2014/11/16)

principales navegadores soportan ahora esta propiedad, pero sus resultados pueden variar.

Presupuesto de Mozilla Documentation:

En Chrome y Safari, si el navegador no es capaz de conectarse a una red de área local (LAN) o un router, es 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 de 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 de false. Todas las demás condiciones devuelven un valor true.

Answer 4

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

Answer 5

Puede utilizar $.ajax() 's error de devolución de llamada, que dispara si la petición falla. Si textStatus es igual al "tiempo de espera" cadena probablemente significa que la conexión se rompe:

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

Desde el doc:

error: Una función que se llamará si la petición falla . La función se pasa tres argumentos: El objeto XMLHttpRequest, una cadena que describe el tipo de error que se produjo y un objeto excepción opcional, si se dio. Los posibles valores para el segundo argumento (además de nulo) son "timeout", "error", "notmodified" y "parsererror".Este es un evento 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 6

guión muy interesante que se reanude un montón de arriba:

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

Es muy útil, y porque es 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 7

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

Recientemente, WHATWG ha especificado la adición de los eventos online y offline, en caso de que necesite reaccionar en los cambios 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 8

Aquí hay un fragmento de una utilidad de ayuda que tengo. Este es el espacio de nombres javascript:

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

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

Answer 9

Mi camino.

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

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

Answer 11

tuviera que hacer una aplicación web (basado en Ajax) para un cliente que trabaja mucho con las escuelas, estas escuelas tienen a menudo 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(){ 
    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 12

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

esto es sólo para darle el concepto, debería mejorarse, verificar los códigos de estado http de retorno, etc.

Answer 13

Estaba buscando una solución del lado del cliente para detectar si Internet no funciona o si 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.

He encontrado 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 14

creo que es de forma muy sencilla.

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