[HandTris] #8. WebSocket이 중복 연결된 것 같아요 🤔 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)

온라인 게임에 필요한 실시간 상호작용을 구현하기 위해 Web Socket을 활용하였다. 그중 STOMP라는 메시징 프로토콜을 통해 상대방이 공격을 했는지 혹은 게임이 끝났는지 등의 상태 정보를 주고받았다. 이렇게 WS을 사용하며 겪었던 버그 중 가장 고치기 어려웠던 이슈는 socket이 두 번 연결되는 듯한 현상이었다.

1. 상황 파악

오른쪽 플레이어가 한 줄을 완성하면 왼쪽 플레이어에 두 줄의 공격을 함

오른쪽에서 한 줄의 블럭을 완성하면 왼쪽 플레이어에 두 줄의 공격이 가해짐을 알 수 있다. 이는 의도한 바가 아니었다. 한 줄의 블럭을 완성하면 한 줄의 공격이 가해지도록 의도하였다.

2. 원인 파악

한 게임이 종료된 후 play again 시 버벅이는 현상이 발생함

위 현상은 한 게임이 종료된 후 game restart 시 발생하였다. 더불어 웹캠의 손을 인식해서 node와 edge를 렌더링하는 속도도 현저히 느려졌다. 첫 번째 게임에서는 문제가 없다가 Play Again 버튼을 눌러 게임을 다시 시작하면  위 문제가 발생했다. 심지어 Play Again을 다시 눌러 세 번째 게임을 시작하면 게임이 불가능할 정도로 버벅거렸다. 이는 꼭 해결해야 하는 문제였다.

 

크롬 브라우저에서 기본으로 지원하는 탭별 메모리 사용량 확인 기능이 있다. 이로 확인했을 때 한 게임 당 대략 50mb의 메모리 사용량 증가를 일으켰다. 초기 200~250mb 수준으로 메모리를 차지하다가 세 네 판 정도 'play again'을 하면 400~450mb 메모리를 차지하며 렌더링 속도가 느려졌다.

3. 원인

첫 번째 가설은 '메모리 누수'였다. Play Again을 반복하면서 게임 컴포넌트를 계속해서 재렌더링하게 되는데, 이 과정에서 반복적으로 쌓 이는 변수가 있겠다고 생각했다.

크롬 개발자 도구에서 힘 스냅샷을 찍어 게임이 재실행되는 과정에서 메모리 사용량이 증가함을 확인했다. 다만 쌓이는 정도가 40~50 mb 수준으로 작았으며, 이렇게 심하게 버벅거리게 할 요인은 아니라는 생각이 들었다. 결정적으로 'garbage에 의해 공격이 두 번씩 적용될 확률은 적다'고 생각하여 두 번째 가설을 검증하러 넘어갔다.

 

두 번째 가설은 WS으로부터 두 번 공격 신호를 받는 것이었다(이 또한 틀렸으며 세 번째 가설로 문제를 해결함). 처음에는 렌더링이 느려지는 것 과는 무관한 가설이라 생각했다. 그런데, 게임이 재시작하는 횟수가 늘 때마다 WS을 통해 Subscribe 하여 받는 데이터가 두 배, 세 배 증가한다면 충분히 브라우저에 부담을 줄 수 있겠다 판단하였다.

WS을 subcribe하는 코드

isSub라는 Ref 객체를 useRef 훅으로 생성하여 구독 여부를 판단하고, 구독되어 있지 않은 경우(즉, isSub.current === false)에만 구독하도록 수정하였다.

Player2가 Publish한 하나의 메시지를 Player1이 여러 번 Subscribe 하는 것을 방지함

위 이미지와 같이 재구독 방지를 설정하였음에도 문제는 해결되지 않았다. Subscribe도 한 번하고, Publish도 한 번 하는데 마치 두 개의 메시지를 받은 것 같은 현상이 발생하는 이유는 뭘까 감이 잘 안 잡혔다. 🫠

 

이후 세 번째 가설을 도출하는데 까지 3~4일은 걸렸던 것 같다..

 

 

세 번째 가설은 WS으로부터 한 번 공격을 받지만 브라우저 내에 이를 받아 처리하는 부분이 여러 개라는 것이다. 하나의 명령(=공격 명령)을 받았을 때, (코드 어딘가의..) 두 부분에서 Board라는 한 객체를 조작할 수도 있다는 판단이 들었다. 충분히 일리가 있었고, 렌더링 속도가 느려지는 이유가 될 수 있었다.

Shake Hands 자체를 n번할 수도 있겠다는 가설을 세우고, 이를 해결해 봄

  useEffect(() => {
    const roomCode = getRoomCode();

    const connectWebSocket = async () => {
      if (!wsManagerRef.current) { // WS 중복 연결 방지
        wsManagerRef.current = new WebSocketManager();
        try {
          await wsManagerRef.current.connect(
            "https://api.checkmatejungle.shop/ws",
          );
          subscribeToEntering(roomCode);
        } catch (error) {
          console.error("Failed to connect to WebSocket", error);
        }
      }
    };
    connectWebSocket();
  }, []);

`wsManagerRef`가 한 번 할당되었다면 더 이상 할당되지 않게 조건을 걸었다. 이렇게 wsManagerRef가 반복 생성되는 것을 막자 렌더링 속도가 늦어지는 이슈, 게임 재시작 시 공격이 두 번 적용되는 이슈, 게임을 할 때마다 브라우저가 차지하는 메모리가 늘어나는 이슈 세 개를 모두 해결할 수 있었다.

4. 해결 ⭐

해결 전/후 공격 로직 비교

Play Again 버튼을 누르면서 반복적으로 wsManagerRef에 새로운 객체를 할당하는 로직으로 인한 버그였다. 그런데, 자바스크립트의 garbage collector는 뭐 하느라 이전 게임에서 생성한 wsManagerRef를 Sweep하지 못 했을까? 그 이유는 wsManagerRef에 남아 있던 콜백함수 때문이었다.

try {
        if (!isSub.current) {
          wsManagerRef.current?.subscribe( // SUBSCRIBE 콜백함수 존재
            `/user/queue/tetris/${roomCode}`,
            (message: {
              board: TetrisBoard;
              isEnd: boolean;
              isAddAttack: boolean;
              isFlipAttack: boolean;
              isDonutAttack: boolean;
            }) => {
              if (tetrisGameRef.current) {
                if (message.isEnd) {
                  tetrisGameRef.current.gameEnd = true;
                  stopAllMusic();
                  playSoundEffect("/sound/winner.mp3");
                  setGameResult("you WIN!");
                }
                if (message.isAddAttack) {
                  tetrisGameRef.current.isAddAttacked = true;
                } else if (message.isFlipAttack) {
                  setIsFlipping(true);
                  const playOppTetrisElement =
                    document.getElementById("tetris-container");
                  if (
                    playOppTetrisElement &&
                    !playOppTetrisElement.classList.contains("flipped-canvas")
                  ) {
                    playOppTetrisElement.classList.add("flipped-canvas");
                    
                    ...
                    
                      }, 100);
                    }, 2900);
                  }
                } else if (message.isDonutAttack) {
                  tetrisGameRef.current.isDonutAttacked = true;
                }
                tetrisGameRef.current.drawBoard2(message.board);
              }
            },
          );
          isSub.current = true;
        }
     ...

위 코드에서 알 수 있듯이 subscribe 후 메시지를 콜백 하는 함수가 wsManagerRef 인스턴스를 참조하고 있다. 즉, 명시적으로 인스턴스를 해제하지 않으면 garbage collector는 콜백 함수 참조가 남아 있기에 이 인스턴스를 해제시키지 않는다. 게임을 재시작할 때마다 이 인스턴스와 관련 있는 요소들이 쌓여서 버그를 일으켰던 것으로 Issue를 마무리하였다.

 

---

'나만의 무기를 준비하기' 기간이 끝난 후에라도 이 글을 쓰는 이유는 '핸드트리스'를 개발하며 느꼈던 짜릿했던 감정을 잊지 않기 위해서이다.

 

자려고 기숙사 침대에 누웠다가 버그가 머릿속에 맴돌아 다시 강의실로 돌아왔던 날, 그날 새벽에 해결한 버그는 잊지 못할 소중한 경험이 됐다.

 

원래 구현이 불가능한가 싶을 정도로 안 될 것 같은 기능을 구현해 낸 날 느꼈던 뿌듯함은 그 어떤 성취보다 컸었다. 내가 너무 대견하게 느껴졌던 날이다.

 

개발자로 커리어를 이어가며 힘들고, 속상한 날도 많을 테지만 이때 느꼈던 감정을 기억하며 꾸준히 앞으로 나아갔으면 좋겠다.

나만무 끝