🛠️ [트러블슈팅] socket.io 경로로 지속적으로 HTTP 요청을 보내는 문제

🚨 문제 상황

공부방 페이지에 접속 후 /socket.io 경로로 지속적으로 HTTP 요청을 보내는 현상이 발생한다.

Nov-30-2024_12-23-50

공부방 리스트 페이지로 나간 후에도 /socket.io 경로로 지속적으로 HTTP 요청을 보내고 있다.

Nov-30-2024_12-28-54

HTTP 요청 헤더

요청 형식: XMLHttpRequest

GET /socket.io/?EIO=4&transport=polling&t=lxrjhd23 HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: ko,en;q=0.9
Connection: keep-alive
Host: gomz.kr
Referer: https://gomz.kr/study-room/114
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
sec-ch-ua: "Google Chrome";v="131", "Chromium";v="131", "Not_A Brand";v="24"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-11-30_12 25 47

쿼리 문자열 매개변수

EIO: 4
transport: polling
t: lxrjhd23

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-11-30_12 25 54

HTTP 응답 헤더

HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Sat, 30 Nov 2024 08:05:04 GMT
Content-Type: text/html
Last-Modified: Sat, 30 Nov 2024 04:03:55 GMT
Transfer-Encoding: chunked
Connection: keep-alive
ETag: W/"674a8eab-3d7"
Content-Encoding: gzip

HTTP 응답

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GOMZ - 실시간 온라인 학습 플랫폼</title>
    <link rel="icon" href="/images/gomz-logo.png" />
    <meta
      name="description"
      content="캠을 켜고 다른 사람들과 함께 공부하는 시간을 기록할 수 있는 온라인 학습 플랫폼입니다."
    />
    <meta name="keywords" content="비대면, 공부방, 학습, 타이머, 화상 회의, 학습 시간 기록" />
    <link
      rel="stylesheet"
      as="style"
      crossorigin
      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
    />
    <script type="module" crossorigin src="/assets/index-wKdhJbca.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-C6ivelCl.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-11-30_12 26 06

⚠️ 문제 원인

useWebRTC에서 signaling 서버와 연결되는 socket을 다음과 같이 useRef로 관리하고, 초기값으로 io()로 생성해서 넣어주고 있었다.

// useWebRTC.ts
const useWebRTC = (): [WebRTCState, WebRTCControls] => {
  const socket = useRef(io());
  
  ...
  
  const joinRoom = async (roomId: string) => {
    ...

    socket.current = signalingClient(configuration, localStreamRef.current, webRTCMap.current);
    socket.current.emit('joinRoom', { roomId });

    return socket.current;
  };
  
  ...

공부방 페이지에 입장하면 joinRoom 함수가 실행되고 signalingClient 함수의 반환값으로 socket을 가져와서 저장한다.

signalingClient에서는 소켓 URL을 https://gomz.kr:3000로 설정해서 생성하고 있다.

// signalingClient.ts
const signalingClient = (...[configuration, localStream, webRTCMap]: SignalingClientParams) => {
  const socket = io(import.meta.env.VITE_SIGNALING_SERVER_URL);
  // 여기서 import.meta.env.VITE_SIGNALING_SERVER_URL은 https://gomz.kr:3000이다.
  
  ...

signalingClient가 실행되면 socket.current의 참조값이 새로운 소켓으로 변경되기 때문에 기존 소켓 객체가 가비지 컬렉션 대상이 되어 사라질 것으로 생각했다. → 결론: 사라지지 않고 메모리에 상주하고 있었다. 사라지지 않는 이유는 이어서 설명.

Socket.IO - Client API를 확인해보면 io()로 생성할 때 URL을 지정하지 않고 생성하면 기본적으로 도메인의 루트(/) 경로로 연결을 시도한다는 것을 알 수 있다.

Socket.IO - How it works를 확인해보면 WebSocket 연결이 네트워크 환경, 방화벽 또는 프록시 설정 때문에 불가능한 경우 Socket.IO는 자동으로 HTTP Long-polling 방식을 사용하는 걸 알 수 있다.

그리고 Socket.IO는 기본적으로 HTTP Long-Polling 방식으로 클라이언트와 서버 간 연결을 시작한 후, WebSocket으로 업그레이드를 시도한다.

브라우저의 네트워크 모니터에서 확인한 Socket.IO 업그레이드 메커니즘

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-11-30_18 05 42

3000번 포트로는 공식문서에 나온데로 HTTP Long-polling 방식으로 시작해서 WebSocket으로 업그레이드되고 있었다.

이후에 계속되는 요청의 경로를 보면 3000번 포트의 루트(https://gomz.kr:3000/)가 아닌 도메인의 루트(https://gomz.kr/) 경로로 GET 요청을 계속 보내는 것을 볼 수 있다.

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-11-30_18 10 01

즉, 맨 처음에 초기값으로 생성한 소켓이 연결을 계속 시도하고 있던 것이였다.

첫 번째 GET 요청(핸드쉐이크)이 정상적으로 처리되지 않아 계속해서 재시도하는 것으로 추정한다.

socket.current의 참조값을 변경하기 전에 기존 소켓에 대해 disconnect(), close() 등의 조치를 취해도 연결 시도를 멈출 수 없었다.

결론:

socket.current의 초기값으로 생성한 소켓이 잘못된 경로로 계속해서 연결 시도를 하고 있었기 때문에 가비지 컬렉션 대상이 되지 않아 메모리에 계속 상주하고 있었다.
공부방 리스트 페이지로 이동해도 마찬가지로 메모리에 상주하며 계속해서 연결 시도를 하고 있었다.
초기값으로 어떤 소켓도 생성하지 않는 것이 나을 것 같다.

✅ 문제 해결

초기값으로 소켓을 생성하지 않는다.

// 수정 전
const useWebRTC = (): [WebRTCState, WebRTCControls] => {
  const socket = useRef(io());
  
  ...

// 수정 후
const useWebRTC = (): [WebRTCState, WebRTCControls] => {
  const socket = useRef<Socket>();
  
  ...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🛠️ [트러블슈팅] socket.io 경로로 지속적으로 HTTP 요청을 보내는 문제

🚨 문제 상황

⚠️ 문제 원인

✅ 문제 해결

🧸 GOMZ

🚀 프로젝트 규칙

🚀 프로젝트 기획

📽 데일리 스크럼

👥 그룹 회고

📓 멘토링 일지

📆 회의록

🐧 개발일지

Clone this wiki locally