javascript - Firebase - 如何检测 onSnapshot 的来源

Question

我正在构建一个简单的 firebase 应用程序。主文本区域链接到 Firebase 上的条目。当用户键入时，我反跳 keyup 事件(300 毫秒)，并在 Firebase 上进行更新。

每个 .update 事件从服务器返回时都会触发 onSnapshot 事件(这是 Firebase 的预期行为)。我的问题是它会打扰用户打字。因为请求发送到服务器和返回之间存在延迟。当它返回时，用户已经输入了更多文本，并且文本区域的内容与触发 .update 时不同。

这是我的代码和说明问题的 jsFiddle:

var textareaElement = document.querySelector('textarea');

// Initialize Firebase
var config = {
  apiKey: "XXX",
  authDomain: "XXX",
  projectId: "XXX",
};
firebase.initializeApp(config);
const db = firebase.firestore();
const doc = db.collection("notes").doc('XXX');

// This is debounced
const update = function(){
    doc.update({
    text: textareaElement.value,
    updated_at: firebase.firestore.FieldValue.serverTimestamp()
  })
}

// Update the server when we change the client
textareaElement.addEventListener('keyup', _.debounce(update, 300));

// Listen for changes from the server
doc.onSnapshot(function(doc){
    textareaElement.value = doc.data().text
});

jsFiddle

https://jsfiddle.net/x6h80keb/2 (以正常速度打字，你就会明白我的意思)

jsFiddle - 没有 serverTimestamp()

https://jsfiddle.net/x6h80keb/6/

我发现删除对 serverTimestamp() 函数的调用有很大帮助。看来它是造成请求延迟的原因。它使“错误”几乎不明显，但有时当请求执行时间较长时，它仍然会发生。

我能想到的唯一解决方案是检测更新的发起者。每当触发 onSnapshot 事件时，我们就可以查看 doc 对象，并判断更改是来自该客户端还是来自另一个客户端。但显然没有这样的功能。

有什么想法可以解决这个问题吗？

编辑:

我最终增加了去抖延迟。我没有在 300 毫秒后更新，而是等待几秒钟。这样用户打字就不会被打扰。我还将在 .update 期间卡住文本区域。

Answer 1

这是因为书面文档的内容可能与文档更新后用户输入的内容不同。

重新思考这段代码:

doc.onSnapshot(function(doc){
    textareaElement.value = doc.data().text
});

这将覆盖自触发去抖以来用户输入的所有内容，并且文档随进度更新。在高延迟的网络上这将尤其痛苦。

考虑不在每次文档更改时重写整个文本区域，而是显示输入同步状态的指示器。他们的打字是否同步？这就是用户需要知道的全部内容。您不需要定期覆盖他们的输入。