23. [개발] 실시간 메시지 업데이트 분석 - Vue3 Firebase 프로젝트 채팅앱 VSignal

실시간 메시지 업데이트 기능 구현 분석

채팅앱 VSignal의 실시간 메시지 업데이트 기능을 분석합니다.

ChatView 컴포넌트의 template

ChatView 컴포넌트의 script

채팅방 가져오기

// 특정 유저와의 1:1 채팅 찾기 또는 생성
const getOrCreateChat = async (user1, user2) => {

  const chatRef = collection(db, "chats");
  const q = query(chatRef, where("users", "array-contains", user1));
  const snapshot = await getDocs(q);

  for (const doc of snapshot.docs) {
    const chatData = doc.data();
    if (chatData.users.includes(user2)) {
      return doc.id; // 기존 채팅방 ID 반환
    }
  }

  // 새로운 채팅방 생성
  const newChat = await addDoc(chatRef, { users: [user1, user2] });
  return newChat.id;
};

🔥 array-contains란?

array-contains는 Firebase Firestore에서 배열 안에 특정 값이 존재하는 문서만 필터링할 때 사용하는 쿼리 조건입니다.

const q = query(chatRef, where("users", "array-contains", user1));

 

Firestore의 chats 컬렉션에서 "users" 배열에 user1 유저 ID가 포함된 채팅방을 가져 옵니다.
기존에 채팅방이 있으면 기존의 채팅방 ID를 돌려주고, 그렇지 않으면 새로운 채팅방을 생성합니다.

실시간 메시지 수신

🔥 onSnapshot이란?

onSnapshot은 Firebase Firestore의 문서 또는 컬렉션의 데이터 변화를 실시간으로 감지하는 메서드입니다.
즉, Firestore의 데이터가 변경될 때마다 자동으로 최신 데이터를 받아오는 기능입니다.

// 특정 채팅방의 실시간 메시지 수신
const listenForMessages = (chatId, callback) => {
  const messagesRef = collection(db, `chats/${chatId}/messages`);
  const q = query(messagesRef, orderBy("timestamp"));

  return onSnapshot(q, (snapshot) => {
    const messages = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
    callback(messages);
  });
};

채팅방 변경 감지

👀 Vue 3 watch란?

watch는 특정 데이터(state)의 변화를 감지해서, 특정 로직을 실행시키는 Vue 3의 리액티브 함수입니다.

    // 채팅방 변경 감지 → Firestore 실시간 메시지 업데이트
    watch(selectedUser, async (newUser) => {
      if (unsubscribe) unsubscribe(); // 기존 리스너 해제
      if (newUser) {
        // 채팅방을 가져온다.
        chatId.value = await getOrCreateChat(currentUser, newUser);
        // 실시간 메시지를 업데이트 한다.
        unsubscribe = listenForMessages(chatId.value, (newMessages) => {
          messages.value = newMessages;
        });
      }
    });

 

watch를 통해 selectedUser를 감시하여 user가 변경되면 채팅방을 가져오고,
실시간 메시지를 업데이트합니다.