Quasar框架下JS/Vue读取Firebase实时数据库消息存Vuex方法

原代码存在以下几个核心错误，导致无法正确拉取聊天消息：

• 路径引用完全不符合现有数据结构：你的所有消息直接平铺在messages节点下，fromId、toId是单条消息的属性字段，不是路径层级，原代码拼接的messages/${fromId}/${toId}路径在数据库中根本不存在
• 变量未定义：代码中只声明了当前用户IDuserId，后续拼接路径用到的fromId、toId没有赋值，运行时会直接抛出变量不存在的错误
• 缺少消息过滤逻辑：即使路径正确，也没有做会话范围过滤，会拉取到全平台所有用户的聊天消息
• 缺少排序规则：没有按时间戳对消息排序，拉取到的消息顺序会错乱
• 没有做监听解绑：child_added是持续监听事件，如果离开页面不取消监听，会重复触发回调、造成内存泄漏和消息重复插入

以下是适配你现有数据结构的Vuex代码，可直接在Quasar框架中使用：

import { firebaseDb } from 'src/boot/firebase' // 替换为你项目中firebase实例的实际引入路径

// 全局存储监听解绑方法，避免重复创建监听
let unbindMessagesListener = null

const store = createStore({
  state: () => ({
    userDetails: {
      userId: '' // 保留你原有的当前登录用户ID存储字段
    },
    currentConversationMessages: [] // 存储当前聊天会话的消息列表
  }),
  mutations: {
    addMessage(state, messageItem) {
      // 消息去重，避免重复插入同一条消息
      const isMsgExist = state.currentConversationMessages.some(
        msg => msg.messageId === messageItem.messageId
      )
      if (!isMsgExist) {
        state.currentConversationMessages.push(messageItem)
        // 按时间戳正序排序，兜底保证消息展示顺序正确
        state.currentConversationMessages.sort((a, b) => a.timestamp - b.timestamp)
      }
    },
    clearCurrentMessages(state) {
      state.currentConversationMessages = []
    }
  },
  actions: {
    firebaseGetMessages({ commit, state }, otherUserId) {
      const currentUserId = state.userDetails.userId
      // 切换会话时先清除上一个会话的监听和旧消息
      if (unbindMessagesListener) {
        unbindMessagesListener()
        unbindMessagesListener = null
        commit('clearCurrentMessages')
      }

      const messagesRef = firebaseDb.ref('messages')
      // 按时间戳排序后监听新增消息
      const newMsgListener = messagesRef.orderByChild('timestamp').on(
        'child_added',
        (snapshot) => {
          const messageData = snapshot.val()
          // 过滤当前会话的双向消息：我发给对方、对方发给我
          const isBelongToCurrentConv = 
            (messageData.fromId === currentUserId && messageData.toId === otherUserId) ||
            (messageData.fromId === otherUserId && messageData.toId === currentUserId)
          
          if (isBelongToCurrentConv) {
            commit('addMessage', {
              messageId: snapshot.key,
              ...messageData
            })
          }
        }
      )

      // 保存解绑函数，停止监听时调用
      unbindMessagesListener = () => messagesRef.off('child_added', newMsgListener)
    },
    firebaseStopMessagesListener({ commit }) {
      if (unbindMessagesListener) {
        unbindMessagesListener()
        unbindMessagesListener = null
        commit('clearCurrentMessages')
      }
    }
  }
})

在Quasar的聊天页组件中按生命周期触发对应action即可：

import { useStore } from 'vuex'
import { onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'

const store = useStore()
const route = useRoute()
// 从路由参数获取聊天对象的用户ID
const otherUserId = route.params.otherUserId

// 页面进入时拉取当前会话消息
store.dispatch('firebaseGetMessages', otherUserId)

// 页面离开前解绑监听，防止内存泄漏
onBeforeUnmount(() => {
  store.dispatch('firebaseStopMessagesListener')
})

上述代码适配你现有的数据结构，在平台总消息量不大的场景可以正常运行。如果后续消息量级增长，建议调整消息存储结构降低流量消耗：

• 给每条消息新增conversationId字段，值为两个聊天用户的ID按字典序排序后拼接（比如两个ID排序后用_连接），同一会话的双方计算出的ID完全一致
• 查询时直接使用messagesRef.orderByChild('conversationId').equalTo(当前会话ID)做过滤，Firebase会直接返回对应会话的消息，不需要客户端做全量过滤，带宽占用和查询速度都会有明显提升

内容的提问来源于stack exchange，提问作者Mostafa Asadi