Método uno: Uso de la API de navegador heredada - Navigator.onLine
Devuelve el estado en línea del navegador. La propiedad devuelve un valor booleano, con verdadero significado en línea y falso significado sin conexión. La propiedad envía actualizaciones cada vez que cambia la capacidad del navegador para conectarse a la red. La actualización se produce cuando el usuario sigue enlaces o cuando un script solicita una página remota. Por ejemplo, la propiedad debería devolver false cuando los usuarios hacen clic en los enlaces poco después de perder la conexión a Internet.
Puede agregarlo al ciclo de vida de su componente:
Juega con el siguiente código utilizando las herramientas de desarrollo de Chrome: cambia "En línea" a "Fuera de línea" en la pestaña Red.
class App extends React.PureComponent {
state = { online: window.navigator.onLine }
componentDidMount() {
window.addEventListener('offline', this.handleNetworkChange);
window.addEventListener('online', this.handleNetworkChange);
}
componentWillUnmount() {
window.removeEventListener('offline', this.handleNetworkChange);
window.removeEventListener('online', this.handleNetworkChange);
}
handleNetworkChange = () => {
this.setState({ online: window.navigator.onLine });
}
render() {
return (
<div>
{ this.state.online ? 'you\'re online' : 'you\'re offline' }
</div>
);
}
}
ReactDOM.render(
<App />
, document.querySelector('#app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Sin embargo, creo que esto no es lo que quieres, querías un validador de conexión en tiempo real .
Método dos: verificar la conexión a Internet usándolo
La única confirmación sólida que puede obtener si la conectividad a Internet externa funciona es usándola. La pregunta es a qué servidor debe llamar para minimizar el costo.
Hay muchas soluciones en Internet para esto, cualquier punto final que responda con un estado 204 rápido es perfecto, por ejemplo:
- llamando al servidor de Google (por ser el más probado en batalla (?))
- llamando a su punto final de script JQuery en caché (por lo que incluso si el servidor está inactivo, aún debería poder obtener el script siempre que tenga una conexión)
- intente buscar una imagen de un servidor estable (por ejemplo: https://ssl.gstatic.com/gb/images/v1_76783e20.png + fecha y hora para evitar el almacenamiento en caché)
OMI, si está ejecutando esta aplicación React en un servidor, tiene más sentido llamar a su propio servidor, puede llamar a una solicitud para cargar su /favicon.ico
para verificar la conexión.
Esta idea (de llamar a su propio servidor) ha sido implementado por muchas bibliotecas, tales como Offline
, is-reachable
y es ampliamente utilizado en toda la comunidad. Puedes usarlos si no quieres escribir todo por ti mismo. (Personalmente, me gusta el paquete NPM is-reachable
por ser simple).
Ejemplo:
import React from 'react';
import isReachable from 'is-reachable';
const URL = 'google.com:443';
const EVERY_SECOND = 1000;
export default class App extends React.PureComponent {
_isMounted = true;
state = { online: false }
componentDidMount() {
setInterval(async () => {
const online = await isReachable(URL);
if (this._isMounted) {
this.setState({ online });
}
}, EVERY_SECOND);
}
componentWillUnmount() {
this._isMounted = false;
}
render() {
return (
<div>
{ this.state.online ? 'you\'re online' : 'you\'re offline' }
</div>
);
}
}
Creo que lo que tiene actualmente ya está bien, solo asegúrese de que esté llamando al punto final correcto.
Preguntas SO similares: