Room 기록서 '21.06.21 Chat Tab 개발

메인 화면

- 기능 1 - 매인 채팅

- 기능 2 - 쓰레드 채팅

 

구현 스택
Backend - spring web + websocket + stomp

Frontend - sockjs + stompclient

 

기능 설명

메인 채팅 - 룸을 사용하는 사람들끼리 소통을 위한 채팅

쓰레드 채팅 - 한 채팅에 대해서 토론이 필요할때 사용하는 작은 채팅

 

구현방법

룸의 Chat 탭에 들어오면 '/websocket' api로 서버와 ws연결과 디비에서 최신 메시지를 조회한다. 이후 ws객체를 통해 들어오는 메세지는 하나씩 채팅 배열에 추가해주는 방식으로 개발했다. Chat 탭에서 다른 탭으로 이동시 ws연결 끊는다.

 

쓰레드 채팅창을 열면 마찬가지로 또 다른 하나의 ws연결및 최신 메시지를 조회한다. 

 

세부 기능

1. 페이지네이션 - 메인 채팅과, 쓰레드 채팅은 페이지네이션으로 채팅 기록을 20개씩 서버에서 가져온다. 채팅이 너무 많아져서 성능 저하를 피하고자 넣었다.

2. 메인 채팅 요일 표시 - 채팅의 요일이 달라졌을때 요일을 알려주도록 만들었다.

 

어려움들

1. api 서버와 websocket 서버를 나누어 제작했다. 여기서 문제가 발생했다. websocket 서버에서 api 서버의 도메인 객체를 사용할 필요가 있었다. 하지만 api서버의 spring security 디펜던시 때문에 websocket 서버 api에 대해서도 사용자 인증을 요구했다. 
해결방법 - api서버의 도메인을 또 다른 모듈로 나누어 해결했다. security는 컨트롤러 레이어에 들어오기전에 동작한다. websocket 서버는 도메인 레이어에 접근하기만 하면된다. (Chat을 저장하기 위함.) 그래서 room-common 모듈을 만들고 api-server와 socket-server가 common 도메인을 사용하여 해결할 수 있었다. 

요약 - ( api server <- websocket 의존시 ) 문제 => (api server -> common 의존, websocket -> common 의존 으로 해결

2. 인피니트 scroll 문제 - IntersectionObserver를 처음 알게되었다. root 안에서 target으로 하는 엘레먼트가 교차하고 있는지 아닌지 확인할때 사용가능한 듯하다.