Đọc và ghi dữ liệu trên web

(Không bắt buộc) Tạo nguyên mẫu và thử nghiệm bằng Bộ mô phỏng cục bộ của Firebase

Trước khi nói về cách ứng dụng đọc và ghi vào Cơ sở dữ liệu theo thời gian thực, hãy giới thiệu một bộ công cụ mà bạn có thể dùng để tạo nguyên mẫu và kiểm thử chức năng của Cơ sở dữ liệu theo thời gian thực: Bộ công cụ trình mô phỏng cục bộ Firebase. Nếu bạn đang dùng thử nhiều mô hình dữ liệu, việc tối ưu hoá các quy tắc bảo mật hoặc tìm cách tương tác hiệu quả nhất về chi phí với phần phụ trợ, thì việc có thể làm việc cục bộ mà không cần triển khai dịch vụ trực tiếp có thể là ý tưởng hay.

Trình mô phỏng Cơ sở dữ liệu theo thời gian thực là một phần của Bộ trình mô phỏng cục bộ. Bộ mô phỏng này cho phép ứng dụng của bạn tương tác với nội dung và cấu hình của cơ sở dữ liệu được mô phỏng, cũng như các tài nguyên dự án được mô phỏng (các hàm, cơ sở dữ liệu khác và quy tắc bảo mật) (không bắt buộc).

Việc sử dụng trình mô phỏng Cơ sở dữ liệu theo thời gian thực chỉ bao gồm một vài bước:

  1. Thêm một dòng mã vào cấu hình kiểm thử của ứng dụng để kết nối với trình mô phỏng.
  2. Trên gốc của thư mục dự án cục bộ, chạy firebase emulators:start.
  3. Thực hiện lệnh gọi từ mã nguyên mẫu của ứng dụng bằng cách sử dụng SDK nền tảng Cơ sở dữ liệu theo thời gian thực như thường lệ hoặc sử dụng API REST của cơ sở dữ liệu theo thời gian thực.

Bạn có thể tham khảo hướng dẫn chi tiết về Cơ sở dữ liệu theo thời gian thực và Hàm đám mây. Bạn cũng nên xem Giới thiệu về Bộ công cụ mô phỏng cục bộ.

Lấy tham chiếu cơ sở dữ liệu

Để đọc hoặc ghi dữ liệu từ cơ sở dữ liệu, bạn cần có một thực thể của firebase.database.Reference:

API mô-đun web

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

API không gian tên trên web

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

Ghi dữ liệu

Tài liệu này trình bày các thông tin cơ bản về cách truy xuất dữ liệu, cách sắp xếp và lọc dữ liệu Firebase.

Bạn có thể truy xuất dữ liệu Firebase bằng cách đính kèm một trình nghe không đồng bộ vào firebase.database.Reference. Trình nghe được kích hoạt một lần cho trạng thái ban đầu của dữ liệu và kích hoạt lại bất cứ khi nào dữ liệu thay đổi.

Thao tác ghi cơ bản

Đối với các thao tác ghi cơ bản, bạn có thể sử dụng set() để lưu dữ liệu vào một tệp đối chiếu đã chỉ định, thay thế mọi dữ liệu hiện có trong đường dẫn đó. Ví dụ: ứng dụng blog mạng xã hội có thể thêm người dùng có set() như sau:

API mô-đun 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

API không gian tên trên web

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

Việc sử dụng set() sẽ ghi đè dữ liệu tại vị trí được chỉ định, bao gồm cả mọi nút con.

Đọc dữ liệu

Theo dõi các sự kiện giá trị

Để đọc dữ liệu tại một đường dẫn và theo dõi các thay đổi, hãy sử dụng onValue() để quan sát các sự kiện. Bạn có thể sử dụng sự kiện này để đọc thông tin tổng quan nhanh về nội dung tĩnh tại một đường dẫn nhất định, vì các thông tin này đã tồn tại tại thời điểm diễn ra sự kiện. Phương thức này được kích hoạt một lần khi trình nghe được đính kèm và lặp lại mỗi khi dữ liệu (bao gồm cả phần tử con) thay đổi. Lệnh gọi lại sự kiện được truyền một ảnh chụp nhanh chứa tất cả dữ liệu ở vị trí đó, bao gồm cả dữ liệu con. Nếu không có dữ liệu, bản tổng quan nhanh sẽ trả về false khi bạn gọi exists() và null khi bạn gọi val() trên đó.

Ví dụ sau minh hoạ một ứng dụng viết blog trên mạng xã hội truy xuất số sao của một bài đăng từ cơ sở dữ liệu:

API mô-đun 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

API không gian tên trên web

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

Trình nghe nhận một snapshot chứa dữ liệu tại vị trí được chỉ định trong cơ sở dữ liệu vào thời điểm diễn ra sự kiện. Bạn có thể truy xuất dữ liệu trong snapshot bằng phương thức val().

Đọc dữ liệu một lần

Đọc dữ liệu một lần bằng get()

SDK được thiết kế để quản lý các hoạt động tương tác với máy chủ cơ sở dữ liệu cho dù ứng dụng của bạn là trực tuyến hay ngoại tuyến.

Nhìn chung, bạn nên sử dụng các kỹ thuật sự kiện giá trị được mô tả ở trên để đọc dữ liệu và nhận thông báo về nội dung cập nhật đối với dữ liệu từ phần phụ trợ. Kỹ thuật trình nghe giúp giảm mức sử dụng và thanh toán, đồng thời được tối ưu hoá để mang lại cho người dùng trải nghiệm tốt nhất khi họ truy cập trực tuyến và ngoại tuyến.

Nếu chỉ cần dữ liệu một lần, bạn có thể sử dụng get() để lấy thông tin tổng quan nhanh về dữ liệu từ cơ sở dữ liệu. Nếu vì bất kỳ lý do gì mà get() không thể trả về giá trị máy chủ, thì ứng dụng sẽ thăm dò bộ nhớ đệm lưu trữ cục bộ và trả về lỗi nếu vẫn không tìm thấy giá trị đó.

Việc sử dụng get() không cần thiết có thể làm tăng mức sử dụng băng thông và dẫn đến giảm hiệu suất. Bạn có thể ngăn chặn điều này bằng cách sử dụng trình nghe theo thời gian thực như trình bày ở trên.

API mô-đun 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

API không gian tên trên 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

Đọc dữ liệu một lần với trình quan sát

Trong một số trường hợp, bạn có thể muốn trả về giá trị từ bộ nhớ đệm cục bộ ngay lập tức, thay vì kiểm tra giá trị đã cập nhật trên máy chủ. Trong những trường hợp đó, bạn có thể sử dụng once() để lấy dữ liệu từ bộ nhớ đệm của ổ đĩa cục bộ ngay lập tức.

Điều này hữu ích đối với dữ liệu chỉ cần tải một lần và không có dự kiến sẽ thay đổi thường xuyên hoặc yêu cầu chủ động nghe. Ví dụ: ứng dụng viết blog trong các ví dụ trước sử dụng phương thức này để tải hồ sơ của người dùng khi họ bắt đầu viết bài mới:

API mô-đun 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

API không gian tên trên 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

Cập nhật hoặc xoá dữ liệu

Cập nhật các trường cụ thể

Để ghi đồng thời vào các nút con cụ thể của một nút mà không ghi đè các nút con khác, hãy sử dụng phương thức update().

Khi gọi update(), bạn có thể cập nhật các giá trị con cấp thấp hơn bằng cách chỉ định đường dẫn cho khoá. Nếu dữ liệu được lưu trữ ở nhiều vị trí để mở rộng quy mô tốt hơn, bạn có thể cập nhật tất cả các thực thể của dữ liệu đó bằng cách sử dụng tính năng chia nhỏ dữ liệu.

Ví dụ: ứng dụng viết blog trên mạng xã hội có thể tạo bài đăng và đồng thời cập nhật bài đăng đó lên nguồn cấp dữ liệu hoạt động gần đây và nguồn cấp dữ liệu hoạt động của người dùng đăng bằng cách sử dụng mã như sau:

API mô-đun 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

API không gian tên trên 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

Ví dụ này sử dụng push() để tạo một bài đăng trong nút chứa các bài đăng cho tất cả người dùng tại /posts/$postid và truy xuất khoá cùng lúc. Sau đó, bạn có thể dùng khoá này để tạo mục nhập thứ hai trong bài đăng của người dùng tại /user-posts/$userid/$postid.

Khi sử dụng các đường dẫn này, bạn có thể cập nhật đồng thời nhiều vị trí trong cây JSON bằng một lệnh gọi đến update(), chẳng hạn như cách ví dụ này tạo bài đăng mới ở cả hai vị trí. Các bản cập nhật đồng thời được thực hiện theo cách này có tính nguyên tử: tất cả các bản cập nhật đều thành công hoặc tất cả các bản cập nhật đều không thành công.

Thêm một lệnh gọi lại hoàn thành

Nếu muốn biết thời điểm dữ liệu của bạn đã được cam kết, bạn có thể thêm lệnh gọi lại hoàn tất. Cả set() và update() đều thực hiện lệnh gọi lại hoàn thành (không bắt buộc) được gọi khi quá trình ghi được xác nhận với cơ sở dữ liệu. Nếu lệnh gọi không thành công, lệnh gọi lại sẽ được truyền một đối tượng lỗi cho biết lý do xảy ra lỗi.

API mô-đun 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

API không gian tên trên 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

Xóa dữ liệu

Cách đơn giản nhất để xoá dữ liệu là gọi remove() trên một tham chiếu đến vị trí của dữ liệu đó.

Bạn cũng có thể xoá bằng cách chỉ định null làm giá trị cho một thao tác ghi khác, chẳng hạn như set() hoặc update(). Bạn có thể sử dụng kỹ thuật này với update() để xoá nhiều phần tử con trong một lệnh gọi API.

Nhận một Promise

Để biết thời điểm dữ liệu của bạn được gửi đến máy chủ Cơ sở dữ liệu theo thời gian thực của Firebase, bạn có thể sử dụng Promise. Cả set() và update() đều có thể trả về một Promise mà bạn có thể sử dụng để biết thời điểm ghi được cam kết với cơ sở dữ liệu.

