크리스마스의 달콤한 작은 선물을 뒤로하고 채팅 수정을 했다. 정말 고된 길이었다. 얼마나 고된 길이었냐면 일단 서버에서 에러가 생기면 바로 꺼진다. 클라이언트에서 에러가 나도 꺼진다. "에러 -> 서버 꺼짐 -> 코드 하나 수정 -> 다시 에러" 이 과정을 계속 반복해야 하는 고된 길이다. 코드도 어렵고 이해하기도 어려웠지만 중간 중간 흐름을 끊는 이 나쁜 친구들의 악행을 참으면서 괜찮아 그냥 농사나 짓자라고 주문을 외웠다.
이렇게 악덕한 녀석임에도 채팅을 놓을 수 없는 이유는 에러 속에도 조금씩 아주 조금씩 무언가 바뀌어가는 걸 보는 즐거움이 컸기 때문이다. socket.io는 그런 즐거움을 줄줄 아는 녀석이다...
socket.io 기본 개념
Emit
emit은 이벤트를 발생시키는 것이다. 서버/클라이언트 둘 다 이벤트가 발생한다. 첫 번째 인자 sendMessage는 발생시키고자 하는 이벤트!
On
emit으로 발생된 이벤트에 대한 응답이다.
Join
- 클라이언트
클라이언트에서 emit으로 join 이벤트를 발생시키면서 이름과 룸을 서버에 넘긴다.
- 서버
서버는 on으로 join에 대한 응답을 한다. 그리고 socket.join으로 클라이언트가 고른 방으로 join시킨다.
client.js
하나씩 물고 뜯고 맛보자면 먼저 클라이언트 쪽. 두 개의 client를 만들기 위해 디렉토리를 다르게 해서 두 개의 파일을 만들었다. 보통 routing으로 query를 다르게 하는 것 같다!
채팅창이 켜지면 처음 실행되는 emit 함수다. 내가 만드는 채팅 페이지는 이미 유저와 room이 정해진 상태이기 때문에 일단 state값을 가져와서 넣어준다.
server.js
그럼 서버에서 연결하고 socket을 오픈한다. on함수로 입장한 유저의 이름과 room을 addUser에 저장한다. addUser가 필요한 이유는 하나의 채팅 방에 여러 유저가 있을 때 어떤 유저가 어떤 방에 메시지를 보냈는지 알기 위해서 객체로 저장하는 것이다.
저장한 user.room에 join시킨다.
client.js
이제 클라이언트가 메시지를 보내야 한다.
emit으로 보내고
on으로 받아와야 하는데 보내는 순간 받는 것도 해야하기 때문에 useEffect에 넣어준다.
server.js
on으로 메시지를 받고 getUser 모듈로 id가 일치하는 유저를 찾는다. 그리고 그 유저가 있는 방에 emit으로 메시지를 뿌리면 동시 클라이언트가 useEffect로 메시지를 받는다.
되어버렸어...
보완
이상하게 메시지가 10회 이상 주고 받으면 엄청 느려진다. 메시지를 한 번 보낼 때마다 클라이언트 쪽에서 렌더되는 게 어마어마하다. 왜 그런지 모르겠어... 어차피 백엔드와 합치면 클라이언트만 돌리면 되니까 상관없으려나... 그리고
새로고침을 할 때 50%의 확률로 user.room undefined 에러가 뜨고 서버가 꺼진다. 이것도 이유를 모르겠다. 그냥 이유를 모르겠는 것 투성이다. 그래도 너무 기쁘다. send를 눌렀는데 메시지가 가지런히 하나씩 양쪽 페이지에 뜨는 걸 보니 그간 socket.io에게 당했던 설움이 별안간 내렸던 눈 녹듯이 사라지는 것 같다. 메시지가 10개 쌓이면 견디지 못하고 에러가 나지만 그래도 사랑스러워 내 첫 채팅...
