javascript - HTML 按顺序定位消息

问题描述

我有以下 JavaScript 方法用于在迷你聊天应用程序中加载消息。这个想法是我有两个 HTML 类来将消息定位在左侧或右侧，具体取决于发送者。HTML 和 CSS 很好并且可以正常工作。我的问题是何时从 Firestore 获取消息。

我有以下消息，从第一个发送到最后一个：Hello, hyd?, Good, Hello Sir, hey

但奇怪的是，它们在屏幕上显示时没有正确排序，我首先收到其他用户发送的消息，然后显示我的消息。我不确定我在哪里弄乱了这种行为的代码，但我相信它与if我检查谁发送消息的语句有关。Firestore 中消息的文档具有以下结构：

{
   createdAt: ....,
   message: ....,
   from: ....,
   to: ....
}

     let divMessagesLeft = document.getElementById("firstmessages--main-div-id");
     let devMessagesRight = document.getElementById("firstmessages--main-div-id-2");

     async function loadMessages() {
       firebase.auth().onAuthStateChanged(async function (user) {
         if (user) {
             let messagesReference = firebase
             .firestore()
             .doc(`/chats/${user.displayName}`)
             .collection(`/chats/${userChat.username}/messages`)
             .orderBy("createdAt");

           await messagesReference
             .get()
             .then(function (snapshot) {
               snapshot.forEach(function (doc) {
                 console.log(doc.data().message);
                 if (doc.data().from === userChat.username || doc.data().to === user.displayName) {
                   const message = `<div class="messagee">${doc.data().message}</div>`;
                   divMessagesLeft.innerHTML += message;
                 } else {
                   const message = `<div class="messagee messagee-right">${doc.data().message}</div>`;
                   devMessagesRight.innerHTML += message;
                 }
               });
             });
         } else {
           console.log("Not logged in");
         }
       });
     }
     loadMessages();

          <div id="chat-messages-main-div-id" class="chat-messages-main-div">
            
            <div id="first-message-div-id" class="first-message-div">
              <div id="firstmessages--main-div-id" class="firstmessages--main-div">
                <!-- <div class="messagee">Hello</div> -->
              </div>
            </div>

            <div id="first-message-right-id-2" class="first-message-right">
              <div id="firstmessages--main-div-id-2" class="firstmessages--main-div">
                <!-- <div class="messagee messagee-right">Hi</div> -->
              </div>
            </div>
          </div>

标签： javascripthtml

javascript - HTML 按顺序定位消息

问题描述

解决方案

推荐阅读