อ่านและเขียนข้อมูลบนเว็บ

(ไม่บังคับ) สร้างต้นแบบและทดสอบด้วย Firebase Local Emulator Suite

ก่อนที่จะพูดถึงวิธีที่แอปของคุณอ่านและเขียนไปยัง Realtime Database เราขอแนะนำชุดเครื่องมือที่คุณสามารถใช้เพื่อสร้างต้นแบบและทดสอบการทำงานของฐานข้อมูลเรียลไทม์: Firebase Local Emulator Suite หากคุณกำลังลองใช้โมเดลข้อมูลต่างๆ ปรับกฎความปลอดภัยให้เหมาะสม หรือหาวิธีโต้ตอบกับแบ็คเอนด์ที่คุ้มค่าที่สุด ความสามารถในการทำงานแบบโลคัลโดยไม่ต้องปรับใช้บริการที่ใช้งานจริงอาจเป็นแนวคิดที่ดี

โปรแกรมจำลองฐานข้อมูลเรียลไทม์เป็นส่วนหนึ่งของ Local Emulator Suite ซึ่งช่วยให้แอปของคุณสามารถโต้ตอบกับเนื้อหาและการกำหนดค่าฐานข้อมูลจำลองของคุณ ตลอดจนเลือกทรัพยากรโครงการจำลองของคุณ (ฟังก์ชัน ฐานข้อมูลอื่นๆ และกฎความปลอดภัย)

การใช้โปรแกรมจำลองฐานข้อมูลเรียลไทม์เกี่ยวข้องกับขั้นตอนเพียงไม่กี่ขั้นตอน:

1. การเพิ่มบรรทัดโค้ดในการกำหนดค่าการทดสอบของแอปเพื่อเชื่อมต่อกับโปรแกรมจำลอง
2. จากรูทของไดเร็กทอรีโปรเจ็กต์ในเครื่องของคุณ ให้รัน firebase emulators:start
3. ทำการเรียกจากโค้ดต้นแบบของแอปโดยใช้ SDK ของแพลตฟอร์ม Realtime Database ตามปกติ หรือใช้ Realtime Database REST API

คำแนะนำโดยละเอียดเกี่ยวกับฐานข้อมูลเรียลไทม์และฟังก์ชันคลาวด์ มีให้ใช้งาน คุณควรดูที่ การแนะนำ Local Emulator Suite

รับการอ้างอิงฐานข้อมูล

หากต้องการอ่านหรือเขียนข้อมูลจากฐานข้อมูล คุณต้องมีอินสแตนซ์ของ firebase.database.Reference :

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

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

เขียนข้อมูล

เอกสารนี้ครอบคลุมพื้นฐานการดึงข้อมูลและวิธีสั่งซื้อและกรองข้อมูล Firebase

ดึงข้อมูล Firebase ได้โดยแนบตัวฟังแบบอะซิงโครนัสกับ firebase.database.Reference ผู้ฟังจะถูกกระตุ้นหนึ่งครั้งสำหรับสถานะเริ่มต้นของข้อมูล และอีกครั้งทุกครั้งที่มีการเปลี่ยนแปลงข้อมูล

การดำเนินการเขียนขั้นพื้นฐาน

สำหรับการดำเนินการเขียนขั้นพื้นฐาน คุณสามารถใช้ set() เพื่อบันทึกข้อมูลไปยังการอ้างอิงที่ระบุ โดยแทนที่ข้อมูลที่มีอยู่ที่เส้นทางนั้น ตัวอย่างเช่น แอปพลิเคชันโซเชียลบล็อกอาจเพิ่มผู้ใช้ด้วย set() ดังนี้:

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

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() เพื่อสังเกตเหตุการณ์ คุณสามารถใช้เหตุการณ์นี้เพื่ออ่านสแนปช็อตแบบคงที่ของเนื้อหาตามเส้นทางที่กำหนด เนื่องจากมีอยู่ในช่วงเวลาของเหตุการณ์ วิธีนี้ถูกกระตุ้นหนึ่งครั้งเมื่อแนบ Listener และอีกครั้งทุกครั้งที่ข้อมูล รวมถึงลูก เปลี่ยนแปลง การเรียกกลับเหตุการณ์จะถูกส่งผ่านสแนปชอตที่มีข้อมูลทั้งหมดในตำแหน่งนั้น รวมถึงข้อมูลย่อย หากไม่มีข้อมูล สแน็ปช็อตจะคืน false เมื่อคุณเรียก exists() และ null เมื่อคุณเรียก val()

ตัวอย่างต่อไปนี้สาธิตแอปพลิเคชันการเขียนบล็อกทางสังคมที่ดึงจำนวนดาวของโพสต์จากฐานข้อมูล:

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

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

