Aktivieren von Offline-Funktionen in JavaScript

Firebase-Anwendungen funktionieren auch dann, wenn die Netzwerkverbindung Ihrer App vorübergehend unterbrochen wird. Wir bieten mehrere Tools zum Überwachen der Anwesenheit und zum Synchronisieren des lokalen Status mit dem Serverstatus an, die in diesem Dokument vorgestellt werden.

Anwesenheit verwalten

Bei Echtzeitanwendungen ist es oft nützlich zu erkennen, wann Clients eine Verbindung herstellen und trennen. So können Sie beispielsweise einen Nutzer als „offline“ markieren, wenn die Verbindung seines Clients getrennt wird.

Firebase Database-Clients bieten einfache Primitive, mit denen Sie in die Datenbank schreiben können, wenn ein Client die Verbindung zu den Firebase Database-Servern trennt. Diese Aktualisierungen erfolgen unabhängig davon, ob die Clientverbindung sauber getrennt wird oder nicht. Sie können also darauf vertrauen, dass Daten auch dann bereinigt werden, wenn eine Verbindung getrennt wird oder ein Client abstürzt. Alle Schreibvorgänge, einschließlich Festlegen, Aktualisieren und Entfernen, können nach dem Trennen der Verbindung ausgeführt werden.

Hier ein einfaches Beispiel für das Schreiben von Daten nach der Verbindungsunterbrechung mithilfe der onDisconnect-Primitivstruktur:

Web

import { getDatabase, ref, onDisconnect } from "firebase/database";

const db = getDatabase();
const presenceRef = ref(db, "disconnectmessage");
// Write a string when this client loses connection
onDisconnect(presenceRef).set("I disconnected!");
rtdb_ondisconnect_simple.js

Web

var presenceRef = firebase.database().ref("disconnectmessage");
// Write a string when this client loses connection
presenceRef.onDisconnect().set("I disconnected!");
offline.js

Funktionsweise von onDisconnect

Wenn Sie einen onDisconnect()-Vorgang einrichten, befindet sich der Vorgang auf dem Firebase Realtime Database-Server. Der Server prüft die Sicherheit, um sicherzustellen, dass der Nutzer das angeforderte Schreibereignis ausführen kann, und informiert Ihre App, wenn es ungültig ist. Der Server überwacht dann die Verbindung. Wenn die Verbindung irgendwann ein Zeitlimit erreicht oder vom Realtime Database-Client aktiv geschlossen wird, prüft der Server die Sicherheit noch einmal, um sicherzustellen, dass der Vorgang noch gültig ist, und ruft dann das Ereignis auf.

Ihre App kann den Callback für den Schreibvorgang verwenden, um sicherzustellen, dass onDisconnect richtig angehängt wurde:

Web

onDisconnect(presenceRef).remove().catch((err) => {
  if (err) {
    console.error("could not establish onDisconnect event", err);
  }
});
rtdb_ondisconnect_callback.js

Web

presenceRef.onDisconnect().remove((err) => {
  if (err) {
    console.error("could not establish onDisconnect event", err);
  }
});
offline.js

Ein onDisconnect-Termin kann auch durch den Aufruf von .cancel() abgesagt werden:

Web

const onDisconnectRef = onDisconnect(presenceRef);
onDisconnectRef.set("I disconnected");
// some time later when we change our minds
onDisconnectRef.cancel();
rtdb_ondisconnect_cancel.js

Web

var onDisconnectRef = presenceRef.onDisconnect();
onDisconnectRef.set("I disconnected");
// some time later when we change our minds
onDisconnectRef.cancel();
offline.js

Verbindungsstatus erkennen

Bei vielen Präsenzfunktionen ist es hilfreich, wenn Ihre App weiß, ob sie online oder offline ist. Firebase Realtime Database stellt einen speziellen Speicherort unter /.info/connected bereit, der jedes Mal aktualisiert wird, wenn sich der Verbindungsstatus des Firebase Realtime Database-Clients ändert. Hier ein Beispiel:

Web

import { getDatabase, ref, onValue } from "firebase/database";

const db = getDatabase();
const connectedRef = ref(db, ".info/connected");
onValue(connectedRef, (snap) => {
  if (snap.val() === true) {
    console.log("connected");
  } else {
    console.log("not connected");
  }
});
rtdb_detect_connection_state.js

Web

var connectedRef = firebase.database().ref(".info/connected");
connectedRef.on("value", (snap) => {
  if (snap.val() === true) {
    console.log("connected");
  } else {
    console.log("not connected");
  }
});
offline.js

/.info/connected ist ein boolescher Wert, der nicht zwischen Realtime Database-Clients synchronisiert wird, da er vom Status des Clients abhängt. Mit anderen Worten: Wenn ein Client /.info/connected als „false“ liest, ist dies keine Garantie dafür, dass ein separater Client ebenfalls „false“ liest.

Latenz handhaben

Server-Zeitstempel

Die Firebase Realtime Database-Server bieten einen Mechanismus, mit dem auf dem Server generierte Zeitstempel als Daten eingefügt werden können. Diese Funktion in Kombination mit onDisconnect bietet eine einfache Möglichkeit, die Zeit zu erfassen, zu der eine Verbindung zu einem Realtime Database-Client getrennt wurde:

