🪵 2. WebSocket 서버

NestJS WebSocket 서버 구축

1. @WebSocketGateway 데코레이터

@WebSocketGateway는 NestJS에서 WebSocket 서버를 설정할 때 사용하는 데코레이터이다. 이 데코레이터는 클래스를 WebSocket 서버의 게이트웨이로 정의하고, 이를 통해 WebSocket 연결 및 메시지 처리를 자동으로 관리한다. 기본적으로 HTTP 서버와 비슷하게 작동하지만, 클라이언트가 지속적인 연결을 유지하면서 실시간 양방향 통신을 가능하게 해준다.

@WebSocketGateway({
  cors: '*',
  namespace: '/socket.io/game',
})

• cors: CORS 설정을 통해 다른 도메인에서 WebSocket 연결을 허용할지 여부를 설정한다.
• namespace: WebSocket의 네임스페이스를 지정하여 여러 종류의 WebSocket 연결을 분리할 수 있다. 예를 들어 /socket.io/game 네임스페이스는 게임 관련 클라이언트들만 연결되게 할 수 있다.

---

2. @SubscribeMessage 데코레이터

@SubscribeMessage는 클라이언트가 보내는 특정 메시지를 서버에서 처리할 때 사용하는 데코레이터이다. 각 메시지에 대해 별도의 핸들러 메서드를 만들어 클라이언트의 요청에 반응할 수 있다.

@SubscribeMessage('joinRoom')
async handleJoinRoom(@ConnectedSocket() client: Socket, @MessageBody() data: { roomId: string }) {
  // handle joining room
}

• 'joinRoom': 클라이언트가 보낸 'joinRoom'이라는 메시지를 받을 때 이 메서드가 실행된다.
• @ConnectedSocket() client: 현재 연결된 소켓 클라이언트를 가져오는 데코레이터이다. 클라이언트의 연결 상태나 데이터에 접근할 수 있다.
• @MessageBody() data: 클라이언트가 보낸 데이터를 처리하는 데코레이터로, 메시지의 본문을 파라미터로 전달한다.

---

3. 실시간 이벤트 처리

WebSocket 서버에서는 양방향 통신을 위해 클라이언트로부터 오는 메시지를 처리하고, 필요한 경우 실시간으로 데이터를 클라이언트로 보내는 방식으로 구현한다.

• emit: 서버가 클라이언트에게 메시지를 보낼 때 사용한다. 예를 들어, client.to(roomId).emit('playerJoined', ...)는 특정 룸에 속한 클라이언트들에게 'playerJoined' 메시지를 전달한다.
• on: 클라이언트가 보낸 특정 메시지를 수신할 때 사용한다. @SubscribeMessage 데코레이터가 그 역할을 한다.

---

4. OnGatewayDisconnect 인터페이스

OnGatewayDisconnect 인터페이스는 클라이언트 연결 종료 시의 동작을 처리하는 메서드를 구현할 수 있게 해준다. 클라이언트가 연결을 끊었을 때 이를 감지하고, 필요한 경우 상태를 정리하거나 리소스를 해제하는 등의 처리를 할 수 있다.

export class GameGateway implements OnGatewayDisconnect {
  async handleDisconnect(client: Socket) {
    // 클라이언트 연결 종료 처리
  }
}