Ich habe eine React-Komponente, die das Verfügbarkeitsflag der Internetverbindung enthält. UI-Elemente müssen dynamisch entsprechend dem Status in Echtzeit geändert werden. Außerdem verhalten sich Funktionen beim Flaggenwechsel anders.
Meine aktuelle Implementierung fragt die Remote-API mit Axios in jeder Sekunde anhand des Intervalls ab und aktualisiert den Status entsprechend. Ich suche nach einer detaillierteren und effizienteren Möglichkeit, diese Aufgabe zu erledigen, um den 1-Sekunden-Zustandsfehler bei minimalem Rechenaufwand zu beseitigen. Wird nur dann online betrachtet, wenn das Gerät über eine externe Internetverbindung verfügt
Aktuelle Implementierung:
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} />;
}
}
Bearbeitet:
Suchen Sie nach einer Lösung, mit der externe Internetverbindungen erkannt werden können. Das Gerät kann eine Verbindung zu einem LAN herstellen, das keine externe Verbindung hat. Es wird also als offline betrachtet. Betrachtet Online genau dann , wenn das Gerät Zugriff auf externe Internetressourcen hat.
quelle
Antworten:
Methode eins: Verwenden der Legacy-Browser-API -
Navigator.onLine
Gibt den Online-Status des Browsers zurück. Die Eigenschaft gibt einen booleschen Wert zurück, wobei true online und false offline bedeutet. Die Eigenschaft sendet Aktualisierungen, wenn sich die Fähigkeit des Browsers, eine Verbindung zum Netzwerk herzustellen, ändert. Die Aktualisierung erfolgt, wenn der Benutzer Links folgt oder wenn ein Skript eine Remote-Seite anfordert. Beispielsweise sollte die Eigenschaft false zurückgeben, wenn Benutzer kurz nach dem Verlust der Internetverbindung auf Links klicken.
Sie können es Ihrem Komponentenlebenszyklus hinzufügen:
Ich denke jedoch, dass dies nicht das ist, was Sie wollen, Sie wollten einen Echtzeit- Verbindungsprüfer.
Methode zwei: Überprüfen der Internetverbindung mithilfe dieser
Die einzige solide Bestätigung, die Sie erhalten können, wenn die externe Internetverbindung funktioniert, ist die Verwendung. Die Frage ist, welchen Server Sie anrufen sollten, um die Kosten zu minimieren.
Dafür gibt es im Internet viele Lösungen. Jeder Endpunkt, der mit einem schnellen 204-Status antwortet, ist perfekt, z.
IMO, wenn Sie diese React-App auf einem Server ausführen, ist es am sinnvollsten, auf Ihrem eigenen Server anzurufen. Sie können eine Anforderung zum Laden Ihrer Server aufrufen
/favicon.ico
, um die Verbindung zu überprüfen.Diese Idee (von Ihrem eigenen Server aufruft) wird von vielen Bibliotheken, wie implementiert
Offline
,is-reachable
und ist weit verbreitet in der Gemeinschaft verwendet. Sie können sie verwenden, wenn Sie nicht alles selbst schreiben möchten. (Ich persönlich mag das NPM-Paket,is-reachable
weil es einfach ist.)Beispiel:
Ich glaube, was Sie derzeit haben, ist bereits in Ordnung. Stellen Sie nur sicher, dass der richtige Endpunkt aufgerufen wird.
Ähnliche SO-Fragen:
quelle
Sie können https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event verwenden
und https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event, um zu überprüfen, wann Sie wieder online sind
quelle
Richten Sie einen benutzerdefinierten Hook ein
Richten Sie einen Hook mit den Online- und Offline-Ereignissen ein. Aktualisieren Sie dann einen Status und geben Sie ihn zurück. Auf diese Weise können Sie es mit einem Import überall in Ihrer App verwenden. Stellen Sie sicher, dass Sie mit der Rückgabefunktion aufräumen. Wenn Sie dies nicht tun, werden Sie jedes Mal mehr Ereignis-Listener hinzufügen, wenn eine Komponente die Hook-Mounts verwendet.
Um dies zu verwenden, importieren Sie einfach den obigen Hook und nennen Sie ihn so.
quelle
Sie können eine Komponente erstellen, die von allen Unterkomponenten gemeinsam genutzt werden soll
benutzt:
quelle