Aktivieren von Offline-Funktionen in JavaScript

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 bei einer Unterbrechung ausgeführt werden.

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

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

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

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

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

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

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:

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

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 der Wert vom Status des Clients abhängt. Mit anderen Worten: Wenn ein Client /.info/connected als „falsch“ liest, ist das keine Garantie dafür, dass ein anderer Client auch „falsch“ liest.

Latenzzeit handhaben

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

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

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

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

Durch die Kombination von Verbindungsunterbrechungen mit der Überwachung des Verbindungsstatus und Server-Zeitstempeln können Sie ein System zur Nutzerpräsenz erstellen. In diesem System speichert jeder Nutzer Daten an einem Datenbankspeicherort, um anzugeben, ob ein Realtime Database-Client online ist oder nicht. 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:

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

// 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