🔔 15일차
오늘은 채팅방 별로 socket으로 해당 채팅방의 메세지를 받아오고, 채팅방을 추가하고 삭제하는 작업을 하였다.
오늘 오전에 채팅방 CRUD 작업을 들어가자고 이야기가 나왔는데 점심먹고 오니 벌써 API가 다 만들어져있었다… 이제 CRUD는 자주 했다보니 금방 금방 하는 것 같다.
그리고 스크롤 위치 조정을 할 때 살짝 에러가 있었는데, 팀원들에게 코드 리뷰 때 이야기를 해주었더니 같이 해결해주셨다!! 정말 최고다..!
채팅 기능이 엄청 어려울 줄 알았는데 순조롭게 진행이 되니 정말 뿌듯하다!
💪 오늘은 어떻게 프로젝트에 기여했나요?
채팅방을 구분지어서 socket 통신을 하였다. 클릭을 했을 때 useEffect의 트리거를 이용하여 params가 바뀌면 socket도 다시 새로운 방에서 통신을 하도록 구현을 하였다.
그 다음으로는 방을 추가하는 기능을 구현하였다. 저 에러의 원인은 채널마다 기본으로 ‘General’이라는 채널은 계속 있어야 하는데 추가만 하면 저녀석이 계속 사라졌다… 그래서 ‘General’이 없으니 class를 생성할 수 없다는 뜻이다. 고정값으로 넣어놓고 해도 결국 payload로 오는 값에 저녀석이 없었기 때문이였는데….
클라이언트에서 어찌저찌하면 잘 해결할 수 도 있었을 것 같았지만, 백엔드를 맡으신 팀원분께서 데이터를 보내줄 때 ‘General’은 항상 있는 걸로 해주셔서 바로 해결이 되었다!!
🤔 오늘의 프로젝트에서 힘든 점은 무엇인가요?
오늘 스크롤이 조금 위에 있는 상태에서 채팅을 하면 스크롤을 맨 밑으로 내려주는 작업을 했다. 하지만 스크롤이 맨 밑으로 내려오긴 하지만 socket 요청 딜레이 때문에 끊켜서 보인다.
해결 방법!!
socket.on으로 서버에서 받아오는 값으로 상태를 변경해주었는데, enter를 치는 순간에 한 번더 상태를 변경해주었다.
그 후 서버에서도 socket.broadcast.emit 이벤트를 걸어주었다.
broadcast는 io를 사용하지 않고 socket 안에 있는 broadcast 객체를 사용한다. 채팅을 할 때 자신을 제외한 모두에게 실시간으로 전송되고, 나의 채팅은 서버를 거치지 않고 바로 클라이언트 상에서 처리가 된다.
그렇기 때문에 요청 딜레이가 걸리지 않고 스크롤이 내려오자마자 바로 채팅을 확인할 수 있었다.
// enter를 쳤을 때
const onSubmitForm = useCallback (e: FormEvent<Element>): void => {
생략..
const data = {....}
const newChat = {...}
socket?.emit('sendMessage', data);
setChatBucket([...chatBucket, newChat])
}, [chat])
이건 진짜 어떻게 해결해야 할지 막막 했는데, 팀원들과 다같이 하다보니 빠른 시간안에 해결이 되었다!!!
🔥 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
채팅에서 채널 삭제 기능 및 채팅 연속으로 쳤을 경우 채팅 묶어주기