ทำงานกับรายการข้อมูลบนเว็บ

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

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

Web

import { getDatabase } from "firebase/database";

const database = getDatabase();

Web

var database = firebase.database();

การอ่านและการเขียนรายการ

ต่อท้ายรายการข้อมูล

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

คุณสามารถใช้การอ้างอิงข้อมูลใหม่ที่แสดงโดยเมธอด push() เพื่อเรียก ค่าของคีย์ที่สร้างขึ้นโดยอัตโนมัติของบุตรหลานหรือตั้งค่าข้อมูลสำหรับบุตรหลาน พร็อพเพอร์ตี้ .key ของข้อมูลอ้างอิง push() มีคีย์ที่สร้างขึ้นโดยอัตโนมัติ

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

เช่น สามารถใช้ push() เพื่อเพิ่มโพสต์ใหม่ลงในรายการโพสต์ ในแอปพลิเคชันโซเชียล

Web

import { getDatabase, ref, push, set } from "firebase/database";

// Create a new post reference with an auto-generated id
const db = getDatabase();
const postListRef = ref(db, 'posts');
const newPostRef = push(postListRef);
set(newPostRef, {
    // ...
});

Web

// Create a new post reference with an auto-generated id
var postListRef = firebase.database().ref('posts');
var newPostRef = postListRef.push();
newPostRef.set({
    // ...
});

ฟังเหตุการณ์ของบุตรหลาน

ระบบจะทริกเกอร์เหตุการณ์ย่อยเพื่อตอบสนองต่อการดำเนินการเฉพาะที่เกิดขึ้นกับ องค์ประกอบย่อยของโหนดจากการดำเนินการ เช่น รายการย่อยใหม่ที่เพิ่มผ่าน เมธอด push() หรือย่อยที่กําลังอัปเดตผ่านเมธอด update()

เหตุการณ์ การใช้งานทั่วไป
child_added ดึงข้อมูลรายการต่างๆ หรือฟังการเพิ่มในรายการ เหตุการณ์นี้จะทริกเกอร์ 1 ครั้งสำหรับผู้เผยแพร่โฆษณาย่อยแต่ละรายการที่มีอยู่ แล้วจึงทริกเกอร์อีกครั้ง ทุกครั้งที่มีการเพิ่มรายการย่อยใหม่ลงในเส้นทางที่ระบุ ผู้ฟังคือ ส่งสแนปชอตที่มีข้อมูลของผู้เผยแพร่โฆษณาย่อยใหม่
child_changed ฟังการเปลี่ยนแปลงของรายการ เหตุการณ์นี้จะถูกทริกเกอร์ทุกครั้งที่มีการแก้ไขโหนดย่อย ซึ่งรวมถึง การแก้ไขรายการสืบทอดของโหนดย่อย สแนปชอตผ่าน ใน Listener เหตุการณ์จะมีข้อมูลที่อัปเดตสำหรับผู้เผยแพร่โฆษณาย่อย
child_removed คอยฟังรายการที่ถูกนำออก เหตุการณ์นี้จะเกิดขึ้นเมื่อ นำรายการย่อยทันทีออกแล้ว สแนปชอตที่ส่งไปยังบล็อก Callback มีข้อมูลย่อยที่นำออกไปแล้ว
child_moved คอยฟังการเปลี่ยนแปลงลำดับของรายการในรายการที่เรียงลำดับ child_moved เหตุการณ์จะเป็นไปตาม child_changed เหตุการณ์ที่ทำให้เกิดการสั่งซื้อรายการ เปลี่ยนแปลง (ขึ้นอยู่กับลำดับวิธีการปัจจุบัน)

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

Web

import { getDatabase, ref, onChildAdded, onChildChanged, onChildRemoved } from "firebase/database";

