Daten im Web lesen und schreiben

(Optional) Prototypen erstellen und mit Firebase Local Emulator Suite testen

Bevor wir darauf eingehen, wie Ihre App Daten aus Realtime Databaseliest und in sie schreibt, stellen wir Ihnen eine Reihe von Tools vor, mit denen Sie die Funktionen von Realtime Database prototypisieren und testen können: Firebase Local Emulator Suite. Wenn Sie verschiedene Daten modelle ausprobieren, Ihre Sicherheitsregeln optimieren oder nach der kostengünstigsten Möglichkeit suchen, mit dem Back-End zu interagieren, kann es eine gute Idee sein, lokal zu arbeiten, ohne Live-Dienste bereitzustellen.

Ein Realtime Database Emulator ist Teil der Local Emulator Suite. Damit kann Ihre App mit dem emulierten Datenbankinhalt und der emulierten Konfiguration sowie optional mit den emulierten Projektressourcen (Funktionen, anderen Datenbanken und Sicherheitsregeln) interagieren.

Die Verwendung des Realtime Database Emulators umfasst nur wenige Schritte:

Fügen Sie der Testkonfiguration Ihrer App eine Codezeile hinzu, um eine Verbindung zum Emulator herzustellen.
Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses firebase emulators:start aus.
Rufen Sie aus dem Prototypcode Ihrer App wie gewohnt ein Realtime Database Plattform SDK oder die Realtime Database REST API auf.

Eine detaillierte Anleitung zur Verwendung von Realtime Database und Cloud Functions ist verfügbar. Lesen Sie auch die Local Emulator Suite Einführung.

Datenbankreferenz abrufen

Wenn Sie Daten aus der Datenbank lesen oder in sie schreiben möchten, benötigen Sie eine Instanz von firebase.database.Reference:

Web

import { getDatabase } from "firebase/database";

const database = getDatabase();rtdb_get_reference.js

Web

var database = firebase.database();index.js

Daten schreiben

In diesem Dokument werden die Grundlagen des Abrufens von Daten sowie das Sortieren und Filtern von Firebase-Daten behandelt.

Firebase-Daten werden abgerufen, indem ein asynchroner Listener an ein firebase.database.Reference angehängt wird. Der Listener wird einmal für den anfänglichen Status der Daten und dann bei jeder Änderung der Daten ausgelöst.

Grundlegende Schreibvorgänge

Für grundlegende Schreibvorgänge können Sie mit set() Daten in einer bestimmten Referenz speichern und alle vorhandenen Daten an diesem Pfad ersetzen. Eine Social- Blogging-Anwendung kann beispielsweise einen Nutzer mit set() so hinzufügen:

Web

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

function writeUserData(userId, name, email, imageUrl) {
  const db = getDatabase();
  set(ref(db, 'users/' + userId), {
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}rtdb_write_new_user.js

Web

function writeUserData(userId, name, email, imageUrl) {
  firebase.database().ref('users/' + userId).set({
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}read-and-write.js

Mit set() werden Daten am angegebenen Speicherort überschrieben, einschließlich aller untergeordneten Knoten.

Daten lesen

Auf Wert-Ereignisse warten

Wenn Sie Daten an einem Pfad lesen und auf Änderungen warten möchten, verwenden Sie onValue(), um Ereignisse zu beobachten. Mit diesem Ereignis können Sie statische Snapshots der Inhalte an einem bestimmten Pfad lesen, so wie sie zum Zeitpunkt des Ereignisses vorhanden waren. Diese Methode wird einmal ausgelöst, wenn der Listener angehängt wird, und dann jedes Mal, wenn sich die Daten ändern, einschließlich der untergeordneten Elemente. Der Ereignis-Callback erhält einen Snapshot mit allen Daten an diesem Speicherort, einschließlich der untergeordneten Daten. Wenn keine Daten vorhanden sind, gibt der Snapshot false zurück, wenn Sie exists() aufrufen, und null, wenn Sie val() aufrufen.

Im folgenden Beispiel ruft eine Social-Blogging-Anwendung die Anzahl der Sterne eines Beitrags aus der Datenbank ab:

Web

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

const db = getDatabase();
const starCountRef = ref(db, 'posts/' + postId + '/starCount');
onValue(starCountRef, (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});rtdb_social_listen_star_count.js

Web

var starCountRef = firebase.database().ref('posts/' + postId + '/starCount');
starCountRef.on('value', (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});read-and-write.js

Der Listener erhält einen snapshot, der die Daten am angegebenen Speicherort in der Datenbank zum Zeitpunkt des Ereignisses enthält. Sie können die Daten im snapshot mit der Methode val() abrufen.

Daten einmal lesen

Daten einmal mit get() lesen

Das SDK wurde entwickelt, um Interaktionen mit Datenbankservern zu verwalten, unabhängig davon, ob Ihre App online oder offline ist.

Im Allgemeinen sollten Sie die oben beschriebenen Techniken für Wert-Ereignisse verwenden, um Daten zu lesen und über Aktualisierungen der Daten vom Back-End benachrichtigt zu werden. Die Listener Techniken reduzieren die Nutzung und die Abrechnung und sind so optimiert, dass Ihre Nutzer die bestmögliche Erfahrung haben, wenn sie online und offline sind.

Wenn Sie die Daten nur einmal benötigen, können Sie mit get() einen Snapshot der Daten aus der Datenbank abrufen. Wenn get() aus irgendeinem Grund den Server wert nicht zurückgeben kann, prüft der Client den lokalen Speichercache und gibt einen Fehler zurück, wenn der wert immer noch nicht gefunden wird.

Die unnötige Verwendung von get() kann die Bandbreitennutzung erhöhen und zu Leistungseinbußen führen. Dies lässt sich vermeiden, indem Sie wie oben gezeigt einen Echtzeit-Listener verwenden.

Web

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

const dbRef = ref(getDatabase());
get(child(dbRef, `users/${userId}`)).then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});rtdb_read_once_get.js

Web

const dbRef = firebase.database().ref();
dbRef.child("users").child(userId).get().then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});read-and-write.js

