Firebase：Javascript在切換接收器時多次獲取消息，而數據庫中只有一條消息

Question

我正在開發一個聊天應用程序，使用 firebase 和 javascript。 我遇到了一個問題，當我多次切換接收器時，我發送的消息會獲取幾次，而消息只發送一次到數據庫。

var select = document.getElementById("odbiorcy");

select.addEventListener("change", function handleChange(event) {
  receiver = select.options[select.selectedIndex].text;
  console.log("gonna fetch");
  document.getElementById("messages").innerHTML = "";
  fetchChat = db.ref("messages/" + username + "/" + receiver + "/");
  fetchChat.on("child_added", function (snapshot) {
       const messages = snapshot.val();
       const msg = "<li>" + messages.usr + " : " + messages.msg + "</li>";
       document.getElementById("messages").innerHTML += msg;
  });
});

這是它獲取時的樣子，在開關接收器幾次之后

如您所見，我發送/接收的前 3 條消息很好，直到我切換接收器，我發送的消息在獲取時才被復制。

Answer 1

聽起來您應該在代碼中切換接收器時分離現有的偵聽器。

就像是：

var path, listener;
select.addEventListener("change", function handleChange(event) {
  // 👇
  if (listener) {
    path.off("child_added", listener)
  }

  receiver = select.options[select.selectedIndex].text;
  console.log("gonna fetch");
  document.getElementById("messages").innerHTML = "";
  fetchChat = db.ref("messages/" + username + "/" + receiver + "/");
  // 👇
  listener = fetchChat.on("child_added", function (snapshot) {
       const messages = snapshot.val();
       const msg = "<li>" + messages.usr + " : " + messages.msg + "</li>";
       document.getElementById("messages").innerHTML += msg;
  });
  path = fetchChat; // 👈
});