오늘은 웹 메신저의 메인 기능인 채팅 조회 및 실시간 업데이트 코드를 작성했다.

Firestore에 채팅 내역을 저장해놓았고, DB에서 불러온 채팅 내역을 상태로 관리하여

onSnapshot 메소드를 이용해서 조회할 때, 채팅이 추가되었을 때 상태를 변경해서 즉시 반영하는 것이다.

 

 

크롬과 엣지를 이용해서 혼자 채팅 테스트를 해보니 채팅 조회와 실시간 반영이 잘 되는 것을 확인했다.

 

그러나... 아주 큰 문제가 있는데 현재 코드는 다음과 같다.

 

chatMessageFB.doc('20210909').collection('userMessage').onSnapshot((docs) => {
    let chatFromFB = [];
    console.log(docs)
    docs.forEach((doc) => {
        chatFromFB.push({
            senderId: doc.data().senderId,
            content: doc.data().content,
            time: doc.data().time
        })
    })
    setChatHistory(chatFromFB);
});

 

document의 id (날짜) 를 지정해서 불러오는 상태인 것이다.

내가 원하는 것은 컬렉션 아래에 있는 모든 document 목록을 forEach로 돌려서

전체 채팅 내역이 뜨게 하는 것인데 나름대로 코드를 작성해보았지만 작동을 하지 않았다.

 

몇 시간을 삽질하고 뭔가 잘못되었음을 느끼고 결국 스파르타 리액트 튜터님께 슬랙에 질문을 남겼는데

Firestore에서는 내가 생각했던 기능을 구현할 수 없다는게 결론이었다...

 

사실 실시간 업데이트 기능때문에 Firestore 말고 Realtime Database를 이용하는 것을 진작에 고려해보았는데

어쩐 일인지 import 'firebase/database';를 작성하면 오류가 발생해서 최대한 Firestore을 이용하는 방향으로 잡았었다.

하지만 이제는 Realtime Database를 사용해야만 하는 상황이 되었기 때문에 어떻게든 그 오류를 해결해보려고 한다.

 

부디 빠른 시일 내에 오류를 해결할 수 있길 바란다🙏

+ Recent posts