진행하 프로젝트에서 Supabase의 Realtim 기능을 활용해 실시간 채팅 기능을 구현했다.
supbase는 PostgresSQL 기반의 실시간 업데이트 기능을 제공하기 때문에, 복잡한 웹소캣 서버를 직접 구성하지 않고도 실시간 채팅을 쉽게 구축 할 수 있었다. 작은 규모의 프로젝트에서 찰떡이였다.
하지만 실제로 적용하면서 여러 시행착오를 겪었다.
이번 글에서는 onChannel을 중심으로 실시간 메시지 수신 구현 방법과, 그 과정에서 마주친 트러블슈팅 경험을 공유하고자 한다.
📌 구현 목표
-
채팅방 입장 시 과거 메시지를 가져오기
-
새로운 메시지가 도착하면 실시간으로 반영하기
-
중복 구독 방지 및 안정적인 구독 해제 처리
-
안정성을 위한 필터링 최적화
📌 실시간 채팅 구조
-
초기 메세지 들고오기
-
onChannel로 실시간 수신
supabase Realtime의 핵심 channel 객체와 .on() 메서드를 통해 PostgresSQL의 변경사항을 수신한다.
🧠 filter를 꼭 써야 할까?
없어도 잘 작동한다. 하지만
-
정확한 필터링
클라이언트에서 수신할 메시지를 서버에서 미리 거른다. -
퍼포먼스 최적화
모든 메시지를 받아서 필터링 하는 것보다 네트워크 사용량과 연산이 줄어든다. -
코드 간결화
if (msg.room_id === roomId) 같은 후처리 없이도 메시지를 바로 사용할 수 있다. -
버그 방지
여러 채팅방을 동시에 구독하는 상황에서 잘못된 메시지가 섞이는 것을 방지한다.
선택이 아닌 필수에 가깝다고 보면된다.
🧯 트러블슈팅
[문제] 페이지 재진입 시 실시간이 동작하지 않음
-
에러 로그
tried to subscribe multiple times -
원인
동일한 channel에 중복으로 구독 요청이 발생하면 에러가 발생한다. -
해결 방법
channelRef를 useRef로 구독 채널을 보존하고, 컴포넌트가 unmount될 때 removeChannel로 해제한다.
📌 마무리
실시간 기능을 간단하게 제공하지만, 직접 사용해보면 구독관리와 데이터 필터링이 핵심이라는 것을 알게 되었다.
이번 구현을 통해 onChannel의 기본원리와, filter의 중요성, 중복 구독 방지 전략까지 이해하게 되었다.