Web

import { getDatabase, ref, onDisconnect, serverTimestamp } from "firebase/database";

const db = getDatabase();
const userLastOnlineRef = ref(db, "users/joe/lastOnline");
onDisconnect(userLastOnlineRef).set(serverTimestamp());
rtdb_set_server_timestamp.js

Web

var userLastOnlineRef = firebase.database().ref("users/joe/lastOnline");
userLastOnlineRef.onDisconnect().set(firebase.database.ServerValue.TIMESTAMP);
offline.js

Zeitabweichung

firebase.database.ServerValue.TIMESTAMP ist zwar viel genauer und für die meisten Lese-/Schreibvorgänge vorzuziehen, gelegentlich kann es jedoch nützlich sein, die Zeitabweichung des Clients im Vergleich zu den Firebase Realtime Database-Servern zu schätzen. Sie können dem Standort /.info/serverTimeOffset einen Rückruf zuordnen, um den Wert in Millisekunden zu erhalten, den Firebase Realtime Database-Clients zur lokal gemeldeten Zeit (Epochenzeit in Millisekunden) hinzufügen, um die Serverzeit zu schätzen. Die Genauigkeit dieses Offset kann durch die Netzwerklatenz beeinträchtigt werden. Daher ist er hauptsächlich zum Erkennen großer Abweichungen (> 1 Sekunde) bei der Uhrzeit nützlich.

Web

import { getDatabase, ref, onValue } from "firebase/database";

const db = getDatabase();
const offsetRef = ref(db, ".info/serverTimeOffset");
onValue(offsetRef, (snap) => {
  const offset = snap.val();
  const estimatedServerTimeMs = new Date().getTime() + offset;
});
rtdb_estimate_clock_skew.js

Web

var offsetRef = firebase.database().ref(".info/serverTimeOffset");
offsetRef.on("value", (snap) => {
  var offset = snap.val();
  var estimatedServerTimeMs = new Date().getTime() + offset;
});
offline.js

Beispiel-App für Anwesenheit

Wenn Sie Vorgänge zum Trennen von Verbindungen mit der Überwachung des Verbindungsstatus und Serverzeitstempeln kombinieren, können Sie ein System zur Nutzerpräsenz aufbauen. Bei diesem System speichert jeder Nutzer Daten an einem Datenbankstandort, um anzugeben, ob ein Realtime Database-Client online ist. Clients setzen diesen Standort auf „True“, wenn sie online gehen, und einen Zeitstempel, wenn die Verbindung getrennt wird. Dieser Zeitstempel gibt an, wann der betreffende Nutzer zuletzt online war.

Die App sollte die Verbindungsauflösungen in die Warteschlange stellen, bevor ein Nutzer als online markiert wird, um Race-Bedingungen zu vermeiden, falls die Netzwerkverbindung des Clients unterbrochen wird, bevor beide Befehle an den Server gesendet werden können.

Hier ist ein einfaches System zur Nutzerpräsenz:

Web

import { getDatabase, ref, onValue, push, onDisconnect, set, serverTimestamp } from "firebase/database";

// Since I can connect from multiple devices or browser tabs, we store each connection instance separately
// any time that connectionsRef's value is null (i.e. has no children) I am offline
const db = getDatabase();
const myConnectionsRef = ref(db, 'users/joe/connections');

// stores the timestamp of my last disconnect (the last time I was seen online)
const lastOnlineRef = ref(db, 'users/joe/lastOnline');

const connectedRef = ref(db, '.info/connected');
onValue(connectedRef, (snap) => {
  if (snap.val() === true) {
    // We're connected (or reconnected)! Do anything here that should happen only if online (or on reconnect)
    const con = push(myConnectionsRef);

    // When I disconnect, remove this device
    onDisconnect(con).remove();

    // Add this device to my connections list
    // this value could contain info about the device or a timestamp too
    set(con, true);

    // When I disconnect, update the last time I was seen online
    onDisconnect(lastOnlineRef).set(serverTimestamp());
  }
});
rtdb_sample_presence_app.js

Web

// Since I can connect from multiple devices or browser tabs, we store each connection instance separately
// any time that connectionsRef's value is null (i.e. has no children) I am offline
var myConnectionsRef = firebase.database().ref('users/joe/connections');

// stores the timestamp of my last disconnect (the last time I was seen online)
var lastOnlineRef = firebase.database().ref('users/joe/lastOnline');

var connectedRef = firebase.database().ref('.info/connected');
connectedRef.on('value', (snap) => {
  if (snap.val() === true) {
    // We're connected (or reconnected)! Do anything here that should happen only if online (or on reconnect)
    var con = myConnectionsRef.push();

    // When I disconnect, remove this device
    con.onDisconnect().remove();

    // Add this device to my connections list
    // this value could contain info about the device or a timestamp too
    con.set(true);

    // When I disconnect, update the last time I was seen online
    lastOnlineRef.onDisconnect().set(firebase.database.ServerValue.TIMESTAMP);
  }
});
offline.js