Daten einmal mit einem Observer lesen

In einigen Fällen möchten Sie möglicherweise, dass der Wert aus dem lokalen Cache sofort zurückgegeben wird, anstatt auf einen aktualisierten Wert auf dem Server zu warten. In diesen Fällen können Sie mit once() die Daten sofort aus dem lokalen Festplattencache abrufen.

Dies ist nützlich für Daten, die nur einmal geladen werden müssen und sich voraussichtlich nicht häufig ändern oder keine aktive Überwachung erfordern. Die Blogging-App in den vorherigen Beispielen verwendet diese Methode beispielsweise, um das Profil eines Nutzers zu laden, wenn er einen neuen Beitrag verfasst:

Web

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

const db = getDatabase();
const auth = getAuth();

const userId = auth.currentUser.uid;
return onValue(ref(db, '/users/' + userId), (snapshot) => {
  const username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  // ...
}, {
  onlyOnce: true
});rtdb_social_single_value_read.js

Web

var userId = firebase.auth().currentUser.uid;
return firebase.database().ref('/users/' + userId).once('value').then((snapshot) => {
  var username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  // ...
});read-and-write.js

Daten aktualisieren oder löschen

Bestimmte Felder aktualisieren

Wenn Sie gleichzeitig in bestimmte untergeordnete Elemente eines Knotens schreiben möchten, ohne andere untergeordnete Knoten zu überschreiben, verwenden Sie die Methode update().

Wenn Sie update() aufrufen, können Sie untergeordnete Werte auf niedrigerer Ebene aktualisieren, indem Sie einen Pfad für den Schlüssel angeben. Wenn Daten an mehreren Speicherorten gespeichert sind, um besser zu skalieren , können Sie alle Instanzen dieser Daten mit Data Fan-Out aktualisieren.

Eine Social-Blogging-App kann beispielsweise einen Beitrag erstellen und ihn gleichzeitig mit Code wie diesem im Feed für die letzten Aktivitäten und im Aktivitätsfeed des Nutzers veröffentlichen:

Web

import { getDatabase, ref, child, push, update } from "firebase/database";

function writeNewPost(uid, username, picture, title, body) {
  const db = getDatabase();

  // A post entry.
  const postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  const newPostKey = push(child(ref(db), 'posts')).key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  const updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return update(ref(db), updates);
}rtdb_social_write_fan_out.js

Web

function writeNewPost(uid, username, picture, title, body) {
  // A post entry.
  var postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  var newPostKey = firebase.database().ref().child('posts').push().key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  var updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return firebase.database().ref().update(updates);
}read-and-write.js

In diesem Beispiel wird push() verwendet, um einen Beitrag im Knoten mit Beiträgen für alle Nutzer unter /posts/$postid zu erstellen und gleichzeitig den Schlüssel abzurufen. Der Schlüssel kann dann verwendet werden, um einen zweiten Eintrag in den Beiträgen des Nutzers unter /user-posts/$userid/$postid zu erstellen.

Mit diesen Pfaden können Sie mit einem einzigen Aufruf von update() gleichzeitige Aktualisierungen an mehreren Speicherorten in der JSON-Baum vornehmen. In diesem Beispiel wird der neue Beitrag an beiden Speicherorten erstellt. Gleichzeitige Aktualisierungen, die auf diese Weise vorgenommen werden , sind atomar: Entweder sind alle Aktualisierungen erfolgreich oder alle Aktualisierungen schlagen fehl.

Abschluss-Callback hinzufügen

Wenn Sie wissen möchten, wann Ihre Daten übernommen wurden, können Sie einen Abschluss-Callback hinzufügen. Sowohl set() als auch update() akzeptieren einen optionalen Abschluss Callback, der aufgerufen wird, wenn der Schreibvorgang in der Datenbank übernommen wurde. Wenn der Aufruf nicht erfolgreich war, wird dem Callback ein Fehlerobjekt übergeben, das angibt, warum der Fehler aufgetreten ist.

Web

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

const db = getDatabase();
set(ref(db, 'users/' + userId), {
  username: name,
  email: email,
  profile_picture : imageUrl
})
.then(() => {
  // Data saved successfully!
})
.catch((error) => {
  // The write failed...
});rtdb_social_completion_callback.js

Web

firebase.database().ref('users/' + userId).set({
  username: name,
  email: email,
  profile_picture : imageUrl
}, (error) => {
  if (error) {
    // The write failed...
  } else {
    // Data saved successfully!
  }
});read-and-write.js

Daten löschen

Die einfachste Möglichkeit, Daten zu löschen, besteht darin, remove() für eine Referenz auf den Speicherort dieser Daten aufzurufen.

Sie können auch löschen, indem Sie null als Wert für einen anderen Schreib vorgang wie set() oder update() angeben. Mit dieser Technik können Sie mit update() mehrere untergeordnete Elemente in einem einzigen API-Aufruf löschen.

`Promise` erhalten

Wenn Sie wissen möchten, wann Ihre Daten auf dem Firebase Realtime Database Server übernommen wurden, können Sie ein Promise verwenden. Sowohl set() als auch update() können ein Promise zurückgeben, mit dem Sie erfahren können, wann der Schreibvorgang in der Datenbank übernommen wurde.

Listener trennen

Callbacks werden entfernt, indem Sie die off() Methode für Ihre Firebase-Datenbankreferenz aufrufen.

Sie können einen einzelnen Listener entfernen, indem Sie ihn als Parameter an off() übergeben. Wenn Sie off() ohne Argumente für den Speicherort aufrufen, werden alle Listener an diesem Speicherort entfernt.

Wenn Sie off() für einen übergeordneten Listener aufrufen, werden Listener, die für die untergeordneten Knoten registriert sind, nicht automatisch entfernt. off() muss auch für alle untergeordneten Listener aufgerufen werden, um den Callback zu entfernen.

Daten als Transaktionen speichern

Wenn Sie mit Daten arbeiten, die durch gleichzeitige Änderungen beschädigt werden könnten, z. B. inkrementelle Zähler, können Sie einen Transaktionsvorgang verwenden. Sie können diesem Vorgang eine Aktualisierungsfunktion und einen optionalen Abschluss-Callback zuweisen. Die Aktualisierungsfunktion verwendet den aktuellen Status der Daten als Argument und gibt den neuen gewünschten Status zurück, den Sie schreiben möchten. Wenn ein anderer Client an den Speicherort schreibt, bevor Ihr neuer Wert erfolgreich geschrieben wurde, wird Ihre Aktualisierungsfunktion noch einmal mit dem neuen aktuellen Wert aufgerufen und der Schreibvorgang wird wiederholt.

In der Social-Blogging-App im Beispiel könnten Sie Nutzern beispielsweise erlauben, Beiträge mit Sternen zu bewerten und die Anzahl der Sterne eines Beitrags so zu verfolgen:

Web

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

