Catch up on everthing we announced at this year's Firebase Summit. Learn more

Lire et écrire des données sur le Web

(Facultatif) Prototyper et tester avec Firebase Local Emulator Suite

Avant de parler de la façon dont votre application lit et écrit dans la base de données en temps réel, présentons un ensemble d'outils que vous pouvez utiliser pour prototyper et tester la fonctionnalité de la base de données en temps réel : Firebase Local Emulator Suite. Si vous essayez différents modèles de données, optimisez vos règles de sécurité ou cherchez le moyen le plus rentable d'interagir avec le back-end, pouvoir travailler localement sans déployer de services en direct peut être une excellente idée.

Un émulateur de base de données en temps réel fait partie de la suite d'émulateurs locaux, qui permet à votre application d'interagir avec le contenu et la configuration de votre base de données émulée, ainsi qu'éventuellement avec vos ressources de projet émulées (fonctions, autres bases de données et règles de sécurité).

L'utilisation de l'émulateur Realtime Database ne nécessite que quelques étapes :

  1. Ajout d'une ligne de code à la configuration de test de votre application pour vous connecter à l'émulateur.
  2. A partir de la racine de votre répertoire local du projet, en cours d' exécution firebase emulators:start .
  3. Passer des appels à partir du code prototype de votre application à l'aide d'un SDK de plate-forme Realtime Database comme d'habitude, ou à l'aide de l'API REST Realtime Database.

Une détaillée visite virtuelle en temps réel impliquant la base de données et les fonctions de Cloud est disponible. Vous devriez aussi jeter un oeil à l' adoption Emulator locale Suite .

Obtenir une référence de base de données

Pour lire ou données d'écriture à partir de la base de données, vous avez besoin d' une instance de firebase.database.Reference :

Web version 9

import { getDatabase } from "firebase/database";

const database = getDatabase();

Web version 8

var database = firebase.database();

Écrire des données

Ce document couvre les bases de la récupération de données et comment trier et filtrer les données Firebase.

Firebase données est récupéré par la fixation d' un écouteur asynchrone à un firebase.database.Reference . L'écouteur est déclenché une fois pour l'état initial des données et à nouveau chaque fois que les données changent.

Opérations d'écriture de base

Pour les opérations d'écriture de base, vous pouvez utiliser set() pour enregistrer les données à une référence spécifiée, de remplacer toutes les données existantes sur ce chemin. Par exemple , une application blogging sociale peut ajouter un utilisateur avec set() comme suit:

Web version 9

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
  });
}

Web version 8

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

En utilisant set() écrasera les données à l'emplacement spécifié, y compris les nœuds enfants.

Lire les données

Écoutez les événements de valeur

Pour lire les données sur un chemin et écouter les modifications, utilisez la on() ou once() méthodes de firebase.database.Reference d'observer les événements.

Événement Utilisation typique
value Lisez et écoutez les modifications apportées à l'ensemble du contenu d'un chemin.

Vous pouvez utiliser la value événement pour lire un instantané statique du contenu à un chemin donné, telles qu'elles existaient au moment de l'événement. Cette méthode est déclenchée une fois lorsque l'écouteur est attaché et à nouveau chaque fois que les données, y compris les enfants, changent. Le rappel d'événement reçoit un instantané contenant toutes les données à cet emplacement, y compris les données enfants. S'il n'y a pas de données, l'instantané retourne false lorsque vous appelez exists() et null lorsque vous appelez val() sur elle.

L'exemple suivant illustre une application de blogs sociaux récupérant le nombre d'étoiles d'une publication à partir de la base de données :

Web version 9

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);
});

Web version 8

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

L'auditeur reçoit un snapshot qui contient les données à l'emplacement spécifié dans la base de données au moment de l'événement. Vous pouvez récupérer les données dans l' snapshot avec le val() méthode.

Lire les données une fois

Lire les données une fois avec get()

Le SDK est conçu pour gérer les interactions avec les serveurs de base de données, que votre application soit en ligne ou hors ligne.

