<aside> 💡

예시 코드는 flask를 사용한 실시간 채팅 웹 어플리케이션 제작 시 사용한 코드들입니다.

• firebase 가입 및 데이터베이스 생성은 생략합니다.
• flask로 페이지 로드 시 매개변수를 받아오기 위해 internal로 작성했습니다. </aside>

세팅하기:

1. script 블록의 타입을 module로 작성해준다.

<script type="module">
// 여기에 코드 작성
</script>

1. 필요한 함수를 import해온다.

import { initializeApp } from "<https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js>";
import { getDatabase, ref, onChildAdded, push, set, get, onValue, update } from "<https://www.gstatic.com/firebasejs/9.6.1/firebase-database.js>";

1. authentication하고 DB객체를 받아온다.

const app = initializeApp({
            "apiKey": "AIzaSyBgcRnwAmQFgADDKW035zKVoVqac39dl2I",
            "authDomain": "ospgohome.firebaseapp.com",
            "databaseURL": "<https://ospgohome-default-rtdb.firebaseio.com>",
            "projectId": "ospgohome",
            "storageBucket": "ospgohome.firebasestorage.app",
            "messagingSenderId": "170580582802",
            "appId": "1:170580582802:web:9b45963e37ff7bd3ac214b",
            "measurementId": "G-FQGX56BWXT"
        });
const db = getDatabase(app);

각 함수 사용법:

• onChildAdded: 자식 노드가 추가될 때마다 받아와 실행
  • 코드 실행 이전에 추가된 노드들에 대해서도 실행된다.

// 추가된 채팅방 감지
const userRoomsRef = ref(db, "UserRooms/"+user);
onChildAdded(userRoomsRef, (snapshot) => {
    getChatRoom(snapshot.val(), snapshot.key);
})

/* 참고: const user = "{{user}}" 로 선언하면
 flask에 내장된 jinja2 템플릿 엔진에 의해 페이지 렌더 시 할당한 매개변수 값으로 치환됨 */

• get: 해당 노드의 데이터를 한 번만 받아와 실행
  • 위와 합쳐 다음과 같은 응용도 가능하다.

let roomId = 'room-'+user+"-"+opponent; //기본값

// 현재 채팅방 id 가져와서 구독
const nowRoomRef = ref(db, "UserRooms/"+user+"/"+opponent);
get(nowRoomRef).then( (snapshot) =>{
    if(snapshot.exists()) roomId = snapshot.val().roomId;

    roomMessagesRef = ref(db, "RoomMessages/"+roomId);
    onChildAdded(roomMessagesRef, (snapshot) => {
        getMessage(snapshot.val());
    }) 
})