const db = getDatabase();
const commentsRef = ref(db, 'post-comments/' + postId);
onChildAdded(commentsRef, (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

onChildChanged(commentsRef, (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

onChildRemoved(commentsRef, (data) => {
  deleteComment(postElement, data.key);
});

Web

var commentsRef = firebase.database().ref('post-comments/' + postId);
commentsRef.on('child_added', (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_changed', (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_removed', (data) => {
  deleteComment(postElement, data.key);
});

ฟังเหตุการณ์ที่มีคุณค่า

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

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

แม้ว่าข้อความค้นหาจะมีผลลัพธ์ที่ตรงกันเพียงรายการเดียว แต่ภาพรวมก็ยังคงเป็น list; จะมีแค่รายการเดียว หากต้องการเข้าถึงรายการ คุณจะต้องวนซ้ำ มากกว่าผลลัพธ์:

Web

import { getDatabase, ref, onValue } from "firebase/database";

const db = getDatabase();
const dbRef = ref(db, '/a/b/c');

onValue(dbRef, (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    const childKey = childSnapshot.key;
    const childData = childSnapshot.val();
    // ...
  });
}, {
  onlyOnce: true
});

Web

ref.once('value', (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    var childKey = childSnapshot.key;
    var childData = childSnapshot.val();
    // ...
  });
});

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

การจัดเรียงและกรองข้อมูล

คุณสามารถใช้คลาส Realtime Database Query เพื่อดึงข้อมูลที่จัดเรียงตาม คีย์ ตามค่า หรือตามค่าของรายการย่อย และคุณยังกรอง ผลการค้นหาที่จัดเรียงไปยังผลลัพธ์จำนวนหนึ่งๆ หรือช่วงของคีย์ หรือ

จัดเรียงข้อมูล

หากต้องการเรียกดูข้อมูลที่จัดเรียงแล้ว ให้เริ่มด้วยการระบุวิธีการเรียงลำดับตาม ระบุลำดับของผลลัพธ์:

วิธีการ การใช้งาน
orderByChild() เรียงลำดับผลลัพธ์ตามค่าของคีย์ย่อยที่ระบุหรือเส้นทางย่อยที่ซ้อนกัน
orderByKey() เรียงลำดับผลการค้นหาตามคีย์ย่อย
orderByValue() เรียงลำดับผลลัพธ์ตามค่าย่อย

คุณใช้วิธีสั่งซื้อได้ครั้งละ 1 วิธีเท่านั้น การเรียกใช้วิธีการสั่งซื้อ การค้นหาเดียวกันหลายครั้งทำให้เกิดข้อผิดพลาด

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

Web

import { getDatabase, ref, query, orderByChild } from "firebase/database";
import { getAuth } from "firebase/auth";

const db = getDatabase();
const auth = getAuth();

const myUserId = auth.currentUser.uid;
const topUserPostsRef = query(ref(db, 'user-posts/' + myUserId), orderByChild('starCount'));

Web

var myUserId = firebase.auth().currentUser.uid;
var topUserPostsRef = firebase.database().ref('user-posts/' + myUserId).orderByChild('starCount');

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

การเรียกเมธอด orderByChild() จะระบุคีย์ย่อยเพื่อเรียงลำดับ ผลลัพธ์ตาม ในกรณีนี้ ระบบจะจัดเรียงโพสต์ตามค่าของโพสต์ ผู้เผยแพร่โฆษณาย่อย "starCount" ที่เกี่ยวข้อง คำค้นหาสามารถเรียงลำดับตามการซ้อน สำหรับเด็ก ในกรณีที่คุณมีข้อมูลที่มีลักษณะดังนี้

"posts": {
  "ts-functions": {
    "metrics": {
      "views" : 1200000,
      "likes" : 251000,
      "shares": 1200,
    },
    "title" : "Why you should use TypeScript for writing Cloud Functions",
    "author": "Doug",
  },
  "android-arch-3": {
    "metrics": {
      "views" : 900000,
      "likes" : 117000,
      "shares": 144,
    },
    "title" : "Using Android Architecture Components with Firebase Realtime Database (Part 3)",
    "author": "Doug",
  }
},

ในกรณีนี้ เราสามารถเรียงลำดับองค์ประกอบรายการของเราตามค่าที่ซ้อนอยู่ใต้ metrics โดยระบุเส้นทางที่เกี่ยวข้องไปยังแท็กย่อยที่ซ้อนกันใน orderByChild() สาย

Web

import { getDatabase, ref, query, orderByChild } from "firebase/database";

const db = getDatabase();
const mostViewedPosts = query(ref(db, 'posts'), orderByChild('metrics/views'));

Web

var mostViewedPosts = firebase.database().ref('posts').orderByChild('metrics/views');

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีเรียงลำดับข้อมูลประเภทอื่นๆ ดูวิธีเรียงลำดับข้อมูลคำค้นหา

การกรองข้อมูล

ในการกรองข้อมูล คุณสามารถรวมวิธีการจำกัดหรือช่วงเข้ากับ ตามลำดับเมื่อสร้าง Query

วิธีการ การใช้งาน
limitToFirst() กำหนดจำนวนรายการสูงสุดที่จะส่งคืนตั้งแต่ต้น รายการผลลัพธ์ตามลำดับ
limitToLast() กำหนดจำนวนสินค้าสูงสุดที่จะส่งคืนจากสิ้นสุดสินค้าที่สั่งซื้อ รายการผลลัพธ์
startAt() แสดงรายการที่มากกว่าหรือเท่ากับคีย์หรือค่าที่ระบุ ขึ้นอยู่กับวิธีการเรียงลำดับที่เลือกไว้
startAfter() แสดงรายการที่มากกว่าคีย์หรือค่าที่ระบุ ขึ้นอยู่กับวิธีการเรียงลำดับที่เลือกไว้
endAt() แสดงรายการที่น้อยกว่าหรือเท่ากับคีย์หรือค่าที่ระบุ ขึ้นอยู่กับวิธีการเรียงลำดับที่เลือกไว้
endBefore() แสดงรายการที่น้อยกว่าคีย์หรือค่าที่ระบุ ขึ้นอยู่กับวิธีการเรียงลำดับที่เลือกไว้
equalTo() แสดงรายการผลการค้นหาเท่ากับคีย์หรือค่าที่ระบุ โดยขึ้นอยู่กับ เลือกลำดับตามวิธีการ

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

จำกัดจำนวนผลการค้นหา

คุณสามารถใช้เมธอด limitToFirst() และ limitToLast() เพื่อตั้งค่า จำนวนรายการย่อยสูงสุดที่จะซิงค์สำหรับเหตุการณ์หนึ่งๆ ตัวอย่างเช่น หาก คุณใช้ limitToFirst() เพื่อตั้งขีดจำกัด 100 รายการ ในตอนแรกคุณจะได้รับเฉพาะ เหตุการณ์ child_added ถึง 100 เหตุการณ์ หากมีรายการที่จัดเก็บไม่ถึง 100 รายการใน ฐานข้อมูล Firebase เหตุการณ์ child_added จะเริ่มทำงานสำหรับแต่ละรายการ

เมื่อรายการเปลี่ยนแปลง คุณจะได้รับเหตุการณ์ child_added สําหรับสินค้าที่เข้าสู่ คำค้นหาและเหตุการณ์ child_removed รายการสำหรับรายการที่ไม่อยู่ในรายการเพื่อให้ จำนวนทั้งหมดจะอยู่ที่ 100

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

Web

import { getDatabase, ref, query, limitToLast } from "firebase/database";

const db = getDatabase();
const recentPostsRef = query(ref(db, 'posts'), limitToLast(100));

Web

var recentPostsRef = firebase.database().ref('posts').limitToLast(100);

ตัวอย่างนี้ระบุเฉพาะคำค้นหาเพื่อซิงค์ข้อมูลที่ต้องการ มีผู้ฟังแนบมาด้วย

กรองตามคีย์หรือค่า

คุณจะใช้ startAt(), startAfter(),endAt(), endBefore() และ equalTo() เพื่อเลือกจุดเริ่มต้น สิ้นสุด และจุดสมมูลที่กำหนดเองสำหรับ การค้นหา ซึ่งอาจเป็นประโยชน์สำหรับการใส่เลขหน้าให้กับข้อมูลหรือค้นหารายการที่มีเด็กอยู่ด้วย ที่มีค่าเฉพาะเจาะจง

วิธีเรียงลำดับข้อมูลข้อความค้นหา

ส่วนนี้จะอธิบายวิธีการจัดเรียงข้อมูลตามวิธีการเรียงลำดับแต่ละวิธีใน Query ชั้นเรียน

orderByChild

เมื่อใช้ orderByChild() ข้อมูลที่มีคีย์ย่อยที่ระบุจะเป็น มีลำดับดังนี้

  1. เด็กที่มีค่า null สำหรับคีย์ย่อยที่ระบุมาแล้ว ก่อน
  2. ผู้เผยแพร่โฆษณาย่อยที่มีค่าเป็น false สำหรับคีย์ย่อยที่ระบุ พบกันใหม่ หากเด็กหลายคนมีค่าเป็น false จำนวนจะเป็น จัดเรียงพจนานุกรมตามคีย์
  3. ผู้เผยแพร่โฆษณาย่อยที่มีค่าเป็น true สำหรับคีย์ย่อยที่ระบุ พบกันใหม่ หากเด็กหลายคนมีค่าเป็น true จำนวนจะเป็น จัดเรียงแบบพจนานุกรมตามคีย์
  4. เด็กที่มีค่าตัวเลขจะแสดงอยู่ถัดไปโดยเรียงลำดับจากน้อยไปหามาก ถ้า เด็กหลายคนมีค่าตัวเลขเหมือนกันสำหรับผู้เผยแพร่โฆษณาย่อยที่ระบุ โหนดจะจัดเรียงตามคีย์
  5. สตริงอยู่หลังตัวเลขและจัดเรียงแบบพจนานุกรมจากน้อยไปมาก คำสั่งซื้อ กรณีที่รายการย่อยหลายรายการมีค่าเหมือนกันสำหรับรายการย่อยที่ระบุ โหนดจะเรียงลำดับแบบพจนานุกรมตามคีย์
  6. ออบเจ็กต์อยู่ท้ายสุดและจัดเรียงแบบพจนานุกรมตามคีย์ในลำดับจากน้อยไปมาก

orderByKey

เมื่อใช้ orderByKey() เพื่อจัดเรียงข้อมูล ระบบจะส่งข้อมูลจากน้อยไปมาก ตามคีย์

  1. เด็กที่มีคีย์ซึ่งแยกวิเคราะห์ได้เป็นจำนวนเต็ม 32 บิตจะมีอยู่ก่อนแล้วโดยจัดเรียงจากน้อยไปมาก
  2. เด็กที่มีค่าสตริงเป็นคีย์ถัดไป ซึ่งจัดเรียงแบบพจนานุกรมจากน้อยไปมาก

orderByValue

เมื่อใช้ orderByValue() ระบบจะเรียงลำดับรายการย่อยตามค่า การจัดลำดับ เกณฑ์จะเหมือนกับใน orderByChild() ยกเว้นค่าของโหนดคือ ที่ใช้แทนค่าของคีย์ย่อยที่ระบุ

ปลดผู้ฟังออก

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

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

การเรียกใช้ off() บน Listener หลักไม่ได้ นำ Listener ที่ลงทะเบียนไว้ในโหนดย่อยออกโดยอัตโนมัติ ต้องเรียก off() ใน Listener ที่เป็นเด็กด้วย เพื่อนำการติดต่อกลับ

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