在客户端代码

时间:2018-06-21 06:38:56

标签: angular typescript firebase ionic3 google-cloud-firestore

您能告诉我如何在客户端代码(.ts文件)中检测Firestore db节点中的更改吗?我知道如何使用云功能做到这一点。但是如何在客户端代码中做到这一点?

Firestore节点: projects/{id}/transactions/

我的要求是: 如果以上节点上有任何更改,我需要升级提供商的(即projectProvider)共享属性值。我该怎么办?

例如:

onWrite事件非常适合我的用例。但是如何在客户端.ts文件中实现它?

这是node.js云功能的实现。如何在客户端.ts文件上实现这种实现?

// Listen for any change on document `marie` in collection `users`
exports.myFunctionName = functions.firestore
    .document('users/marie').onWrite((change, context) => {
      // ... Your code here
    });

注意: :我在angularfire2应用中使用了ionic 3

2 个答案:

答案 0 :(得分:1)

部分解决方案

以下代码将使您可以侦听单个集合。当前无法收听多个项目文档中的子集合。最好的解决方案是对数据模型进行非规范化,以便拥有一个名为projectTransactions的集合,并使用projectId字段过滤客户端查询,并使用安全规则强制进行访问。

代码使用docChanges方法,该方法允许您仅查看对集合所做的更改,而不必浏览每个文档。 "View changes between snapshots" section of the documentation讨论时会讨论这种方法

  

通常可以查看查询快照之间查询结果的实际变化,而不是简单地使用整个查询快照。

const firebase = require('firebase');
require("firebase/firestore");

// Initialize Firebase
let config = {
  apiKey: "*** Your API key ***",
  authDomain: "*** Your Auth domain ***",
  databaseURL: "*** Your database URL ***",
  projectId: "*** Your project ID ***",
  messagingSenderId: "*** Your Messaging Sender ID ***"
};
firebase.initializeApp(config);

let email = 'my.name@example.com';
let password = 'myExamplePassword';

firebase.auth().signInWithEmailAndPassword(email, password)
  .catch(error => {
    console.log(error);
  });

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.log('I am logged in');

    // Initialise Firestore
    const firestore = firebase.firestore();
    const settings = {timestampsInSnapshots: true};
    firestore.settings(settings);

    return firestore
    .collection('projectTransactions')
    .onSnapshot((querySnapshot) => {
      console.log('Listening to the projectTransactions collection');
      querySnapshot.docChanges().forEach((change) => {

        // A new transaction has been added
        if (change.type === 'added') {
          console.log(`A new transaction has been added with ID: ${change.doc.id}`);
        }

        // A transaction has been deleted
        if (change.type === 'removed') {
            console.log(`A transaction has been removed with ID: ${change.doc.id}`);
        }

      });
    });

  } else {
    // User is signed out.
    // ...
  }
});

答案 1 :(得分:0)

我的解决方案

第1步。在firestore中,为您要通知客户端的任何信息制作一个通知文档。像这样:

db.collection('notifications').doc('transactionHappened').set({/*your transaction details*/});

第2步。注册到您的通知文档并收听,例如当您在编写交易文档时,还要将最新的交易信息写入到transactionHappened文档中:

const yourHandler = data=>{/*handle your notification details here*/};
db.collection('notifications').doc('transactionHappened').onSnapshot(yourHandler);

第3步。现在onSnapshot已注册,但是如果您的应用已断开连接,则在此期间它不会捕获任何通知。让我们处理一下。

const reconnectHandler =()=>{/*you were offline, so read whatever you need from firestore to cath up with the latest data*/};
const disconnectHandler =()=>{/*display something on your screen to indicate it is offline*/};
const monitorNetwork=()=> {
    let status = true;
    const timeout = ()=> setTimeout(()=>{
        if(status !== navigator.onLine) {
            status = navigator.onLine;
            console.log(`Network is ${status? 'up ?':'down ?'}`);
            if (status) { //if network is flipped to online
                reconnectHandler();
            } else {//just went offline
                disconnectHandler();
            }
        }
        timeout();
    }, 1000);
    timeout();
}

上面的小功能将每1秒钟为您创建一个心跳,以监视您的网络状态。