使用 RxJS 连接 Firebase 实时数据库
Firebase 是 Google 提供的一套后端服务工具，其中实时数据库（Realtime Database）是一个实时的 NoSQL 数据库，可被轻松地集成到 Web 和移动应用程序中。使用 Firebase 实时数据库，我们可以从多个客户端实时读取和写入数据。而 RxJS 则是一个流处理库，使得异步流程的编写更加直观、可读。本文将介绍如何使用 RxJS 来连接 Firebase 实时数据库。
如何连接 Firebase 实时数据库？
使用 RxJS 连接 Firebase 实时数据库需要安装 firebase 和 rxjs 依赖。可以使用 npm 安装它们：
npm install firebase rxjs然后，我们需要初始化 Firebase 实例。初始化实例需要 Firebase 配置信息，可以在 Firebase 控制台中获取。在初始化实例后，我们可以通过 ref() 方法引用实时数据库的特定路径。
-- -------------------- ---- ------- ------ - -- -------- ---- ----------- ------ - ---------- - ---- ------- -- --- -------- -- ----- ------ - - ------- ----------- ----------- --------------- ------------ ---------------- ---------- -------------- -------------- ------------------ ------------------ --------------------- -- ------------------------------- -- ------- ----- -------- - -------------------- ----- -------- - ----------------------展开代码
拥有 itemsRef 引用后，我们可以进行以下操作：
- 读取实时数据库的值
- 写入实时数据库的值
- 监听实时数据库的变化
接下来我们将分别介绍这些操作的方法并提供示例代码。
如何读取实时数据库的值？
要读取实时数据库的值，我们可以调用 valueChanges() 方法。该方法返回一个 Observable 对象，我们可以使用 subscribe() 方法订阅它，以便在值发生变化时获取通知。
-- -------------------- ---- ------- -- --------- ----- ------ - -------------------------- -- - -------------------- -------- -- - ------------------------------ --- --- -- ----------- ---------------------- -- - ------------------- ---展开代码
以上代码中的 items$ 正在监听实时数据库上的 items 路径。on() 方法将在初始值加载完毕时被调用，并且每当改变该路径的值时它会再次被调用。snapshot.val() 输出当前路径下的值给 observer.next()，从而触发 subscribe() 方法中的回调函数。
或者，您也可以使用 from() 方法，直接转换为Observable：
-- -------------------- ---- ------- ------ - ---- - ---- ------- -- --------- ----- ------ - ------------------------------ -- ----------- ---------------------- -- - ------------------- ---展开代码
如何写入实时数据库的值？
要写入实时数据库的值，我们可以使用 set() 方法。我们可以将值作为参数传递给该方法。该方法将覆盖路径下的任何现有数据。
// 写入实时数据库的值 itemsRef.set({ name: 'Apple', price: 1 });
以上代码将向实时数据库的 items 路径写入 {name: 'Apple', price: 1}。若你想添加一条新的记录，请使用 push() 方法。
// 添加一条新的记录 const newItemRef = itemsRef.push(); newItemRef.set({ name: 'Banana', price: 1.5 });
如何监听实时数据库的变化？
如果您想监听实时数据库的变化，我们可以使用 child_added、child_changed、child_removed 事件。这些事件能够告诉我们何时发生了某个事件并发生了什么。我们也可以使用 on() 方法监听这些事件。
-- -------------------- ---- ------- -- -- ------------- -- -------------------------- -------- -- - ----- ---- - --------------- ------------------ --- -- -- --------------- -- ---------------------------- -------- -- - ----- ---- - --------------- ------------------ --- -- -- --------------- -- ---------------------------- -------- -- - ----- ---- - --------------- ------------------ ---展开代码
或剖析该事件的值，然后用 Observable 表示它，使得开发者能够处理数据流：
-- -------------------- ---- ------- -- -- ------------- -- ----- ----------- - -------------------------- -- - -------------------------- -------- -- - --------------- ----- -------------- -------- -------------- --- -- --- -- -- --------------- -- ----- ------------- - -------------------------- -- - ---------------------------- -------- -- - --------------- ----- ---------------- -------- -------------- --- -- --- -- -- --------------- -- ----- ------------- - -------------------------- -- - ---------------------------- -------- -- - --------------- ----- ---------------- -------- -------------- --- -- --- -- -------- ----- ------------ - -------------------------------- --------------- ---------------------------- -- - ----------------------- --------------- ---展开代码
以上代码中，我们使用 Observable.create() 创建三个不同的 Observable 来监听 child_added、child_changed 和 child_removed 事件。每个 Observable 都使用 observer.next() 发出一个事件对象，该对象具有一个 type 属性和一个 payload 属性。 merge() 方法将三个 Observable 合并为一个 Observable，从而让我们处理所有的事件流。
这样，您就已经可以通过 RxJS 操作 Firebase 实时数据库了！注意，在使用 on() 方法时要确保您实现了对应的 off() 方法，以避免内存泄漏。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c818c0e46428fe9ee1a5e1
