通过 Node.js 从 Firestore 实时更新答案

【问题标题】：Realtime updates from Firestore via Node.js通过 Node.js 从 Firestore 实时更新
【发布时间】：2021-10-26 05:12:36
【问题描述】：

我想知道是否可以在文档更改时更新我的应用程序？我有一个餐厅用户，他有一个潜在的奖励商店。在视图上，用户可以向他们的奖励商店添加和删除奖励。现在我已经构建了允许用户删除他们的奖励的功能。但是，我需要刷新页面才能显示更改。我想知道是否有办法通过 Firestore 实时更新数据。我看过一些视频，这些视频解释了如何在客户端执行此操作。但是，我的 Firestore 数据库调用发生在服务器上，我不确定如何从中实时更新奖励存储。

这是我在客户端添加删除功能的客户端代码。它会调用我的 Node.js 服务器，该服务器将删除餐厅奖励商店中的项目。

注意奖励列表是从服务器获取的，并通过 HTML 把手从服务器传递到客户端到特定视图中。我关心的是我是否应该从前端而不是后端进行这些数据库调用。

for(var i = 0; i < rewardDeleteButtons.length; i++) {
    var deleteButton = rewardDeleteButtons[i]
    deleteButton.addEventListener('click', function(e) {
        console.log(document.cookie)
        console.log(this.value)
        fetch("/deleteReward/" + this.value, {
            method: "DELETE",
            headers: {
              Accept: "application/json",
              "Content-Type": "application/json",
              "CSRF-Token": Cookies.get("XSRF-TOKEN"),
            },
          });
    })
}

这是我服务器中的代码，用于从餐厅的奖励商店中删除该项目。刷新页面后，更改就会显示，但我不知道如何实时显示更改。

app.delete('/deleteReward/:id', (req, res) => {
  console.log('\n\n\n\nInside delete\n\n\n\n')
  console.log(req.params.id)

  var rewardId = req.params.id

  const sessionCookie = req.cookies.session || "";

  var idToken = ""
  var type = ""
  if (sessionCookie) {
    idToken = sessionCookie['idToken']
    type = sessionCookie['type']
  }

  console.log("Printing session cookie")
  console.log(sessionCookie)
  admin
    .auth()
    .verifySessionCookie(idToken, true /** checkRevoked */)
    .then((decodedClaims) => {
      console.log(decodedClaims.user_id)
      deleteReward(decodedClaims.user_id, rewardId)
    })
    .catch((error) => {
      console.log(error)
    });
})

function deleteReward(restaurantId, rewardId) {
  getRestaurant('KOBmyfQEu4urNGgBTuiJ').then(data => {
    console.log(data.rewards)
    db.collection(restaurantCollection).doc('KOBmyfQEu4urNGgBTuiJ').update({
      'rewards': FieldValue.arrayRemove({ item_points: 20, item_id: 1, item_name: 'Free Meal' })
    })
  })
}

【问题讨论】：

也许，您可以使用res.send() 从DELETE /deleteReward/ 路径发回更新的数据，然后使用新数据在客户端重新渲染页面？
@theusaf 重新渲染页面需要刷新页面吗？
不一定。您可以在前端使用 javascript 解析新数据并仅替换需要重新渲染的元素。
@theusaf 你知道我如何从响应中获取数据吗？假设我使用 res.json(key:value) 发送数据。在前端，我得到了一个承诺，例如 promise=fetch(url...)。我如何解开这个承诺并获取数据？当我附加一个 .then() 函数时，我没有得到我发回的 json 值。
也许这会有所帮助？：developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

标签： javascript node.js firebase google-cloud-firestore server

【解决方案1】：

您可以在您的客户端应用上设置Firestore listener：

db.collection(restaurantCollection)
    .onSnapshot((snapshot) => {
        snapshot.docChanges().forEach((change) => {
            if (change.type === "modified") {
                console.log("Modified Restaurant: ", change.doc.data());
            }
            if (change.type === "removed") {
                console.log("Removed Restaurant: ", change.doc.data());
            }
        });
    });

每当添加/修改/删除文档时都会触发。然后您可以检查change.type，如果它被“删除”，只需从 DOM 中删除该餐厅 div。

deleteReward 正在更新文档而不是删除它。所以你应该在客户端检查change.type === "modified"。

【讨论】：