(ไม่บังคับ) สร้างต้นแบบและทดสอบด้วย Firebase Local Emulator Suite
ก่อนที่จะพูดถึงวิธีที่แอปของคุณอ่านและเขียนไปยังฐานข้อมูลเรียลไทม์ เรามาแนะนำชุดเครื่องมือที่คุณสามารถใช้เพื่อสร้างต้นแบบและทดสอบฟังก์ชันการทำงานของฐานข้อมูลเรียลไทม์: Firebase Local Emulator Suite หากคุณกำลังทดลองใช้โมเดลข้อมูลต่างๆ เพิ่มประสิทธิภาพกฎความปลอดภัยของคุณ หรือทำงานเพื่อค้นหาวิธีที่คุ้มค่าที่สุดในการโต้ตอบกับแบ็คเอนด์ ความสามารถในการทำงานในพื้นที่โดยไม่ต้องปรับใช้บริการสดอาจเป็นแนวคิดที่ดี
โปรแกรมจำลองฐานข้อมูลแบบเรียลไทม์เป็นส่วนหนึ่งของ Local Emulator Suite ซึ่งช่วยให้แอปของคุณโต้ตอบกับเนื้อหาและการกำหนดค่าฐานข้อมูลที่จำลองได้ รวมถึงทรัพยากรโปรเจ็กต์ที่จำลอง (ฟังก์ชัน ฐานข้อมูลอื่นๆ และกฎความปลอดภัย)
การใช้โปรแกรมจำลองฐานข้อมูลเรียลไทม์มีเพียงไม่กี่ขั้นตอน:
- การเพิ่มบรรทัดโค้ดลงในการกำหนดค่าทดสอบของแอปเพื่อเชื่อมต่อกับโปรแกรมจำลอง
- จากรากของไดเร็กทอรีโปรเจ็กต์ในเครื่องของคุณ ให้รัน
firebase emulators:start
- โทรออกจากโค้ดต้นแบบของแอปโดยใช้ Realtime Database Platform SDK ตามปกติ หรือใช้ Realtime Database REST API
มี คำแนะนำโดยละเอียดเกี่ยวกับฐานข้อมูลเรียลไทม์และฟังก์ชันคลาวด์ ให้บริการ คุณควรดู การแนะนำ Local Emulator Suite ด้วย
รับการอ้างอิงฐานข้อมูล
หากต้องการอ่านหรือเขียนข้อมูลจากฐานข้อมูล คุณต้องมีอินสแตนซ์ของ firebase.database.Reference
:
Web modular API
import { getDatabase } from "firebase/database"; const database = getDatabase();
Web namespaced API
var database = firebase.database();
เขียนข้อมูล
เอกสารนี้ครอบคลุมพื้นฐานในการเรียกข้อมูล รวมถึงวิธีสั่งซื้อและกรองข้อมูล Firebase
ข้อมูล Firebase จะถูกดึงออกมาโดยการแนบ Listener แบบอะซิงโครนัสเข้ากับ firebase.database.Reference
Listener จะถูกทริกเกอร์หนึ่งครั้งสำหรับสถานะเริ่มต้นของข้อมูล และอีกครั้งทุกครั้งที่ข้อมูลมีการเปลี่ยนแปลง
การดำเนินการเขียนขั้นพื้นฐาน
สำหรับการดำเนินการเขียนขั้นพื้นฐาน คุณสามารถใช้ set()
เพื่อบันทึกข้อมูลลงในการอ้างอิงที่ระบุ โดยแทนที่ข้อมูลที่มีอยู่ในเส้นทางนั้น ตัวอย่างเช่น แอปพลิเคชันบล็อกโซเชียลอาจเพิ่มผู้ใช้ด้วย set()
ดังนี้:
Web modular API
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 namespaced API
function writeUserData(userId, name, email, imageUrl) { firebase.database().ref('users/' + userId).set({ username: name, email: email, profile_picture : imageUrl }); }
การใช้ set()
จะเขียนทับข้อมูลในตำแหน่งที่ระบุ รวมถึงโหนดลูกด้วย
อ่านข้อมูล
รับฟังเหตุการณ์อันทรงคุณค่า
หากต้องการอ่านข้อมูลที่เส้นทางและรับฟังการเปลี่ยนแปลง ให้ใช้ onValue()
เพื่อสังเกตเหตุการณ์ คุณสามารถใช้เหตุการณ์นี้เพื่ออ่านสแน็ปช็อตแบบคงที่ของเนื้อหาในเส้นทางที่กำหนดตามที่มีอยู่ ณ เวลาที่เกิดเหตุการณ์ วิธีการนี้จะถูกทริกเกอร์หนึ่งครั้งเมื่อมีการแนบ Listener และอีกครั้งทุกครั้งที่ข้อมูล รวมถึงลูกๆ มีการเปลี่ยนแปลง การเรียกกลับเหตุการณ์จะถูกส่งผ่านสแน็ปช็อตที่มีข้อมูลทั้งหมด ณ ตำแหน่งนั้น รวมถึงข้อมูลลูกด้วย หากไม่มีข้อมูล สแน็ปช็อตจะส่งคืน false
เมื่อคุณเรียก exists()
และ null
เมื่อคุณเรียก val()
ตัวอย่างต่อไปนี้สาธิตแอปพลิเคชันบล็อกโซเชียลที่ดึงข้อมูลจำนวนดาวของโพสต์จากฐานข้อมูล:
Web modular API
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 namespaced API
var starCountRef = firebase.database().ref('posts/' + postId + '/starCount'); starCountRef.on('value', (snapshot) => { const data = snapshot.val(); updateStarCount(postElement, data); });
ผู้ฟังจะได้รับ snapshot
ที่มีข้อมูล ณ ตำแหน่งที่ระบุในฐานข้อมูล ณ เวลาที่เกิดเหตุการณ์ คุณสามารถดึงข้อมูลใน snapshot
ด้วยวิธี val()
อ่านข้อมูลครั้งเดียว
อ่านข้อมูลหนึ่งครั้งด้วย get()
SDK ได้รับการออกแบบมาเพื่อจัดการการโต้ตอบกับเซิร์ฟเวอร์ฐานข้อมูล ไม่ว่าแอปของคุณจะออนไลน์หรือออฟไลน์
โดยทั่วไป คุณควรใช้เทคนิคเหตุการณ์มูลค่าที่อธิบายไว้ข้างต้นเพื่ออ่านข้อมูลเพื่อรับการแจ้งเตือนการอัปเดตข้อมูลจากแบ็กเอนด์ เทคนิค Listener ช่วยลดการใช้งานและการเรียกเก็บเงินของคุณ และได้รับการปรับปรุงเพื่อให้ผู้ใช้ของคุณได้รับประสบการณ์ที่ดีที่สุดขณะออนไลน์และออฟไลน์
หากคุณต้องการข้อมูลเพียงครั้งเดียว คุณสามารถใช้ get()
เพื่อรับสแน็ปช็อตข้อมูลจากฐานข้อมูล หาก get()
ไม่สามารถส่งคืนค่าเซิร์ฟเวอร์ไม่ว่าด้วยเหตุผลใดก็ตาม ไคลเอนต์จะตรวจสอบแคชที่เก็บข้อมูลในเครื่องและส่งกลับข้อผิดพลาดหากยังคงไม่พบค่า
การใช้ get()
โดยไม่จำเป็นสามารถเพิ่มการใช้แบนด์วิดท์และทำให้ประสิทธิภาพลดลง ซึ่งสามารถป้องกันได้โดยใช้ตัวฟังแบบเรียลไทม์ดังที่แสดงไว้ด้านบน
Web modular API
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 namespaced API
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); });
อ่านข้อมูลหนึ่งครั้งกับผู้สังเกตการณ์
ในบางกรณี คุณอาจต้องการให้ค่าจากแคชในเครื่องส่งคืนทันที แทนที่จะตรวจสอบค่าที่อัปเดตบนเซิร์ฟเวอร์ ในกรณีดังกล่าว คุณสามารถใช้ once()
เพื่อรับข้อมูลจากแคชในดิสก์ในเครื่องได้ทันที
สิ่งนี้มีประโยชน์สำหรับข้อมูลที่จำเป็นต้องโหลดเพียงครั้งเดียวและไม่คาดว่าจะเปลี่ยนแปลงบ่อยหรือต้องมีการฟังอย่างต่อเนื่อง ตัวอย่างเช่น แอปบล็อกในตัวอย่างก่อนหน้านี้ใช้วิธีนี้ในการโหลดโปรไฟล์ของผู้ใช้เมื่อพวกเขาเริ่มเขียนโพสต์ใหม่:
Web modular API
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 namespaced API
var userId = firebase.auth().currentUser.uid; return firebase.database().ref('/users/' + userId).once('value').then((snapshot) => { var username = (snapshot.val() && snapshot.val().username) || 'Anonymous'; // ... });
การอัปเดตหรือการลบข้อมูล
อัปเดตฟิลด์เฉพาะ
หากต้องการเขียนไปยังโหนดย่อยเฉพาะของโหนดพร้อมกันโดยไม่ต้องเขียนทับโหนดย่อยอื่น ๆ ให้ใช้เมธอด update()
เมื่อเรียก update()
คุณสามารถอัปเดตค่าลูกระดับล่างได้โดยการระบุเส้นทางสำหรับคีย์ หากข้อมูลถูกจัดเก็บไว้ในหลายตำแหน่งเพื่อให้ปรับขนาดได้ดีขึ้น คุณสามารถอัปเดต อินสแตนซ์ทั้งหมดของข้อมูลนั้นได้โดยใช้การกระจายข้อมูล
ตัวอย่างเช่น แอปบล็อกโซเชียลอาจสร้างโพสต์และอัปเดตเป็นฟีดกิจกรรมล่าสุดและฟีดกิจกรรมของผู้ใช้ที่โพสต์ไปพร้อมกันโดยใช้โค้ดดังนี้:
Web modular API
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); }
Web namespaced API
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); }
ตัวอย่างนี้ใช้ push()
เพื่อสร้างโพสต์ในโหนดที่มีโพสต์สำหรับผู้ใช้ทุกคนที่ /posts/$postid
และดึงข้อมูลคีย์พร้อมกัน จากนั้นคีย์จะสามารถนำมาใช้เพื่อสร้างรายการที่สองในโพสต์ของผู้ใช้ที่ /user-posts/$userid/$postid
เมื่อใช้เส้นทางเหล่านี้ คุณสามารถอัปเดตสถานที่หลายแห่งในแผนผัง JSON ได้พร้อมกันด้วยการเรียก update()
เพียงครั้งเดียว เช่น วิธีสร้างโพสต์ใหม่ในตัวอย่างนี้ในทั้งสองสถานที่ การอัปเดตพร้อมกันที่ทำในลักษณะนี้เป็นแบบอะตอมมิก: การอัปเดตทั้งหมดสำเร็จหรือการอัปเดตทั้งหมดล้มเหลว
เพิ่มการโทรกลับที่เสร็จสมบูรณ์
หากคุณต้องการทราบว่าข้อมูลของคุณได้รับการยืนยันเมื่อใด คุณสามารถเพิ่มการเรียกกลับเพื่อดำเนินการให้เสร็จสิ้นได้ ทั้ง set()
และ update()
รับการเรียกกลับให้เสร็จสิ้นซึ่งเป็นทางเลือกซึ่งจะถูกเรียกเมื่อมีการเขียนไปยังฐานข้อมูล หากการโทรไม่สำเร็จ การโทรกลับจะถูกส่งผ่านอ็อบเจ็กต์ข้อผิดพลาดที่ระบุสาเหตุที่เกิดความล้มเหลว
Web modular API
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 namespaced API
firebase.database().ref('users/' + userId).set({ username: name, email: email, profile_picture : imageUrl }, (error) => { if (error) { // The write failed... } else { // Data saved successfully! } });
ลบข้อมูล
วิธีที่ง่ายที่สุดในการลบข้อมูลคือการเรียก remove()
เพื่ออ้างอิงตำแหน่งของข้อมูลนั้น
คุณยังสามารถลบได้โดยการระบุ null
เป็นค่าสำหรับการดำเนินการเขียนอื่น เช่น set()
หรือ update()
คุณสามารถใช้เทคนิคนี้ร่วมกับ update()
เพื่อลบลูกหลายคนในการเรียก API ครั้งเดียว
รับคำ Promise
หากต้องการทราบว่าข้อมูลของคุณถูกส่งไปยังเซิร์ฟเวอร์ Firebase Realtime Database เมื่อใด คุณสามารถใช้ Promise
ทั้ง set()
และ update()
สามารถส่งคืน Promise
ที่คุณสามารถใช้เพื่อรู้ว่าเมื่อใดที่การเขียนถูกส่งไปยังฐานข้อมูล
แยกผู้ฟังออก
การเรียกกลับจะถูกลบออกโดยการเรียกเมธอด off()
ในการอ้างอิงฐานข้อมูล Firebase ของคุณ
คุณสามารถลบ Listener เดี่ยวออกได้โดยส่งผ่านเป็นพารามิเตอร์ไปที่ off()
การเรียก off()
ในตำแหน่งที่ไม่มีข้อโต้แย้งจะเป็นการลบผู้ฟังทั้งหมดในตำแหน่งนั้น
การเรียก off()
บน parent Listener จะไม่ลบ Listener ที่ลงทะเบียนบนโหนดลูกโดยอัตโนมัติ จะต้องเรียกใช้ off()
บนผู้ฟังเด็กเพื่อลบการโทรกลับ
บันทึกข้อมูลเป็นธุรกรรม
เมื่อทำงานกับข้อมูลที่อาจเสียหายจากการแก้ไขที่เกิดขึ้นพร้อมกัน เช่น ตัวนับส่วนเพิ่ม คุณสามารถใช้ การดำเนินการธุรกรรม ได้ คุณสามารถกำหนดให้การดำเนินการนี้มีฟังก์ชันอัพเดตและตัวเลือกเรียกกลับให้เสร็จสิ้นได้ ฟังก์ชั่นอัพเดตใช้สถานะปัจจุบันของข้อมูลเป็นอาร์กิวเมนต์และส่งกลับสถานะใหม่ที่คุณต้องการเขียน หากไคลเอนต์อื่นเขียนไปยังตำแหน่งก่อนที่จะเขียนค่าใหม่ของคุณสำเร็จ ฟังก์ชันอัปเดตของคุณจะถูกเรียกอีกครั้งด้วยค่าปัจจุบันใหม่ และลองเขียนอีกครั้ง
ตัวอย่างเช่น ในแอปบล็อกโซเชียลตัวอย่าง คุณสามารถอนุญาตให้ผู้ใช้ติดดาวและเลิกติดดาวโพสต์ และติดตามจำนวนดาวที่โพสต์ได้รับดังนี้:
Web modular API
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 namespaced API
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; }); }
การใช้ธุรกรรมจะป้องกันไม่ให้การนับดาวไม่ถูกต้อง หากผู้ใช้หลายรายติดดาวโพสต์เดียวกันในเวลาเดียวกัน หรือลูกค้ามีข้อมูลเก่า หากธุรกรรมถูกปฏิเสธ เซิร์ฟเวอร์จะส่งคืนค่าปัจจุบันไปยังไคลเอนต์ ซึ่งจะดำเนินการธุรกรรมอีกครั้งด้วยมูลค่าที่อัปเดต ซึ่งจะเกิดขึ้นซ้ำจนกว่าธุรกรรมจะได้รับการยอมรับหรือคุณยกเลิกธุรกรรม
การเพิ่มขึ้นฝั่งเซิร์ฟเวอร์แบบอะตอมมิก
ในกรณีการใช้งานข้างต้น เรากำลังเขียนค่าสองค่าลงในฐานข้อมูล ได้แก่ ID ของผู้ใช้ที่ติดดาว/ไม่ติดดาวโพสต์ และจำนวนดาวที่เพิ่มขึ้น หากเรารู้อยู่แล้วว่าผู้ใช้กำลังแสดงโพสต์ เราสามารถใช้การดำเนินการเพิ่มแบบอะตอมมิกแทนธุรกรรมได้
Web modular API
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); }
Web namespaced API
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); }
รหัสนี้ไม่ได้ใช้การดำเนินการธุรกรรม ดังนั้นจึงไม่ได้รับการรันใหม่โดยอัตโนมัติหากมีการอัปเดตที่ขัดแย้งกัน อย่างไรก็ตาม เนื่องจากการดำเนินการเพิ่มเกิดขึ้นโดยตรงบนเซิร์ฟเวอร์ฐานข้อมูล จึงไม่มีโอกาสที่จะเกิดข้อขัดแย้ง
หากคุณต้องการตรวจจับและปฏิเสธข้อขัดแย้งเฉพาะแอปพลิเคชัน เช่น ผู้ใช้ที่นำแสดงโดยโพสต์ที่พวกเขาติดดาวไว้ก่อนหน้านี้ คุณควรเขียนกฎความปลอดภัยที่กำหนดเองสำหรับกรณีการใช้งานนั้น
ทำงานกับข้อมูลแบบออฟไลน์
หากไคลเอ็นต์ขาดการเชื่อมต่อเครือข่าย แอปของคุณจะทำงานต่อไปได้อย่างถูกต้อง
ไคลเอนต์ทุกตัวที่เชื่อมต่อกับฐานข้อมูล Firebase จะรักษาเวอร์ชันภายในของข้อมูลที่ใช้งานอยู่ เมื่อมีการเขียนข้อมูล ข้อมูลจะถูกเขียนลงในเวอร์ชันท้องถิ่นนี้ก่อน จากนั้นไคลเอนต์ Firebase จะซิงโครไนซ์ข้อมูลนั้นกับเซิร์ฟเวอร์ฐานข้อมูลระยะไกลและกับไคลเอนต์อื่น ๆ ตาม "ความพยายามอย่างดีที่สุด"
ด้วยเหตุนี้ การเขียนทั้งหมดไปยังฐานข้อมูลจะทริกเกอร์เหตุการณ์ภายในเครื่องทันที ก่อนที่ข้อมูลใดๆ จะถูกเขียนไปยังเซิร์ฟเวอร์ ซึ่งหมายความว่าแอปของคุณยังคงตอบสนองโดยไม่คำนึงถึงเวลาแฝงของเครือข่ายหรือการเชื่อมต่อ
เมื่อสร้างการเชื่อมต่ออีกครั้ง แอปของคุณจะได้รับชุดเหตุการณ์ที่เหมาะสมเพื่อให้ไคลเอนต์ซิงค์กับสถานะเซิร์ฟเวอร์ปัจจุบัน โดยไม่ต้องเขียนโค้ดที่กำหนดเองใดๆ
เราจะพูดคุยเพิ่มเติมเกี่ยวกับพฤติกรรมออฟไลน์ใน เรียนรู้เพิ่มเติมเกี่ยวกับความสามารถออนไลน์และออฟไลน์ ..