현재 채팅이 자동 스크롤되도록 구현된 상태인데
이것은 Firebase Realtime Database의 onValue 메소드를 이용해서
새로운 채팅이 등록될 때마다 스크롤이 되는 것이었다.
평소에 카톡을 이용해보면
1. 채팅방에 입장했을 때
2. 내가 채팅을 전송했을 때만
자동 스크롤이 되고, 다른 사람으로부터 채팅을 전송받았을 때는 스크롤이 되지 않는다.
그래서 이것을 구현하기로 했다.
채팅방에 입장했을 때 채팅 기록을 state로 관리하고 있다.
따라서 가장 마지막으로 저장된 채팅의 senderId를 현재 로그인한 사용자의 Id와 비교해서 같을 때만 자동 스크롤이 되도록 수정했다.
그리고 현재는 사이드바에 있는 친구 목록을 클릭해서 해당 친구와 1:1 채팅방으로 이동할 수 있는 상태이다.
일반적인 채팅 앱에서는 친구 목록과 별개로 채팅방 목록을 보여주므로 이것을 구현하기 위해 DB 구조를 추가했다.
1. 사용자마다 자신이 속한 채팅방 번호를 가지도록 추가
루트
ㄴMyChatRooms
ㄴ아이디
ㄴ채팅방 번호
ㄴisMember: true
로그인한 사용자가 속한 채팅방을 빠르게 구하기 위해 추가한 것이다.
2. 채팅방마다 마지막으로 전송된 메세지를 따로 가지도록 추가
루트
ㄴChatRooms
ㄴ채팅방 번호
ㄴChatMembers
ㄴChatMessages
ㄴLastMessage
ㄴcontent: 채팅 내용
ㄴdateTime: 전송 시간 (yyyyMMddhh:mm:ss)
ㄴsenderId: 아이디
마지막 메세지를 알아야하는 이유는 채팅방 목록을 최신순으로 정렬해야하기 때문이다.
기존의 채팅 내역은 ChatRooms - ChatMessages 하위에 저장되어 있는데
채팅방 목록을 불러올 때 사용자가 속한 모든 채팅방의 채팅 내역을 읽는 것은 비효율적이라고 생각했다.
따라서 ChatRooms - LastMessage 를 따로 추가해준 것이다.
'Web > [프로젝트] 웹 메신저' 카테고리의 다른 글
2021.09.25, 29, 30 개발 일지 (마이페이지 프로필 수정, Firebase Storage) (0) | 2021.10.01 |
---|---|
2021.09.19 개발 일지 (채팅방 목록 조회, 최신순 정렬, 로딩 화면 추가, Material UI) (0) | 2021.09.21 |
2021.09.11 개발 일지 (채팅 내역 불러오기, 실시간 업데이트, 채팅 자동 스크롤 및 react-custom-scrollbar 적용) (0) | 2021.09.12 |
2021.09.10 개발 일지 (Firebase 9 버전 업데이트 후 Realtime Database에 데이터 저장) (0) | 2021.09.12 |
2021.09.08 개발 일지 (Firestore에서 채팅 내역 조회하기, 실시간 업데이트) (0) | 2021.09.12 |