Socket.IO를 활용한 다중 창 관리자

이 프로젝트는 React, NestJS, Socket.IO를 사용하여 구축된 실시간 다중 창 관리자 애플리케이션입니다. 웹소켓을 활용하여 사용자들이 서로의 커서를 보고 실시간으로 창과 상호작용할 수 있는 협업 환경을 만드는 방법을 보여줍니다.

시작하기

이 지침은 개발 및 학습 목적으로 로컬 머신에서 프로젝트를 설정하고 실행하는 방법을 안내합니다.

전제 조건

• Node.js (v18 이상)
• npm

설치

1. 저장소 복제:

   git clone <repository-url>
   cd <repository-folder>

2. 서버 종속성 설치:

   npm install --prefix server

3. 클라이언트 종속성 설치:

   npm install --prefix client

애플리케이션 실행

1. 서버 시작:

   npm run --prefix server start:dev

   서버는 http://localhost:3000에서 실행됩니다.

2. 클라이언트 시작:

   npm run --prefix client dev

   클라이언트는 http://localhost:5173에서 실행됩니다.

http://localhost:5173으로 여러 브라우저 탭 또는 창을 열어 실시간 협업을 확인하세요.

Socket.IO 사용법

이 프로젝트는 Socket.IO를 활용하여 서버와 여러 클라이언트 간의 실시간 통신을 가능하게 합니다. 학습 목적으로 어떻게 사용되는지 자세히 설명합니다.

서버 측 (NestJS)

서버 측 구현은 server/src/events 디렉토리에 있습니다.

• events.gateway.ts: 모든 들어오는 소켓 연결 및 이벤트를 처리하는 주요 웹소켓 게이트웨이입니다. 실시간 통신을 조율하는 역할을 합니다.

• 서비스 (user.service.ts, window.service.ts): 깔끔한 아키텍처를 유지하기 위해 비즈니스 로직과 상태 관리는 서비스로 분리됩니다. 게이트웨이는 이 서비스들을 사용하여 사용자 및 창을 관리합니다.

• 이벤트 브로드캐스팅: 서버는 모든 연결된 클라이언트에 이벤트를 브로드캐스트하여 동기화를 유지합니다. 예를 들어, 사용자가 새 창을 만들면 서버는 모든 클라이언트에 windows:update 이벤트를 브로드캐스트합니다.

  // events.gateway.ts
  private broadcastWindows() {
    this.server.emit(
      SOCKET_EVENTS.WINDOW_UPDATE,
      this.windowService.getWindows(),
    );
  }

• 이벤트 처리: 게이트웨이는 클라이언트로부터의 특정 이벤트를 수신하고 그에 따라 작동합니다. 예를 들어, 클라이언트가 window:move 이벤트를 방출하면 서버는 창의 위치를 업데이트하고 변경 사항을 다른 모든 클라이언트에 브로드캐스트합니다.

  // events.gateway.ts
  @SubscribeMessage(SOCKET_EVENTS.WINDOW_MOVE)
  handleWindowMove(client: Socket, payload: MoveWindowDto): void {
    if (this.windowService.moveWindow(payload)) {
      this.broadcastWindows();
    }
  }

클라이언트 측 (React)

클라이언트 측 구현은 client/src 디렉토리에 있습니다.

• socket.ts: 이 파일은 Socket.IO 클라이언트를 초기화하고 애플리케이션 전체에서 사용할 소켓 인스턴스를 내보냅니다.

• 커스텀 훅: 클라이언트 측 로직은 소켓 관련 기능 및 상태 관리를 캡슐화하기 위해 커스텀 훅으로 구성됩니다.

  • useSocket.ts: 소켓 연결 상태 및 클라이언트 ID를 관리합니다.
  • useUsers.ts: 연결된 사용자 목록 및 커서 위치를 관리합니다.
  • useWindows.ts: 창의 상태를 관리하고 창 관련 이벤트를 처리합니다.

• 이벤트 방출: 클라이언트는 작업을 수행하기 위해 서버에 이벤트를 방출합니다. 예를 들어, 사용자가 창을 드래그하면 클라이언트는 새 좌표와 함께 window:move 이벤트를 방출합니다.

  // useWindows.ts
  const handleDragStart = (id: string, event: React.MouseEvent<HTMLDivElement>) => {
    socket.emit('window:focus', { id });
    // ...
  };

• 이벤트 수신: 클라이언트는 서버로부터 이벤트를 수신하여 상태를 업데이트합니다. 예를 들어, 클라이언트가 windows:update 이벤트를 수신하면 windows 상태를 업데이트하고 React는 UI를 다시 렌더링합니다.

  // useWindows.ts
  useEffect(() => {
    function onWindowsUpdate(windowsList: Window[]) {
      setWindows(windowsList);
    }
  
    socket.on('windows:update', onWindowsUpdate);
  
    return () => {
      socket.off('windows:update', onWindowsUpdate);
    };
  }, []);

이 프로젝트는 최신 기술 스택과 함께 Socket.IO를 사용하여 실시간 협업 애플리케이션을 구축하는 방법에 대한 실용적인 예시를 제공합니다. 코드를 연구함으로써 웹소켓 애플리케이션을 구성하고, 상태를 관리하며, 실시간 이벤트를 효과적으로 처리하는 방법을 배울 수 있습니다.