Como Detectar Si El Usuario Está en Línea con JavaScript

4 minuto(s)

En esta página:

Demo Github

Si desarrollas con JavaScript, en algún momento puede que desees mejorar tu aplicación para notificar a los usuarios que se encuentran sin conexión a Internet. Por ejemplo cuando los usuarios visiten tu sitio web por defecto podran ver el contenido que tienen abierto en su navegador, pero al intentar navegar a otro lugar, no les cargará el contenido, allí es un buen momento para mostrarle una notificación de que no esta conectado a Internet. En este Post te enseñare a Como Detectar Si El Usuario Está en Línea con JavaScript, vamos con ello.

Antes de continuar te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Invierte Tu Dinero En Lo Que Te Haga Crecer” y “La Inteligencia Artificial (IA) y el Machine Learning (ML) Siempre Trabajan de la Mano” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Como Detectar Si El Usuario Está en Línea con JavaScript.

HTML

Agrego un div con el id estado y algunas clases de Bootstrap 5 (Alerts), tu puedes ponerle el nombre de id que desees, asimismo agrego un texto por defecto que diga al usuario que esta conectado a Internet:


<div id="estado" class="alert alert-success" role="alert">
    Estas Conectado a Internet ! 
</div>

Estas Conectado a Internet !

</div>

Ya que usamos clases de Bootstrap 5, no necesito escribir código CSS, si tu deseas, puedes escribir tu propio código CSS para darle estilos a la notificación.

JavaScript

Creo una variable llamada verificarconexion y dentro de ella selecciono el id estado del div que habia seleccionado anteriormente en el código HTML. Luego hago uso de navigator.onLine de JavaScript para verificar si el navegador está conectado a Internet, si es así le asignamos la clase de bootstrap alert-success, en caso contrario le asignamos la clase de bootstrap alert-danger.

Al final del código, para detectar la conexión a Internet en tiempo real, hago uso de window.addEventListener():


var verificarconexion = function() {
    var estado = document.getElementById('estado');

    if ( navigator.onLine && estado.classList.contains('alert-danger') ) {
        estado.innerHTML = 'Estas Conectado a Internet !';
        estado.classList.remove('alert-danger');
        estado.classList.add('alert-success');
    }
    if ( ! navigator.onLine && estado.classList.contains('alert-success') ) {
        estado.innerHTML = 'Estas Desconectado de Internet !';
        estado.classList.remove('alert-success');
        estado.classList.add('alert-danger'); 
    }
};

window.addEventListener('online', verificarconexion);
window.addEventListener('offline', verificarconexion);

var verificarconexion = function() {

var estado = document.getElementById('estado');

if ( navigator.onLine && estado.classList.contains('alert-danger') ) {

estado.innerHTML = 'Estas Conectado a Internet !';

estado.classList.remove('alert-danger');

estado.classList.add('alert-success');

}

if ( ! navigator.onLine && estado.classList.contains('alert-success') ) {

estado.innerHTML = 'Estas Desconectado de Internet !';

estado.classList.remove('alert-success');

estado.classList.add('alert-danger');

}

};

window.addEventListener('online', verificarconexion);

window.addEventListener('offline', verificarconexion);

Si vamos al navegador y estamos conectados a Internet, podemos ver el mensaje Estas Conectado a Internet !:

Y si nos desconectamos de Internet, veremos el mensaje: Estas Desconectado de Internet !:

Al inicio de este Post, puedes encontrar una Demo para ver el proyeto en acción y un enlace al código alojado en un respositorio de GitHub.

Conclusión

En este tutorial hemos aprendido a como verificar si un usuario se encuentra conectado a Internete, espero te sirva mucho y lo puedas utilizar en tus proyectos.