N개의 탭, 단 한 개의 웹소켓 (feat. Toss)

0. 들어가며

지난 달 Toss에서 개최한 Slash24에서 다양한 세션을 들었다.

그 중 가장 기억에 남았던 세션을 토대로, 실제 프로젝트에 적용해보고자 공부를 시작했다.

바로 N개의 탭에서 Shared Worker를 활용해 1개의 웹소켓으로 통신하는 내용이다.

아마 과거의 글을 읽어보신 분들은 아시겠지만, 우리 회사에서는 api 요청을 위해 ws 기반 프로토콜을 사용하고 있다.

1. 왜 필요할까?

그렇다면 해당 기술이 왜 필요한걸까?

크로미움 기반의 브라우저는 각 탭 또는 웹 페이지를 별도의 프로세스로 실행한다.

그렇기 때문에 각 탭마다 서버와 webSocket connection을 맺을 경우, 서버에 과도한 부하가 걸릴 수 있게된다.

이처럼 N개의 탭마다 webSocket connection을 맺는 것이 아닌, 브라우저 별로 webSocket connection을 맺게된다면 서버의 부하를 줄일 수 있게 된다.

2. SharedWorker를 활용한 webSocket 통신 아키텍처

다음은 실제 구현을 위한 아키텍처를 살펴보자.

이는 필자의 기존 프로젝트 구조, 취향 등에 맞춰 설계한 것임으로 감안하고 보시길..

뒤에서 나올 코드들은 실제 프로젝트에 적용한 코드가 아닌 학습을 위해 localHost에서 작성한 코드이다.

대략적인 구조를 파악하는데에만 사용하길 바란다.

2-1. useSharedWorker

이 훅은 전역에서 sharedWorker에 접근하기 용이하게 만들기 위한 커스텀 훅이다.

useSharedWorker 훅은 SharedWorker 객체 및 webSocket connection 관리, message 비동기 처리 등의 역할을 한다.

// useSharedWorker.ts


interface UseSharedWorkerReturn {
  connectWebSocket: (socketAddress: string) => Promise<void>;
  disconnectWebSocket: () => void;
  sendMessage: <T>(header: ReqHeader, body: ReqBody) => Promise<T>;
  webSocketStatus: string;
  error: string | null;
}

export const useSharedWorker = (): UseSharedWorkerReturn => {
  const sharedWorkerUrl = new URL("/sharedWorker.js", import.meta.url);
  const workerRef = useRef<SharedWorker | null>(null);
  const [webSocketStatus, setWebSocketStatus] =
    useState<string>("disconnected");
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const sharedWorker = new SharedWorker(sharedWorkerUrl);
    workerRef.current = sharedWorker;

    // SharedWorker로부터 메시지 수신
    sharedWorker.port.onmessage = (event) => {
      const { type, data } = event.data;

      switch (type) {
        case "STATUS":
          setWebSocketStatus(data);
          break;
        case "ERROR":
          setError(data);
          break;
        case "RESPONSE":
          break;
        default:
          console.warn(`Unknown message type: ${type}`);
      }
    };

    return () => {
      sharedWorker.port.close();
    };
  }, []);

  const connectWebSocket = useCallback(
    (socketAddress: string): Promise<void> => {
      return new Promise((resolve, reject) => {
        workerRef.current?.port.postMessage({
          type: "CONNECT",
          data: { socketAddress },
        });
        resolve();
      });
    },
    []
  );

  const disconnectWebSocket = useCallback(() => {
    workerRef.current?.port.postMessage({ type: "DISCONNECT" });
    setWebSocketStatus("disconnected");
  }, []);

  const sendMessage = useCallback(
    <T>(header: ReqHeader, body: ReqBody): Promise<T> => {
      return new Promise((resolve, reject) => {
        workerRef.current?.port.postMessage({
          type: "SEND_MESSAGE",
          data: { header, body },
        });

        const handleResponse = (event: MessageEvent) => {
          const { type, data } = event.data;
          if (type === "RESPONSE") {
            resolve(data);
          } else {
            reject(new Error("Unexpected message type"));
          }
        };

        workerRef.current?.port.addEventListener("message", handleResponse);
      });
    },
    []
  );

2-2. App (혹은 hook을 사용할 컴포넌트)

컴포넌트에서는 그저 useSharedWorker를 불러와 사용하면 된다.

// App.tsx

