vue js realtime chat app without refreshing / firebase

Question

I'm creating a chat app, If the user enter message and press send button, the app is working fine. The informations going to the database and im taking a datas. When the user refresh the page, so there is no problem, in mounted() instance im taking the datas from database(firebase) and im showing on the app. If another user comes to the chat, also there is no problem, all messages are appearing. The problem is that: If the new message is coming, another user can not see it without refresh or without send message button. When the another user send a message then the user see all messages.

I explain the problem with a gif, if you help me i will be glad.

<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

You're using get() to read the data from Firestore. As the documentation I linked explains, that reads the value from the database once, and does nothing more.

If you want to continue listening for updates to the database, you'll want to use a realtime listener. By using onSnapshot() your code will get called with a querySnapshot of the current state of the database right away, and will then also be called whenever the database changes. This is the perfect way to then update your UI.

So instead of

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

Do the following:

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