function toggleStar(uid) {
  const db = getDatabase();
  const postRef = ref(db, '/posts/foo-bar-123');

  runTransaction(postRef, (post) => {
    if (post) {
      if (post.stars && post.stars[uid]) {
        post.starCount--;
        post.stars[uid] = null;
      } else {
        post.starCount++;
        if (!post.stars) {
          post.stars = {};
        }
        post.stars[uid] = true;
      }
    }
    return post;
  });
}rtdb_social_star_transaction.js

Web

function toggleStar(postRef, uid) {
  postRef.transaction((post) => {
    if (post) {
      if (post.stars && post.stars[uid]) {
        post.starCount--;
        post.stars[uid] = null;
      } else {
        post.starCount++;
        if (!post.stars) {
          post.stars = {};
        }
        post.stars[uid] = true;
      }
    }
    return post;
  });
}read-and-write.js

Durch die Verwendung einer Transaktion wird verhindert, dass die Anzahl der Sterne falsch ist, wenn mehrere Nutzer gleichzeitig denselben Beitrag mit Sternen bewerten oder der Client veraltete Daten hatte. Wenn die Transaktion abgelehnt wird, gibt der Server den aktuellen Wert an den Client zurück, der die Transaktion mit dem aktualisierten Wert noch einmal ausführt. Dieser Vorgang wird wiederholt, bis die Transaktion akzeptiert wird oder Sie die Transaktion abbrechen.

Atomare serverseitige Inkremente

Im obigen Anwendungsfall schreiben wir zwei Werte in die Datenbank: die ID des Nutzers, der den Beitrag mit Sternen bewertet oder die Bewertung entfernt, und die erhöhte Anzahl der Sterne. Wenn wir bereits wissen, dass der Nutzer den Beitrag mit Sternen bewertet, können wir anstelle einer Transaktion einen atomaren Inkrement vorgang verwenden.

Web

function addStar(uid, key) {
  import { getDatabase, increment, ref, update } from "firebase/database";
  const dbRef = ref(getDatabase());

  const updates = {};
  updates[`posts/${key}/stars/${uid}`] = true;
  updates[`posts/${key}/starCount`] = increment(1);
  updates[`user-posts/${key}/stars/${uid}`] = true;
  updates[`user-posts/${key}/starCount`] = increment(1);
  update(dbRef, updates);
}rtdb_social_star_increment.js

Web

function addStar(uid, key) {
  const updates = {};
  updates[`posts/${key}/stars/${uid}`] = true;
  updates[`posts/${key}/starCount`] = firebase.database.ServerValue.increment(1);
  updates[`user-posts/${key}/stars/${uid}`] = true;
  updates[`user-posts/${key}/starCount`] = firebase.database.ServerValue.increment(1);
  firebase.database().ref().update(updates);
}read-and-write.js

Dieser Code verwendet keinen Transaktionsvorgang. Er wird also nicht automatisch noch einmal ausgeführt, wenn es eine widersprüchliche Aktualisierung gibt. Da der Inkrementvorgang jedoch direkt auf dem Datenbankserver erfolgt, besteht keine Gefahr eines Konflikts.

Wenn Sie anwendungsspezifische Konflikte erkennen und ablehnen möchten, z. B. wenn ein Nutzer einen Beitrag mit Sternen bewertet, den er bereits zuvor mit Sternen bewertet hat, sollten Sie benutzerdefinierte Sicherheitsregeln für diesen Anwendungsfall schreiben.

Offline mit Daten arbeiten

Wenn ein Client die Netzwerkverbindung verliert, funktioniert Ihre App weiterhin ordnungsgemäß.

Jeder Client, der mit einer Firebase-Datenbank verbunden ist, verwaltet eine eigene interne Version aller aktiven Daten. Wenn Daten geschrieben werden, werden sie zuerst in diese lokale Version geschrieben. Der Firebase-Client synchronisiert diese Daten dann nach dem Best-Effort-Prinzip mit den Remote-Datenbank servern und anderen Clients.

Daher lösen alle Schreibvorgänge in die Datenbank sofort lokale Ereignisse aus, bevor Daten auf den Server geschrieben werden. Das bedeutet, dass Ihre App unabhängig von Netzwerklatenz oder Konnektivität reaktionsschnell bleibt.

Sobald die Verbindung wiederhergestellt ist, erhält Ihre App die entsprechenden Ereignisse, sodass der Client mit dem aktuellen Serverstatus synchronisiert wird, ohne dass Sie benutzerdefinierten Code schreiben müssen.

Weitere Informationen zum Offlineverhalten finden Sie unter Online- und Offlinefunktionen.