在網路上讀取及寫入資料

(選用) 使用 Firebase Local Emulator Suite 設計原型並進行測試

在討論應用程式如何讀取及寫入 Realtime Database 之前，讓我們先介紹一組可用於製作原型和測試 Realtime Database 功能的工具：Firebase Local Emulator Suite。如果您想嘗試不同的資料模型、最佳化安全性規則，或是尋找與後端互動最具成本效益的方式，不妨考慮在本機作業，而無需部署實際服務。

Realtime Database 模擬器是 Local Emulator Suite 的一部分， 可讓應用程式與模擬的資料庫內容和設定互動，如 以及選用的模擬專案資源 (函式、其他資料庫 和安全性規則)。

使用 Realtime Database 模擬器只需完成幾個步驟：

  1. 將一行程式碼新增至應用程式的測試設定，即可與模擬器連線。
  2. 從本機專案目錄的根目錄中執行 firebase emulators:start。
  3. 使用 Realtime Database 平台從應用程式的原型程式碼發出呼叫 或 Realtime Database REST API 繼續使用 SDK。

請參閱有關 Realtime Database 和 Cloud Functions 的詳細說明。建議您也參閱 Local Emulator Suite 簡介。

取得資料庫參照

如要從資料庫讀取或寫入資料，您需要使用 firebase.database.Reference：

Web

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

Web

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

寫入資料

本文說明擷取資料的基本概念，以及如何排序及篩選資料 Firebase 資料。

將非同步事件監聽器附加至 firebase.database.Reference。系統會針對 判斷資料的初始狀態，並在資料變更時再次執行。

基本寫入作業

對於基本寫入作業，您可以使用 set() 將資料儲存至指定的參照，取代該路徑上的任何現有資料。舉例來說，社交部落格應用程式可能會使用 set() 新增使用者，如下所示：

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

使用 set() 會覆寫指定位置的資料，包括任何子項 節點。

讀取資料

監聽價值事件

如要在路徑中讀取資料及監聽變更，請使用 onValue() 進行觀察 事件。您可以使用這項事件，讀取指定路徑中內容的靜態快照，因為這些內容會在事件發生時存在。這個方法 附加監聽器時就會觸發一次，而每當資料 (包括子項) 變更時，就會觸發一次。事件回呼會傳遞快照，其中包含該位置的所有資料，包括子資料。如果沒有資料，快照會在您呼叫 exists() 時傳回 false，在您對其呼叫 val() 時傳回 null。

下列範例示範社交網誌應用程式擷取 資料庫中貼文的星號數：

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

事件監聽器會收到 snapshot，其中包含事件發生時資料庫中指定位置的資料。您可以擷取資料 搭配 val() 方法在 snapshot 內發生。

讀取資料一次

使用 get() 讀取資料一次

SDK 的設計用意是管理與資料庫伺服器的互動 應用程式處於連線狀態或離線。

一般而言，您應使用上述的價值事件技術，以便讀取 接收資料更新通知，以便接收來自後端的資料更新通知。事件監聽器技巧可減少使用量和帳單費用，並經過最佳化處理，讓使用者在線上和離線時都能享有最佳體驗。

如果只需要資料一次，可以使用 get() 取得 儲存資料庫資料如果 get() 因任何原因無法傳回伺服器值，用戶端會探查本機儲存空間快取，如果仍找不到該值，就會傳回錯誤。

不必要的使用 get() 可能會增加頻寬用量，導致 但如上所示，使用即時事件監聽器就能避免這種情況。

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

使用觀察器讀取資料一次

在某些情況下，您可能會希望傳回本機快取中的值 ，而不是在伺服器上檢查更新的值。在這些情境下 在下列情況中，您可以使用 once() 立即從本機磁碟快取取得資料。

這類資料只需載入一次，且不會經常變更或需要主動聆聽，因此非常實用。舉例來說，網誌應用程式 都採用這個方法，在使用者選擇載入個人資料時， 開始撰寫新文章：

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

更新或刪除資料

更新特定欄位

於不覆寫其他節點的情況下，同時寫入節點的特定子項 子節點，請使用 update() 方法。

呼叫 update() 時，您可以指定索引鍵的路徑，藉此更新較低層級的子項值。如果資料儲存在多個位置，可讓資料更容易擴充，您可以使用資料分支更新該資料的所有例項。

