vue js 实时聊天应用，无需刷新/firebase

Question

我正在创建一个聊天应用程序， 如果用户输入消息并按下发送按钮，则该应用程序运行正常。信息进入数据库并获取数据。 当用户刷新页面时，没有问题，在mounted（）实例中，我从数据库（firebase）中获取数据并显示在应用程序上。如果另一个用户来聊天，也没有问题，所有消息都会出现。 问题是：如果新消息来了，另一个用户在没有刷新或没有发送消息按钮的情况下看不到它。当另一个用户发送消息时，该用户会看到所有消息。

我用 gif 来解释问题，如果你能帮助我，我会很高兴。

<template>
<div>
  <div class="container">
    <div class="row">
        <div v-if="isLogin" class="offset-3 col-md-6  msg-area">
        <header>
          <h1>Group Chat</h1>
          <p class="sm">Welcome, {{this.username }} </p>

        </header>
        <div  class="msg">
          <p class="mssgs" v-for="(message,index) in messages" :key="index">{{ message.msg }} <br>  <span> {{ message.name }} - {{ message.time }} </span>  </p> 
        </div>

        <div class="sendMsg">
            <form @submit.prevent="sendFunc">
                  <div class="form-group d-flex">
    
    <input type="text" class="form-control" placeholder="Enter message.." v-model="msgInput">
    <button class="btn">Send </button>
    
  </div>

            </form>
        </div>

  </div>

<div class="offset-3 col-md-6 login" v-else>

  <form @submit.prevent="joinFunc">
 <div class="form-group d-flex">
    
    <input type="text" class="form-control" placeholder="Enter username.." v-model="username">
    <button class="btn">Join to Group </button>
    
    </div>

  </form>

</div>

  </div>
  </div>
</div>
</template>

<script>

import firebase from "./firebase";
import 'firebase/firestore';

export default {
 
  data() {
    return {
     db : firebase.firestore(),
    isLogin: false,
    username: '',
      messages : [
      
      ],
      msgInput: '',
      
    }
  },
  methods: {
    joinFunc() {
      
      this.isLogin = true;
    },
    sendFunc() {
        let date = new Date();
        let hour = date.getHours();
        let minute = date.getMinutes();
        let nowTime = hour + ':' + minute;
     this.db.collection("messages")
          .add({ message: this.msgInput, name: this.username, time: nowTime, date: date })
          .then(() => {
               this.db.collection("messages").orderBy("date", "asc")
        .get()
        .then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
           this.messages.push({
              name: doc.data().name,
              msg: doc.data().message,
              time: doc.data().time
            });
           
          });
         
        })
          })
          .catch((error) => {
            console.error("Error writing document: ", error);
          });

    },
   
    
  },
  mounted: function() {
       this.db.collection("messages").orderBy("date", "asc")
        .get()
        .then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
           this.messages.push({
              name: doc.data().name,
              msg: doc.data().message,
              time: doc.data().time
            });
           
          });
         
        })

    }
}
</script>

Answer 1

您是 using get() 从 Firestore 读取数据。正如我链接的文档所解释的那样，它从数据库中读取一次值，然后什么都不做。

如果您想继续监听数据库的更新，您需要use a realtime listener。通过使用onSnapshot()，您的代码将立即以数据库当前状态的querySnapshot 调用，然后在数据库更改时也将被调用。这是更新 UI 的完美方式。

所以不是

...
.get()
.then((querySnapshot) => {
  querySnapshot.forEach((doc) => {

执行以下操作：

...
.onSnapshot((querySnapshot) => {
  querySnapshot.forEach((doc) => {