在 Web 上讀取和寫入數據

（可選）使用 Firebase 本地模擬器套件進行原型設計和測試

在討論您的應用如何讀取和寫入實時數據庫之前，讓我們介紹一組可用於原型化和測試實時數據庫功能的工具：Firebase Local Emulator Suite。如果您正在嘗試不同的數據模型，優化您的安全規則，或努力尋找與後端交互的最具成本效益的方式，那麼無需部署實時服務即可在本地工作可能是一個好主意。

實時數據庫模擬器是本地模擬器套件的一部分，它使您的應用程序能夠與您的模擬數據庫內容和配置以及您的模擬項目資源（函數、其他數據庫和安全規則）進行交互。

使用實時數據庫模擬器只需幾個步驟：

  1. 在應用程序的測試配置中添加一行代碼以連接到模擬器。
  2. 從本地項目目錄的根目錄運行firebase emulators:start 。
  3. 像往常一樣使用實時數據庫平台 SDK 或使用實時數據庫 REST API 從應用程序的原型代碼進行調用。

提供了涉及實時數據庫和雲函數的詳細演練。您還應該查看Local Emulator Suite 介紹。

獲取數據庫參考

要從數據庫讀取或寫入數據，您需要一個firebase.database.Reference實例：

Web version 9

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

Web version 8

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

寫入數據

本文檔介紹了檢索數據的基礎知識以及如何排序和過濾 Firebase 數據。

通過將異步偵聽器附加到 firebase.database.Reference 來檢索firebase.database.Reference數據。偵聽器會針對數據的初始狀態觸發一次，並在數據更改時再次觸發。

基本寫操作

對於基本的寫入操作，您可以使用set()將數據保存到指定的引用，替換該路徑中的任何現有數據。例如，社交博客應用程序可能會使用set()添加用戶，如下所示：

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

Web version 8

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

使用set()覆蓋指定位置的數據，包括任何子節點。

讀取數據

監聽價值事件

要讀取路徑中的數據並偵聽更改，請使用onValue()來觀察事件。您可以使用此事件讀取給定路徑中內容的靜態快照，因為它們在事件發生時就存在。此方法在附加偵聽器時觸發一次，並且在每次數據（包括子項）發生更改時再次觸發。事件回調被傳遞一個快照，其中包含該位置的所有數據，包括子數據。如果沒有數據，則調用exists()時快照將返回false ，調用val()時將返回null 。

以下示例演示了一個社交博客應用程序從數據庫中檢索帖子的星數：

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

Web version 8

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

偵聽器收到一個snapshot ，其中包含事件發生時數據庫中指定位置的數據。您可以使用val()方法檢索snapshot中的數據。

讀取數據一次

使用 get() 讀取數據一次

SDK 旨在管理與數據庫服務器的交互，無論您的應用程序是在線還是離線。

通常，您應該使用上述值事件技術來讀取數據，以便從後端獲取數據更新的通知。偵聽器技術可減少您的使用量和計費，並經過優化以在您的用戶在線和離線時為他們提供最佳體驗。

如果您只需要一次數據，您可以使用get()從數據庫中獲取數據的快照。如果由於任何原因get()無法返回服務器值，客戶端將探測本地存儲緩存，如果仍未找到該值，則返回錯誤。

不必要地使用get()會增加帶寬的使用並導致性能損失，這可以通過使用實時偵聽器來防止，如上所示。

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

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);
});
read-and-write.js

與觀察者一起讀取數據一次

在某些情況下，您可能希望立即返回本地緩存中的值，而不是檢查服務器上的更新值。在這些情況下，您可以使用once()立即從本地磁盤緩存中獲取數據。

這對於只需要加載一次並且預計不會頻繁更改或需要主動偵聽的數據很有用。例如，前面示例中的博客應用程序在用戶開始撰寫新帖子時使用此方法加載用戶的個人資料：

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

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';
  // ...
});
read-and-write.js

更新或刪除數據

更新特定字段

要同時寫入節點的特定子節點而不覆蓋其他子節點，請使用update()方法。

調用update()時，您可以通過指定鍵的路徑來更新較低級別的子值。如果數據存儲在多個位置以更好地擴展，您可以使用data fan-out更新該數據的所有實例。

