J'ai un composant React, qui inclut l'indicateur de disponibilité de la connectivité Internet. Les éléments de l'interface utilisateur doivent être modifiés dynamiquement en fonction de l'état en temps réel. De plus, les fonctions se comportent différemment avec le changement de drapeau.
Mon implémentation actuelle interroge l'API distante en utilisant Axios à chaque seconde en utilisant l'intervalle et met à jour l'état en conséquence. Je recherche un moyen plus granulaire et plus efficace de faire cette tâche pour supprimer l'erreur d'état de 1 seconde avec le coût de calcul minimum. Considéré en ligne si et seulement si l' appareil dispose d'une connexion Internet externe
Implémentation actuelle:
class Container extends Component {
constructor(props) {
super(props)
this.state = {
isOnline: false
};
this.webAPI = new WebAPI(); //Axios wrapper
}
componentDidMount() {
setInterval(() => {
this.webAPI.poll(success => this.setState({ isOnline: success });
}, 1000);
}
render() {
return <ChildComponent isOnline={this.state.isOnline} />;
}
}
Édité:
Vous recherchez une solution capable de détecter la connectivité Internet externe. L'appareil peut se connecter à un LAN qui n'a pas de connexion externe. Donc, il est considéré comme hors ligne. Considère en ligne si et seulement si l' appareil a accès à des ressources Internet externes.
la source
Réponses:
Méthode 1: Utilisation de l'API de navigateur héritée -
Navigator.onLine
Renvoie l'état en ligne du navigateur. La propriété renvoie une valeur booléenne, avec une vraie signification en ligne et une fausse signification hors ligne. La propriété envoie des mises à jour chaque fois que la capacité du navigateur à se connecter au réseau change. La mise à jour se produit lorsque l'utilisateur suit des liens ou lorsqu'un script demande une page distante. Par exemple, la propriété doit retourner false lorsque les utilisateurs cliquent sur des liens peu de temps après avoir perdu leur connexion Internet.
Vous pouvez l'ajouter à votre cycle de vie des composants:
Cependant, je pense que ce n'est pas ce que vous voulez, vous vouliez un validateur de connexion en temps réel .
Méthode 2: vérification de la connexion Internet en l'utilisant
La seule confirmation solide que vous pouvez obtenir si la connectivité Internet externe fonctionne est en l'utilisant. La question est quel serveur vous devez appeler pour minimiser le coût?
Il existe de nombreuses solutions sur Internet pour cela, tout point final qui répond avec un statut 204 rapide est parfait, par exemple:
IMO, si vous exécutez cette application React sur un serveur, il est plus judicieux d'appeler sur votre propre serveur, vous pouvez appeler une demande de chargement
/favicon.ico
pour vérifier la connexion.Cette idée (d'appeler votre propre serveur) a été mis en œuvre par de nombreuses bibliothèques, telles que
Offline
,is-reachable
et est largement utilisé dans la communauté. Vous pouvez les utiliser si vous ne voulez pas tout écrire par vous-même. (Personnellement, j'aime le package NPMis-reachable
pour être simple.)Exemple:
Je crois que ce que vous avez actuellement est déjà bien, assurez-vous simplement qu'il appelle le bon point de terminaison.
Questions SO similaires:
la source
Vous pouvez utiliser https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event
et https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event pour vérifier quand vous êtes de retour en ligne
la source
Configurer un crochet personnalisé
Configurez un crochet avec les événements en ligne et hors ligne. puis mettez à jour un état et renvoyez-le. De cette façon, vous pouvez l'utiliser n'importe où dans votre application avec une importation. Assurez-vous de nettoyer avec la fonction de retour. Si vous ne le faites pas, vous ajouterez de plus en plus d'écouteurs d'événements à chaque fois qu'un composant utilise les crochets.
Pour l'utiliser, importez simplement le crochet ci-dessus et appelez-le comme ceci.
la source
Vous pouvez créer un composant à partager entre tous les sous-composants
utilisé:
la source