Firebase заполняет список чатов только одним элементом

Question

У меня есть это приложение ChatRoom здесь , созданное со ссылкой на "Friendlychat-web".Проблема заключается в заполнении только самого последнего элемента в базе данных реального времени.

Суть кода можно найти здесь: main.js

var query = firebase.database().ref("messages");

function loadMessages() {
  document.getElementById("messages-list").innerHTML = "";
  query.on("value", async snapshot => {
    if (snapshot.val()) {
      await Object.keys(snapshot.val()).forEach(async key => {
        document.getElementById("messages-list").innerHTML += generateMessage(await snapshot.val()[key]);
      });

    } else {
      document.getElementById("messages-list").innerHTML = "";
      document.getElementById(
        "messages-list"
      ).innerHTML += `<li class="center"> No Messages yet</li>`;
    }
  });
}


function authStateObserver(user) {
  loadRoomMembers();
  loadMessages();
  if(user){ /*... action ...*/}
}

Функциональность чата работает нормально, пока вы не обновитесь.

Дообновление:

После обновления:

Answer 1

Код сам по себе выглядит так, как будто он должен работать.Но то, как вы перебираете сообщения, не является идиоматическим, поэтому в них трудно обнаружить ошибку.Лучший способ зациклить результаты - использовать Snapshot.forEach(), например так:

function loadMessages() {
  query.on("value", snapshot => {
    let list = document.getElementById("messages-list");
    if (snapshot.val()) {
      list.innerHTML = "";
      snapshot.forEach(messageSnap => {
        list.innerHTML += generateMessage(messageSnap.val());
      });
    } else {
      list.innerHTML += `<li class="center"> No Messages yet</li>`;
    }
  });
}

Обратите внимание, что я также удалил async и await, так как ваш код, кажется, не нуждается в этом, и онпросто вводит больше места для ошибки.