ผู้ฟังได้รับ snapshot ที่มีข้อมูลในตำแหน่งที่ระบุในฐานข้อมูล ณ เวลาที่เกิดเหตุการณ์ คุณสามารถดึงข้อมูลใน snapshot ด้วยเมธอด val()

อ่านข้อมูลครั้งเดียว

อ่านข้อมูลครั้งเดียวด้วย get()

SDK ออกแบบมาเพื่อจัดการการโต้ตอบกับเซิร์ฟเวอร์ฐานข้อมูล ไม่ว่าแอปของคุณจะออนไลน์หรือออฟไลน์

โดยทั่วไป คุณควรใช้เทคนิคเหตุการณ์มูลค่าที่อธิบายไว้ด้านบนเพื่ออ่านข้อมูลเพื่อรับการแจ้งเตือนการอัปเดตข้อมูลจากแบ็กเอนด์ เทคนิคการฟังช่วยลดการใช้งานและการเรียกเก็บเงินของคุณ และได้รับการปรับปรุงเพื่อให้ผู้ใช้ของคุณได้รับประสบการณ์ที่ดีที่สุดเมื่อพวกเขาออนไลน์และออฟไลน์

หากคุณต้องการข้อมูลเพียงครั้งเดียว คุณสามารถใช้ get() เพื่อรับภาพรวมของข้อมูลจากฐานข้อมูล ถ้าด้วยเหตุผลใดก็ตาม get() ไม่สามารถส่งคืนค่าเซิร์ฟเวอร์ได้ ไคลเอนต์จะตรวจสอบแคชหน่วยเก็บข้อมูลในเครื่องและส่งกลับข้อผิดพลาดหากยังไม่พบค่า

การใช้ get() โดยไม่จำเป็นสามารถเพิ่มการใช้แบนด์วิธและนำไปสู่การสูญเสียประสิทธิภาพ ซึ่งสามารถป้องกันได้โดยใช้ตัวฟังแบบเรียลไทม์ดังที่แสดงไว้ด้านบน

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

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() เพื่อรับข้อมูลจากแคชดิสก์ภายในเครื่องได้ทันที

วิธีนี้มีประโยชน์สำหรับข้อมูลที่จำเป็นต้องโหลดเพียงครั้งเดียวและไม่ได้คาดว่าจะเปลี่ยนแปลงบ่อยหรือต้องการการฟังอย่างกระตือรือร้น ตัวอย่างเช่น แอปบล็อกในตัวอย่างก่อนหน้านี้ใช้วิธีนี้เพื่อโหลดโปรไฟล์ของผู้ใช้เมื่อพวกเขาเริ่มเขียนโพสต์ใหม่:

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

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() คุณสามารถอัปเดตค่าลูกระดับล่างได้โดยระบุพาธสำหรับคีย์ หากข้อมูลถูกจัดเก็บไว้ในหลายตำแหน่งเพื่อให้ปรับขนาดได้ดีขึ้น คุณสามารถอัปเดต อินสแตนซ์ทั้งหมดของข้อมูลนั้นโดยใช้การกระจายข้อมูล

ตัวอย่างเช่น แอปโซเชียลบล็อกอาจสร้างโพสต์และอัปเดตเป็นฟีดกิจกรรมล่าสุดและฟีดกิจกรรมของผู้ใช้ที่โพสต์พร้อมกันโดยใช้โค้ดดังนี้:

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

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

เมื่อใช้เส้นทางเหล่านี้ คุณสามารถดำเนินการอัปเดตหลายตำแหน่งพร้อมกันในโครงสร้าง JSON ด้วยการเรียก update() เพียงครั้งเดียว เช่น วิธีที่ตัวอย่างนี้สร้างโพสต์ใหม่ในทั้งสองตำแหน่ง การอัปเดตพร้อมกันด้วยวิธีนี้ถือเป็นแบบปรมาณู: การอัปเดตทั้งหมดสำเร็จหรือการอัปเดตทั้งหมดล้มเหลว

เพิ่มการโทรกลับที่เสร็จสมบูรณ์

หากคุณต้องการทราบว่าข้อมูลของคุณถูกคอมมิตเมื่อใด คุณสามารถเพิ่มการเรียกกลับให้เสร็จสิ้นได้ ทั้ง set() และ update() ใช้การเรียกกลับที่สมบูรณ์ซึ่งเป็นทางเลือกซึ่งถูกเรียกเมื่อเขียนถูกคอมมิตไปยังฐานข้อมูล หากการโทรไม่สำเร็จ การเรียกกลับจะถูกส่งผ่านวัตถุแสดงข้อผิดพลาดเพื่อระบุว่าเหตุใดจึงเกิดความล้มเหลว

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

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 ที่คุณสามารถใช้เพื่อทราบเมื่อการเขียนถูกผูกมัดกับฐานข้อมูล

แยกผู้ฟัง

