javascript - 从 firestore 查询数据到我的聊天应用程序刷新后如何保持数据的当前输出？

Question

  db.collection("Users").doc(email).collection("Messages").doc(email).collection("user").onSnapshot(function(querySnapshot) { querySnapshot.docChanges.forEach(function(change)
        {
              
               if (change.type === "added") {
               
                   chat_div.innerHTML +="<div class='container'><h3 id='eventN'> "+change.doc.data().date +" :" + change.doc.data().message +  " </h3></div>";
                   
                   
                   
                
                }
             
              
          });
    
	   
	   });
    db.collection("Users").doc(email).collection("Messages").doc(email).collection("admin").onSnapshot(function(querySnapshot) { querySnapshot.docChanges.forEach(function(change)
        {
              
               if (change.type === "added") {
               
                   chat_div.innerHTML +="<div class='container darker'><h3 id='eventN'> "+change.doc.data().date +" :" + change.doc.data().message +  " </h3></div>";
                
                }
             
              
          });
    
	
	   });
      send_div.innerHTML +="<div class='send'><input id='message' type='text'><button type='submit' onClick='subMessage(\""+email+"\")'>submit</button></div>";
     
}

因此，我尝试使用 Javascript 和 Html 以及 Firestore 数据库制作一个聊天 Web 应用程序。当我查询每条消息从管理员到用户交替时，一切正常。但是，一旦我刷新页面，消息就会从管理员分组到用户。一切都已经是实时的，唯一的问题是刷新页面后它们会相互分组。

Here is when i don't refresh the page

Here is after i refresh the page

db.collection("Users").doc(email_id).collection("Messages").doc(email_id).collection("user").onSnapshot(function(querySnapshot) { querySnapshot.docChanges.forEach(function(change)
        {
              
               if (change.type === "added") {
               
                   chat_div.innerHTML +="<div class='container'><h3 id='eventN'> "+change.doc.data().date +" :" + change.doc.data().message +  " </h3></div>";
                }
          });
    
	
	   });

<h2>User</h2>
    
<div id="chat_div">

</div>
    
<div class="send_message">
    <input id="message"type="text">
    <button onClick="subMessage();" type="submit">Send</button>
    </div>
   

Answer 1

如果我正确理解您的问题，您的问题是刷新页面时消息的顺序会发生变化。它是否正确？如果是这样，这个问题很容易解决。如果不是这种情况，请您编辑您的问题，以便更容易理解您所说的“互相分组”的含义

升序排序

db.collection("Users").doc(email_id).collection("Messages").doc(email_id).collection("user").orderBy("date").onSnapshot

按降序排序

db.collection("Users").doc(email_id).collection("Messages").doc(email_id).collection("user").orderBy("date", "desc").onSnapshot