Tách trình nghe

Các lệnh gọi lại sẽ bị xoá bằng cách gọi phương thức off() trong tệp tham chiếu cơ sở dữ liệu Firebase của bạn.

Bạn có thể xoá một trình nghe bằng cách truyền trình nghe đó dưới dạng tham số đến off(). Việc gọi off() trên vị trí không có đối số sẽ xoá tất cả trình nghe tại vị trí đó.

Việc gọi off() trên trình nghe gốc không tự động xoá trình nghe đã đăng ký trên các nút con; off() cũng phải được gọi trên mọi trình nghe con để loại bỏ lệnh gọi lại.

Lưu dữ liệu dưới dạng giao dịch

Khi làm việc với dữ liệu có thể bị hỏng do các thao tác sửa đổi đồng thời (chẳng hạn như bộ đếm tăng dần), bạn có thể sử dụng thao tác giao dịch. Bạn có thể cung cấp cho toán tử này một hàm cập nhật và một lệnh gọi lại hoàn tất không bắt buộc. Hàm cập nhật lấy trạng thái hiện tại của dữ liệu làm đối số và trả về trạng thái mong muốn mới mà bạn muốn ghi. Nếu một ứng dụng khác ghi vào vị trí đó trước khi viết thành công giá trị mới, thì hàm cập nhật của bạn sẽ được gọi lại bằng giá trị hiện tại mới và thao tác ghi sẽ được thử lại.

Ví dụ: trong ứng dụng viết blog qua mạng xã hội mẫu, bạn có thể cho phép người dùng gắn dấu sao và bỏ gắn dấu sao bài đăng, đồng thời theo dõi số sao mà một bài đăng đã nhận được như sau:

API mô-đun 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

API không gian tên trên 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

Việc sử dụng giao dịch sẽ giúp số sao không bị chính xác trong trường hợp nhiều người dùng gắn dấu sao cho cùng một bài đăng cùng lúc hoặc ứng dụng có dữ liệu lỗi thời. Nếu giao dịch bị từ chối, máy chủ sẽ trả về giá trị hiện tại cho máy khách, thao tác này sẽ chạy lại giao dịch với giá trị đã cập nhật. Thao tác này lặp lại cho đến khi giao dịch được chấp nhận hoặc bạn huỷ giao dịch.

Số gia ở phía máy chủ nguyên tử

Trong trường hợp sử dụng trên, chúng tôi ghi hai giá trị vào cơ sở dữ liệu: mã nhận dạng của người dùng gắn dấu sao/bỏ gắn dấu sao bài đăng và số sao tăng dần. Nếu đã biết rằng người dùng đang gắn dấu sao bài đăng, chúng ta có thể sử dụng phép toán tăng dần nguyên tử thay vì giao dịch.

API mô-đun 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

API không gian tên trên 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

Mã này không sử dụng hoạt động giao dịch, vì vậy, mã không tự động chạy lại nếu có nội dung cập nhật xung đột. Tuy nhiên, vì thao tác tăng dần diễn ra trực tiếp trên máy chủ cơ sở dữ liệu nên sẽ không có khả năng xảy ra xung đột.

Nếu muốn phát hiện và từ chối các xung đột dành riêng cho ứng dụng, chẳng hạn như người dùng gắn dấu sao một bài đăng mà họ đã gắn dấu sao trước đó, thì bạn nên viết các quy tắc bảo mật tuỳ chỉnh cho trường hợp sử dụng đó.

Làm việc với dữ liệu khi không có mạng

Nếu ứng dụng mất kết nối mạng, ứng dụng của bạn sẽ tiếp tục hoạt động bình thường.

Mỗi ứng dụng được kết nối với cơ sở dữ liệu Firebase đều duy trì phiên bản nội bộ riêng của mọi dữ liệu đang hoạt động. Khi được ghi, dữ liệu sẽ được ghi vào phiên bản cục bộ này trước tiên. Sau đó, ứng dụng Firebase sẽ đồng bộ hoá dữ liệu đó với các máy chủ cơ sở dữ liệu từ xa và với các ứng dụng khác trên cơ sở "nỗ lực tối đa".

Do đó, tất cả các lượt ghi vào cơ sở dữ liệu sẽ kích hoạt các sự kiện cục bộ ngay lập tức, trước khi bất kỳ dữ liệu nào được ghi vào máy chủ. Tức là ứng dụng của bạn vẫn thích ứng bất kể độ trễ hoặc khả năng kết nối của mạng.

Sau khi kết nối được thiết lập lại, ứng dụng của bạn sẽ nhận được nhóm sự kiện thích hợp để ứng dụng đồng bộ hoá với trạng thái máy chủ hiện tại mà không phải viết bất kỳ mã tuỳ chỉnh nào.

Chúng ta sẽ nói thêm về hành vi ngoại tuyến trong bài viết Tìm hiểu thêm về các tính năng trực tuyến và ngoại tuyến.

Các bước tiếp theo