웹 소켓 재연결 문제

웹 소켓 재연결 시 되지 않는 문제 발생

우리 팀은 채팅 기능과 관련하여 게시물과 사용자가 연동되어 채팅방이 만들어진다. 유기 동물 의심신고, 반려 동물 실종 신고 게시물을 올릴 수 있고 이 게시물을 올린 사용자와 채팅을 할 수 있게 하는 것이 우리의 기획이었다.
채팅 기능과 관련해서 최초시에는 채팅방이 잘 만들어지고 웹소켓 또한 잘 연결되어 메세지 전송, 받기가 잘 되었다. 하지만 채팅방을 나간 후 다시 연결하려고 하면 연결이 되지 않았다. 아래 사진이 정상적으로 연결이 되었을 때고, 정상적으로 연결이 되지 않으면 Opening Websocket...이라는 로그만 찍힌다.

신기한 점은 메세지 전송은 잘 되었고, 고독 해제와 관련해서만 기능이 정상동작하지 않았던 것이다.

원인

위와 같은 에러가 발생하는 원인을 생각해보았을 때 disconnect, unsubscribe와 관련해서 잘 동작하지 않는 것 같았다. 그래서 로그를 찍어 subscribe되는 id를 확인하고 그
아이디를 연결 해제를 해주었지만 이전과 같이 Opening Web Socket… 만 로그에 뜨며 연결이 되지 않았다. disconnect가 실행 되는 것은 확인했는데 연결이 안되어서 원인 파악이 어려웠다.

아이디가 sub-0인 것을 확인

sub-0 으로 구독해제를 하고 연결해제를 함

해결

const ChatRoom = () => {
		...
		const socket = new SockJS(`${process.env.REACT_APP_HOME_URL}/ws/chat`);
    client = Stomp.over(socket);
		...
}

기존에는 위 코드 부분이 함수형 컴포넌트내에 바로 정의가 되어있었는데, 아래의 코드처럼 웹소켓 연결을 하는 함수를 따로 만들어 그 함수 내에 정의를 해주었다. 그리고 useEffect
훅을 사용해 최초 마운트 시에만 연결, 언마운트시에 연결해제, 구독해제를 하는 함수를 정의하고 기능이 동작하도록 했다.

  const stompConnect = () => {
    const socket = new SockJS(`${process.env.REACT_APP_HOME_URL}/ws/chat`);
    client = Stomp.over(socket);
    client.connect({}, () => {
      client.subscribe(
        `/sub/${id}`,
        (response) => {
  ...
  };

  const stompDisconnect = async () => {
    try {
      ...
      await client.unsubscribe(id);
		}
			...
  };
	...
  useEffect(() => {
    const fetchData = async () => {
      await getChatLog(id);
      stompConnect();
    };
    return () => {
      stompDisconnect();
    };
  }, []);

회고

채팅 기능은 1.5순위로 준비되었지만, 에러의 원인을 파악할 수 없어서 정말 오래 걸렸다. 완전히 수정하기까지 일주일이 넘게 걸려서 채팅 기능을 포기할까 생각도 했었지만, 채팅 기능은 백엔드 팀원과 함께 하는 기능이기 때문에 함께 했던 노력을 허사로 만드는 것은 아닌 것 같았다. 그래서 채팅 기능과 관련된 모든 기능을 지우고 하나씩 기능과 관련하여 함수로 만들어 처음부터 차근차근 코드를 작성했다. 일주일 넘게 걸린 채팅 기능이 이제 완전히 잘 동작했을 때의 기쁨은 말로 표현할 수 없다ㅠㅠ