例如，社交博客應用程序可能會創建一個帖子，並同時使用以下代碼將其更新為最近的活動源和發布用戶的活動源：

Web version 9

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 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);
}
read-and-write.js

此示例使用push()在包含/posts/$postid的所有用戶的帖子的節點中創建一個帖子，並同時檢索密鑰。然後可以使用該密鑰在/user-posts/$userid/$postid的用戶帖子中創建第二個條目。

使用這些路徑，您可以通過一次調用update()來同時更新 JSON 樹中的多個位置，例如此示例如何在兩個位置創建新帖子。以這種方式進行的同時更新是原子的：要么所有更新都成功，要么所有更新都失敗。

添加完成回調

如果您想知道數據何時提交，可以添加完成回調。 set()和update()都採用可選的完成回調，當寫入已提交到數據庫時調用該回調。如果調用不成功，則向回調傳遞一個錯誤對象，指示失敗發生的原因。

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

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!
  }
});
read-and-write.js

刪除數據

刪除數據的最簡單方法是在對該數據位置的引用上調用remove() 。

您還可以通過將null指定為另一個寫入操作的值來刪除，例如set()或update() 。您可以將此技術與update()一起使用，以在單個 API 調用中刪除多個子項。

收到Promise

要了解您的數據何時提交到 Firebase 實時數據庫服務器，您可以使用Promise 。 set()和update()都可以返回一個Promise ，您可以使用它來了解何時將寫入提交到數據庫。

分離監聽器

通過在 Firebase 數據庫引用上調用off()方法來刪除回調。

您可以通過將單個偵聽器作為參數傳遞給off()來刪除它。在不帶參數的位置調用off()會刪除該位置的所有偵聽器。

在父監聽器上調用off()不會自動刪除在其子節點上註冊的監聽器；還必須在任何子偵聽器上調用off()以刪除回調。

將數據保存為事務

當處理可能被並發修改破壞的數據時，例如增量計數器，您可以使用事務操作。你可以給這個操作一個更新函數和一個可選的完成回調。更新函數將數據的當前狀態作為參數，並返回您想要寫入的新狀態。如果另一個客戶端在您的新值成功寫入之前寫入該位置，則使用新的當前值再次調用您的更新函數，並重試寫入。

例如，在示例社交博客應用程序中，您可以允許用戶為帖子加註星標和取消加註星標，並跟踪帖子獲得的星數，如下所示：

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

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;
  });
}
read-and-write.js

如果多個用戶同時為同一個帖子加註星標或客戶端的數據過時，使用事務可以防止星標計數不正確。如果事務被拒絕，服務器將當前值返回給客戶端，客戶端使用更新後的值再次運行事務。這會一直重複，直到交易被接受或您中止交易。

原子服務器端增量

在上面的用例中，我們將兩個值寫入數據庫：為帖子加星/取消星標的用戶的 ID，以及增加的星數。如果我們已經知道用戶正在為帖子加註星標，我們可以使用原子增量操作而不是事務。

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

此代碼不使用事務操作，因此如果存在衝突更新，它不會自動重新運行。但是，由於增量操作直接發生在數據庫服務器上，因此不會發生衝突。

如果您想檢測和拒絕特定於應用程序的衝突，例如用戶為他們之前已加註星標的帖子加註星標，您應該為該用例編寫自定義安全規則。

離線處理數據

如果客戶端失去其網絡連接，您的應用程序將繼續正常運行。

每個連接到 Firebase 數據庫的客戶端都維護自己的任何活動數據的內部版本。數據寫入時，首先寫入到這個本地版本。然後，Firebase 客戶端會在“盡力而為”的基礎上將該數據與遠程數據庫服務器和其他客戶端同步。

因此，在任何數據寫入服務器之前，對數據庫的所有寫入都會立即觸發本地事件。這意味著無論網絡延遲或連接如何，您的應用都會保持響應。

重新建立連接後，您的應用程序會收到一組適當的事件，以便客戶端與當前服務器狀態同步，而無需編寫任何自定義代碼。

我們將在了解有關在線和離線功能的更多信息中詳細討論離線行為。

下一步