舉例來說，社交網誌應用程式可能會建立文章，然後同時更新 將 物件提交至最近的活動動態消息，並使用 改為執行以下動作：

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

本例使用 push() 在包含貼文的節點中張貼文章 位於 /posts/$postid 的所有使用者並同時擷取金鑰。接著，您可以使用這個鍵，在使用者 /user-posts/$userid/$postid 的貼文中建立第二個項目。

您可以使用這些路徑，同時更新位於 透過單一呼叫 update() 的 JSON 樹狀結構 (如本範例所示) 就會在兩個位置建立新貼文以這種方式同時進行更新 不可分割：所有更新成功或所有更新都失敗

新增完成回呼

如要瞭解資料修訂時間，您可以新增 完成回呼。set() 和 update() 都可以選擇完成 將寫入作業提交至資料庫時呼叫的回呼。如果 呼叫失敗時，系統會傳送 錯誤物件，用於指出失敗的原因。

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

刪除資料

刪除資料最簡單的方法是對對物件的參照呼叫 remove() 這些資料的位置

您也可以將 null 指定為其他寫入作業 (例如 set() 或 update()) 的值，藉此刪除資料。您可以使用這項技巧 使用 update()，在單一 API 呼叫中刪除多個子項。

接收 Promise

如要得知資料何時提交至 Firebase Realtime Database 伺服器， 可以使用 Promise。 set() 和 update() 都能傳回 Promise，您可以利用這項資訊瞭解寫入作業何時提交至資料庫。

卸離事件監聽器

您可以呼叫 Firebase 資料庫參考資料的 off() 方法，移除回呼。

您可以將單一事件監聽器做為參數傳遞至 off()，藉此移除該事件監聽器。在沒有引數的位置呼叫 off() 會移除該位置的所有事件監聽器 或 HTTP/HTTPS 位置

對父項事件監聽器呼叫 off() 不會 自動移除在子節點上註冊的監聽器； 也必須在任何子項事件監聽器上呼叫 off() 移除回呼。

將資料儲存為交易

使用可能同時受到並行損毀的資料時 例如增量計數器 交易作業。 您可以將更新函式提供給這項作業選用 完成回呼。update 函式會將資料的目前狀態視為 引數並傳回要寫入的新所需狀態如果 在成功使用新值之前，另一個用戶端將資料寫入位置 即會使用新的目前值再次呼叫更新函式，且 並在重試寫入時再次寫入

以社交網誌應用程式為例，您可以讓使用者： 為貼文加上星號、移除星號，並追蹤貼文獲得的星星數量 如下所示：

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

如果有多位使用者同時為同一個貼文按下星號，或是用戶端有過時的資料，使用交易可避免星號計數出現錯誤。如果 交易遭拒，伺服器會傳回 用戶端目前的值，便會使用 更新的值。此操作會重複直到接受交易或您取消交易為止 交易。

整體伺服器端增量

在上述用途中，我們要將兩個值寫入資料庫： 使用者為貼文加上星號/移除星號，以及逐漸增加的星號數量。如果我們 就可以知道使用者已為貼文加上星號 而不是交易作業

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

此程式碼不會使用交易作業，因此不會自動取得 如果有衝突的更新，則重新執行。不過，由於遞增作業 這並不會發生衝突。

如要偵測並拒絕應用程式特定衝突 (例如使用者) 為先前加上星號的訊息加上星號，請自訂 應用情境

離線使用資料

如果用戶端的網路連線中斷，您的應用程式會繼續運作 正確。

連接至 Firebase 資料庫的所有用戶端都會保有自己的內部版本 任何有效資料。寫入資料時，會寫入這個本機版本 首先。接著，Firebase 用戶端會以「盡力而為」的方式，將該資料與遠端資料庫伺服器和其他用戶端同步。

因此，所有寫入資料庫的作業都會立即觸發本機事件，然後才將任何資料寫入伺服器。也就是說，無論網路延遲或連線狀況為何，應用程式都能持續回應。

連線恢復後，應用程式會收到一組適當的 以便用戶端與目前的伺服器狀態同步， 即可撰寫任何自訂程式碼

我們將在下列單元中進一步說明離線行為： 進一步瞭解線上和離線功能。

後續步驟