การเรียกกลับจะถูกลบออกโดยการเรียกใช้เมธอด off() ในการอ้างอิงฐานข้อมูล Firebase ของคุณ

คุณสามารถลบผู้ฟังรายเดียวได้โดยส่งเป็นพารามิเตอร์ไปที่ off() การโทร off() บนตำแหน่งโดยไม่มีข้อโต้แย้งจะลบผู้ฟังทั้งหมดในตำแหน่งนั้น

การ off() บนพาเรนต์ฟังไม่ได้ลบฟังที่ลงทะเบียนบนโหนดย่อยโดยอัตโนมัติ ต้องเรียก off() บนผู้ฟังเด็กเพื่อลบการโทรกลับ

บันทึกข้อมูลเป็นธุรกรรม

เมื่อทำงานกับข้อมูลที่อาจเสียหายจากการแก้ไขพร้อมกัน เช่น ตัวนับส่วนเพิ่ม คุณสามารถใช้ การดำเนินการธุรกรรม ได้ คุณสามารถให้ฟังก์ชันการอัพเดตแก่การดำเนินการนี้และการเรียกกลับที่สมบูรณ์ซึ่งเป็นทางเลือก ฟังก์ชันอัปเดตใช้สถานะปัจจุบันของข้อมูลเป็นอาร์กิวเมนต์และส่งคืนสถานะใหม่ที่คุณต้องการเขียน ถ้าไคลเอนต์อื่นเขียนไปยังตำแหน่งก่อนที่ค่าใหม่ของคุณจะเขียนสำเร็จ ฟังก์ชันการอัพเดทของคุณจะถูกเรียกอีกครั้งด้วยค่าปัจจุบันใหม่ และการเขียนจะถูกลองใหม่

ตัวอย่างเช่น ในตัวอย่างแอปโซเชียลบล็อก คุณสามารถอนุญาตให้ผู้ใช้ติดดาวและเลิกติดดาวโพสต์ และติดตามจำนวนดาวที่โพสต์ได้รับดังนี้:

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

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

การใช้ธุรกรรมจะป้องกันไม่ให้การนับดาวไม่ถูกต้อง หากผู้ใช้หลายคนติดดาวโพสต์เดียวกันในเวลาเดียวกัน หรือไคลเอนต์มีข้อมูลเก่า หากธุรกรรมถูกปฏิเสธ เซิร์ฟเวอร์จะส่งกลับค่าปัจจุบันไปยังไคลเอ็นต์ ซึ่งจะเรียกใช้ธุรกรรมอีกครั้งด้วยมูลค่าที่อัปเดต สิ่งนี้จะเกิดขึ้นซ้ำๆ จนกว่าธุรกรรมจะได้รับการยอมรับหรือคุณยกเลิกธุรกรรม

Atomic ฝั่งเซิร์ฟเวอร์ที่เพิ่มขึ้น

ในกรณีการใช้งานข้างต้น เรากำลังเขียนค่าสองค่าลงในฐานข้อมูล: ID ของผู้ใช้ที่ติดดาว/เลิกติดดาวโพสต์ และจำนวนดาวที่เพิ่มขึ้น หากเราทราบอยู่แล้วว่าผู้ใช้กำลังแสดงโพสต์ เราสามารถใช้การดำเนินการเพิ่มปรมาณูแทนธุรกรรมได้

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

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 จะซิงโครไนซ์ข้อมูลนั้นกับเซิร์ฟเวอร์ฐานข้อมูลระยะไกลและกับไคลเอนต์อื่นๆ บนพื้นฐาน "ความพยายามอย่างดีที่สุด"

ด้วยเหตุนี้ การเขียนทั้งหมดไปยังฐานข้อมูลจะทริกเกอร์เหตุการณ์ในเครื่องทันที ก่อนที่ข้อมูลใดๆ จะถูกเขียนไปยังเซิร์ฟเวอร์ ซึ่งหมายความว่าแอปของคุณยังคงตอบสนองโดยไม่คำนึงถึงเวลาแฝงของเครือข่ายหรือการเชื่อมต่อ

เมื่อสร้างการเชื่อมต่อใหม่แล้ว แอปของคุณจะได้รับชุดเหตุการณ์ที่เหมาะสมเพื่อให้ไคลเอนต์ซิงค์กับสถานะเซิร์ฟเวอร์ปัจจุบัน โดยไม่ต้องเขียนโค้ดที่กำหนดเองใดๆ

เราจะพูดถึงพฤติกรรมออฟไลน์เพิ่มเติมใน เรียนรู้เพิ่มเติมเกี่ยวกับความสามารถออนไลน์และออฟไลน์ ..

ขั้นตอนถัดไป

• การทำงานกับรายการข้อมูล
• เรียนรู้วิธีจัดโครงสร้างข้อมูล
• เรียนรู้เพิ่มเติมเกี่ยวกับความสามารถออนไลน์และออฟไลน์