8. Vue3 Firebase 프로젝트 채팅앱 VSignal - 온라인 상태 표시 기능

채팅앱 VSignal - 온라인 상태 표시 기능

Firebase Authentication으로 로그인한 사용자의 온라인/오프라인 상태를 실시간으로 감지할 수 있습니다.
채팅 목록에서 실시간으로 로그인하면 "online",
앱이 닫히거나 유저가 오프라인 되면 "offline"으로 상태를 보여줄 수 있습니다.

🔥 온라인 상태 표시 기능 추가

온라인 상태를 관리하려면 Firebase Realtime Database를 사용하면 좋아!
Firebase Authentication으로 로그인한 사용자의 온라인/오프라인 상태를 실시간으로 감지할 수 있어.

1. Firebase Realtime Database 활성화

Firebase 콘솔 → Realtime Database → 데이터베이스 생성
규칙 설정 (rules → "true"로 설정)

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

🚀 이제 Firebase에서 사용자 상태를 저장할 수 있어!

2. 온라인 상태 관리 방법

✔ 방법: Firebase onDisconnect() 기능 사용

로그인하면 "users/{uid}/status"에 "online" 저장
앱이 닫히거나 유저가 오프라인 되면 "offline"으로 변경

3. Store에서 온라인 상태 관리 (Pinia 사용)

📌 store/userStore.js 추가

import { defineStore } from "pinia";
import { getDatabase, ref, set, onDisconnect, onValue } from "firebase/database";
import { auth } from "@/firebase";

export const useUserStore = defineStore("user", {
  state: () => ({
    onlineUsers: {}, // 온라인 상태 저장
  }),

  actions: {
    // ✅ 로그인 후 온라인 상태 설정
    async setOnlineStatus() {
      const db = getDatabase();
      const user = auth.currentUser;
      if (!user) return;

      const userRef = ref(db, `users/${user.uid}/status`);
      await set(userRef, "online");

      // 🔥 유저가 앱을 종료하거나 연결이 끊기면 자동으로 "offline"으로 변경
      onDisconnect(userRef).set("offline");
    },

    // ✅ 실시간으로 온라인 유저 목록 감지
    listenForOnlineUsers() {
      const db = getDatabase();
      const onlineRef = ref(db, "users");

      onValue(onlineRef, (snapshot) => {
        if (snapshot.exists()) {
          this.onlineUsers = snapshot.val();
        }
      });
    },
  },
});

4. 로그인 시 온라인 상태 업데이트

📌 Login.vue 수정

<script setup>
import { useUserStore } from "@/store/userStore";
import { auth } from "@/firebase";
import { signInWithEmailAndPassword } from "firebase/auth";
import { onMounted } from "vue";

const userStore = useUserStore();

const login = async (email, password) => {
  const userCredential = await signInWithEmailAndPassword(auth, email, password);
  await userStore.setOnlineStatus(); // ✅ 로그인 후 온라인 상태 저장
};

onMounted(() => {
  userStore.listenForOnlineUsers(); // ✅ 온라인 유저 목록 감지 시작
});
</script>

5. 채팅방에서 온라인 상태 표시

📌 ChatList.vue 수정

<script setup>
import { useUserStore } from "@/store/userStore";

const userStore = useUserStore();
</script>

<template>
  <v-list>
    <v-list-item v-for="(status, uid) in userStore.onlineUsers" :key="uid">
      <v-list-item-title>{{ uid }}</v-list-item-title>
      <v-list-item-icon>
        <v-icon :color="status === 'online' ? 'green' : 'grey'">mdi-circle</v-icon>
      </v-list-item-icon>
    </v-list-item>
  </v-list>
</template>

✅ 유저 ID와 상태를 표시
✅ "online"이면 초록색, "offline"이면 회색 표시

🎯 결론

✅ Firebase Realtime Database를 사용해 온라인 상태 감지
✅ 로그인하면 "online" 으로 설정, 앱 종료 시 "offline" 자동 변경
✅ 채팅 목록에서 실시간으로 온라인 상태 표시 가능! 🚀