En règle générale, vous devez utiliser les techniques d'événement de valeur décrites ci-dessus pour lire les données afin d'être informé des mises à jour des données à partir du backend. Les techniques d'écoute réduisent votre utilisation et votre facturation, et sont optimisées pour offrir à vos utilisateurs la meilleure expérience lorsqu'ils sont en ligne et hors ligne.

Si vous avez besoin des données qu'une seule fois, vous pouvez utiliser get() pour obtenir un aperçu des données de la base de données. Si pour une raison quelconque get() est incapable de retourner la valeur du serveur, le client sonde le cache de stockage local et renvoie une erreur si la valeur est toujours introuvable.

L' utilisation inutile de get() peut augmenter l' utilisation de la bande passante et entraîner une perte de performance, qui peut être évité en utilisant un écouteur en temps réel , comme indiqué ci - dessus.

Web version 9

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);
});

Web version 8

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);
});

Lire les données une fois avec un observateur

Dans certains cas, vous souhaiterez peut-être que la valeur du cache local soit renvoyée immédiatement, au lieu de rechercher une valeur mise à jour sur le serveur. Dans ces cas , vous pouvez utiliser once() pour obtenir immédiatement les données du cache du disque local.

Ceci est utile pour les données qui ne doivent être chargées qu'une seule fois et qui ne devraient pas changer fréquemment ou nécessiter une écoute active. Par exemple, l'application de blog des exemples précédents utilise cette méthode pour charger le profil d'un utilisateur lorsqu'il commence à rédiger un nouveau message :

Web version 9

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
});

Web version 8

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

Mettre à jour ou supprimer des données

Mettre à jour des champs spécifiques

Pour écrire simultanément aux enfants spécifiques d'un noeud sans écraser les autres nœuds enfants, utilisez la update() à update() méthode.

Lors de l' appel update() à update() , vous pouvez mettre à jour les valeurs des enfants de niveau inférieur en spécifiant un chemin pour la clé. Si les données sont stockées dans plusieurs endroits à l' échelle mieux, vous pouvez mettre à jour toutes les instances de ces données à l' aide de données sortance .

Par exemple, une application de blogs sociaux peut créer une publication et la mettre à jour simultanément avec le flux d'activité récent et le flux d'activité de l'utilisateur publiant en utilisant un code comme celui-ci :

Web version 9

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);
}

Web version 8

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);
}

Cet exemple utilise push() pour créer un poste dans le nœud contenant les messages pour tous les utilisateurs à /posts/$postid et récupérer simultanément sur la touche. La clé peut être utilisée pour créer une deuxième entrée dans les messages de l'utilisateur à /user-posts/$userid/$postid .

L' utilisation de ces chemins, vous pouvez effectuer des mises à jour simultanées à plusieurs endroits dans l'arborescence JSON avec un seul appel à la update() à update() , comme la façon dont cet exemple crée le nouveau poste dans les deux endroits. Les mises à jour simultanées effectuées de cette manière sont atomiques : soit toutes les mises à jour réussissent, soit toutes les mises à jour échouent.

Ajouter un rappel d'achèvement

Si vous voulez savoir quand vos données ont été validées, vous pouvez ajouter un rappel d'achèvement. Les deux set() et update() à update() prennent un rappel d'achèvement en option qui est appelée lorsque l'écriture a été commise à la base de données. Si l'appel a échoué, le rappel reçoit un objet d'erreur indiquant pourquoi l'échec s'est produit.

Web version 9

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...
});

Web version 8

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

Suprimmer les données

La façon la plus simple de suppression de données est d'appeler remove() sur une référence à l'emplacement de ces données.

Vous pouvez également supprimer en spécifiant null comme valeur pour une autre opération d'écriture tels que set() ou update() à update() . Vous pouvez utiliser cette technique avec la update() à update() pour supprimer plusieurs enfants dans un seul appel API.

Recevoir une Promise

