Question

我正尝试根据以下教程https://www.djamware.com/post/5d63586ee8e5fff670f31169/vuejs-tutorial-building-firebase-realtime-chat-web-app直接使用Vue.js和Firebase构建实时聊天室应用。本教程使用Firebase Realtime Database在动态创建的聊天室中管理聊天。我的目标是将应用程序从Realtime Database完全转换为Firestore。到目前为止，我已经成功地在“ Room.vue”和“ AddRoom.vue”组件中实现了firebase.get()和firebase.add()方法，以便将聊天室添加到数据库并将聊天室返回到会议室在“ Room.vue”中列出。对于“ Chat.vue”，我在重新配置created()生命周期挂钩以在数据库中正确设置用户信息并在选定的聊天室中显示该用户信息时遇到一些问题。本教程中created()钩子的当前实时数据库设置如下：

  created () {
    let joinData = firebase.database().ref('chatrooms/'+this.roomid+'/chats').push();
    joinData.set({
      type: 'join',
      user: this.nickname,
      message: this.nickname+' has joined this room.',
      sendDate: Date()
    });
    this.data.message = '';
    firebase.database().ref('chatrooms/'+this.roomid+'/chats').on('value', (snapshot) => {
      this.chats = [];
      snapshot.forEach((doc) => {
        let item = doc.val()
        item.key = doc.key
        this.chats.push(item)
      });
    });
  },

此挂钩可在chatrooms内创建名为chats的子集合，该子集合接收在Room.vue中生成的roomid，并最终将用户聊天信息返回到模板。我想用Firestore代替Realtime数据库来实现类似的目的。到目前为止，我已经尝试将Chat.vue组件重新配置为以下内容：

<script>

import { firebase } from '../Firebase'
import router from '../router'

export default {
  name: 'Chat',
  data () {
    return {
        roomid: this.$route.params.roomid,
        roomname: this.$route.params.roomname,
        nickname: this.$route.params.nickname,
        data: { type:'', nickname:'', message:'' },
        chats: [],
        errors: [],
        offStatus: false
    }
  },
  async created () {
    let joinData = await firebase.push()
    joinData.set({
      type: 'join',
      user: this.nickname,
      message: this.nickname+' has joined this room.',
      sendDate: Date()
    });
    this.data.message = '';
    let snapshot = await firebase.get()
    const chats = []
    snapshot.forEach(doc => {
      let appData = doc.data()
      appData.key = doc.key
      rooms.push(appData)
    })
      this.chats = chats
  }
  },
  methods: {
    onSubmit (evt) {
        evt.preventDefault()

        let newData = firebase.get()
        newData.add({
            type: 'newmsg',
            user: this.nickname,
            message: this.data.message,
            sendDate: Date()
        });
        this.data.message = '';
    },
    exitChat () {
      let exitData = firebase.get()
      exitData.set({
        type: 'exit',
        user: this.nickname,
        message: this.nickname+' has exited this room.',
        sendDate: Date()
      })

      this.offStatus = true
      router.go(-1)
    }
  }
}
</script>

...以便生命周期挂钩和方法改为将数据推送到Firestore或从Firestore检索数据。我不确定如何配置钩子和方法，以在Firestore中现有的聊天室内进行聊天的子集合创建并与之交互，如本教程中的“实时数据库”示例中所述。关于如何使用Firestore实现此目标的任何建议？谢谢！

如何将Vue.js实时聊天应用程序从实时数据库转换为Firestore

0 个答案: