45일차 - ReBook 채팅 뒤로가기 버그, 채팅 안보내지는 버그

채팅방에서 채팅방 리스트로 돌아가려고 뒤로가기를 하면 다음과 같은 오류 메시지가 떴다.

chunk-6VWAHX6D.js?v=376b407c:9129 Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.
    at Client2._transmit (http://localhost:5173/node_modules/.vite/deps/stompjs.js?v=376b407c:140:30)
    at Client2.disconnect (http://localhost:5173/node_modules/.vite/deps/stompjs.js?v=376b407c:318:16)
    at ChatSocket.disconnect (http://localhost:5173/src/lib/ChatSocket.js:92:24)
    at http://localhost:5173/src/pages/Chat/ChatRoomPage.jsx?t=1725324856998:43:27
    at safelyCallDestroy (http://localhost:5173/node_modules/.vite/deps/chunk-6VWAHX6D.js?v=376b407c:16748:13)
    at commitHookEffectListUnmount (http://localhost:5173/node_modules/.vite/deps/chunk-6VWAHX6D.js?v=376b407c:16875:19)
    at commitPassiveUnmountInsideDeletedTreeOnFiber (http://localhost:5173/node_modules/.vite/deps/chunk-6VWAHX6D.js?v=376b407c:18283:17)
    at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (http://localhost:5173/node_modules/.vite/deps/chunk-6VWAHX6D.js?v=376b407c:18245:13)
    at commitPassiveUnmountEffects_begin (http://localhost:5173/node_modules/.vite/deps/chunk-6VWAHX6D.js?v=376b407c:18181:19)
    at commitPassiveUnmountEffects (http://localhost:5173/node_modules/.vite/deps/chunk-6VWAHX6D.js?v=376b407c:18169:11)

 

이건 아직 웹소켓이 connecting state인데 send를 하려고 해서 생기는 문제라고 한다. 

정확히는 disconnect를 하려는데 조건 처리가 매끄럽게 된 게 아닌 것이었다. 

disconnect() {
    if (this.stompClient) {
      this.stompClient.disconnect();
    }
  }

 

기존 코드는 stompClient가 있으면 단순히 disconnect를 하는 것이었다. 

이걸 

  disconnect() {
    if (this.stompClient) {
      // WebSocket이 아직 연결 중인지 확인
      if (this.stompClient.ws.readyState === WebSocket.OPEN) {
        this.stompClient.disconnect();
      } else {
        console.warn(
          'WebSocket is not open. Current state:',
          this.stompClient.ws.readyState
        );
        // WebSocket이 여전히 연결 중인 경우, 연결이 완료된 후에 disconnect를 호출하도록 설정
        this.stompClient.ws.onopen = () => {
          console.log('WebSocket is now open, disconnecting...');
          this.stompClient.disconnect();
        };
      }
    }
  }

이렇게 바꿔서 

웹소켓이 'open' 상태일때만 'disconnect'를 시도하도록 변경하고 아직 connecting state에 있으면 연결이 완료된 후 disconnect를 호출하도록 설정했다.

 

----

 

채팅 메시지가 localhost여서 소켓이 제대로 연결 안되는 것 같다..