Pour savoir quand vos données en temps réel engagé à Firebase serveur de base de données, vous pouvez utiliser une Promise . Les deux set() et update() à Promise update() peut retourner une Promise que vous pouvez utiliser pour savoir quand l'écriture est à la base de données engage.

Détacher les auditeurs

Callbacks sont retirés en appelant le off() méthode sur la référence de votre base de données Firebase.

Vous pouvez supprimer un seul auditeur en le faisant passer comme paramètre à off() . Appel au off() sur l'emplacement sans argument supprime tous les auditeurs à cet endroit.

Appel au off() sur un écouteur parent ne supprime pas automatiquement les écouteurs enregistrés sur ses nœuds enfants; off() doit également être appelé écouteurs d'enfant pour enlever le rappel.

Enregistrer les données en tant que transactions

Lorsque vous travaillez avec des données qui pourraient être corrompues par des modifications simultanées telles que les compteurs supplémentaires, vous pouvez utiliser une opération de transaction . Vous pouvez donner à cette opération une fonction de mise à jour et un rappel d'achèvement facultatif. La fonction de mise à jour prend l'état actuel des données comme argument et renvoie le nouvel état souhaité que vous souhaitez écrire. Si un autre client écrit à l'emplacement avant que votre nouvelle valeur ne soit écrite avec succès, votre fonction de mise à jour est appelée à nouveau avec la nouvelle valeur actuelle et l'écriture est retentée.

Par exemple, dans l'exemple d'application de blogs sociaux, vous pouvez autoriser les utilisateurs à afficher et à supprimer des articles et à suivre le nombre d'étoiles qu'un article a reçues comme suit :

Web version 9

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;
  });
}

Web version 8

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;
  });
}

L'utilisation d'une transaction empêche le nombre d'étoiles d'être incorrect si plusieurs utilisateurs affichent le même message en même temps ou si le client avait des données périmées. Si la transaction est rejetée, le serveur renvoie la valeur actuelle au client, qui exécute à nouveau la transaction avec la valeur mise à jour. Cela se répète jusqu'à ce que la transaction soit acceptée ou que vous abandonniez la transaction.

Incréments atomiques côté serveur

Dans le cas d'utilisation ci-dessus, nous écrivons deux valeurs dans la base de données : l'ID de l'utilisateur qui affiche/annule la publication et le nombre d'étoiles incrémenté. Si nous savons déjà que l'utilisateur est la vedette de la publication, nous pouvons utiliser une opération d'incrémentation atomique au lieu d'une transaction.

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);
}

Ce code n'utilise pas d'opération de transaction, il n'est donc pas automatiquement réexécuté en cas de mise à jour conflictuelle. Cependant, étant donné que l'opération d'incrémentation se produit directement sur le serveur de base de données, il n'y a aucun risque de conflit.

Si vous souhaitez détecter et rejeter les conflits spécifiques à une application, tels qu'un utilisateur mettant en vedette une publication qu'il a déjà publiée auparavant, vous devez écrire des règles de sécurité personnalisées pour ce cas d'utilisation.

Travailler avec des données hors ligne

Si un client perd sa connexion réseau, votre application continuera à fonctionner correctement.

Chaque client connecté à une base de données Firebase conserve sa propre version interne de toutes les données actives. Lorsque les données sont écrites, elles sont d'abord écrites dans cette version locale. Le client Firebase synchronise ensuite ces données avec les serveurs de base de données distants et avec d'autres clients au mieux.

Par conséquent, toutes les écritures dans la base de données déclenchent des événements locaux immédiatement, avant que des données ne soient écrites sur le serveur. Cela signifie que votre application reste réactive quelle que soit la latence ou la connectivité du réseau.

Une fois la connectivité rétablie, votre application reçoit l'ensemble d'événements approprié afin que le client se synchronise avec l'état actuel du serveur, sans avoir à écrire de code personnalisé.

Nous allons parler plus sur le comportement en ligne En savoir plus sur les capacités en ligne et hors ligne ..

Prochaines étapes