const App: React.FC = () => {
  const {
    connectWebSocket,
    disconnectWebSocket,
    sendMessage,
    webSocketStatus,
  } = useSharedWorker();

  const [responses, setResponses] = useState<string[]>([]);

  // WebSocket 연결 함수
  const handleConnect = async () => {
    try {
      await connectWebSocket("wss://localhost:8080");
      console.log("Connected to WebSocket server.");
    } catch (error) {
      console.error(error);
      alert("Failed to connect to WebSocket server.");
    }
  };

  // WebSocket 연결 해제 함수
  const handleDisconnect = () => {
    disconnectWebSocket();
  };

  // 버튼 클릭 시 API 요청 트리거
  const handleSendRequest = async () => {
    try {
      const response = await sendMessage(
        {
          targetServiceName: "TestService",
          messageType: "REQUEST",
          contentType: "TEXT",
          requestId: Date.now(),
        },
        { data: "Sample data from client" }
      );

      setResponses((prevResponses) => [
        ...prevResponses,
        JSON.stringify(response),
      ]);
    } catch (error) {
      console.error("Error sending message:", error);
    }
  };

  return (...);
};

2-3. SharedWorker

가장 중요한 SharedWorker.js 코드이다.

사실 거창하게 시작했지만 self, messagePort 등에 익숙하다면 별로 낯설지 않을 것이다.

또한 후에 서술하겠지만 완전히 완성한 코드(메모리 누수 이슈 미해결)가 아니라서 감안하고 보면 좋을 듯하다.

// public/sharedWorker.js

class FetchWS {
  ...
}

const sharedFetchWS = new FetchWS();
const connections = {}; // { clientId: port }

self.onconnect = (event) => {
  const port = event.ports[0];
  const clientId = `client-${Date.now()}`;
  connections[clientId] = port;

  port.postMessage({
    type: "CONNECTED",
    data: { message: "WebSocket connected", clientId },
  });

  port.onmessage = async (event) => {
    const { type, data } = event.data;

    switch (type) {
      case "CONNECT":
        if (sharedFetchWS.isConnected()) {
          port.postMessage({ type: "STATUS", data: "connected" });
          return;
        }
        await sharedFetchWS.connect(data.socketAddress);
        port.postMessage({ type: "STATUS", data: "connected" });
        sharedFetchWS.setOnMessageHandler((event) => {
          const response = JSON.parse(event.data);
          Object.values(connections).forEach((p) => {
            p.postMessage({ type: "RESPONSE", data: response });
          });
        });
        break;

      case "SEND_MESSAGE":
        if (sharedFetchWS.isConnected()) {
          const message = JSON.stringify({ ...data, clientId });
          sharedFetchWS.sendMessage(message);
        }
        break;

      case "DISCONNECT":
        sharedFetchWS.socket.close();
        delete connections[clientId];
        port.postMessage({ type: "STATUS", data: "disconnected" });
        break;

      default:
        port.postMessage({ type: "ERROR", data: "Unknown message type" });
    }
  };

  port.start();
};

3. 여러 이슈들

사실 하루 이틀이면 끝날 줄 알았던 내용이었는데, 생각보다 많은 이슈가 있어서 꽤 오랜 시간을 투자했다.

혹시나 webWorker, sharedWorker가 처음이라면 나와 같은 실수를 할 수 있으니 이 글이 조금이나마 도움이 되면 좋겠다.

또한 이슈에 대한 깊이있는 공부보다 구현이 우선이었어서, 잘못된 정보가 있을 수도 있고 너무 얕은 수준의 내용일 수도 있으니 감안해서 보길 바란다.

(잘못된 정보가 있으면 댓글 남겨주세요...ㅠ)

3-1. SharedWorker가 안읽어져요

기존 CRA로 만들어놓은 localHost에서 실행을 해보는데, sharedWorker.js를 읽어오지 못하는 이슈가 있었다.

검색을 통해 번들링 문제임을 알게 되었다. (아닐 수도 있습니다)

CRA 환경에서는 webpack 설정을 기본적으로 제한하고 있기 때문에 직접 명령어를 통해 webpack 설정을 수정하거나 별도의 라이브러리의 도움을 받아야 했다.

라이브러리 의존성을 추가로 만들고 싶지 않아 다른 방법을 알아보던 중, vite의 경우 손쉽게 불러올 수 있다는 정보를 얻었다.

export default defineConfig({
  plugins: [react()],
  publicDir: "public", // 기본값은 'public'입니다. 생략 가능
  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, "key.pem")),
      cert: fs.readFileSync(path.resolve(__dirname, "cert.pem")),
    },
    port: 5173, // 기본 포트를 사용하거나 원하는 포트로 변경
  },
  build: {...},
  worker: {
    format: "es",
  },
});