[nest.js] socket.io

❓ socket.io란?

• 실시간 양방향 통신을 처리하는 라이브러리다. 서버와 클라이언트 간의 실시간 데이터 교환을 가능하게 한다.

☢ socket.io 특징

• 실시간 양방향 통신: 이언트가 서버에 요청을 보내거나, 서버에서 클라이언트에게 데이터를 실시간으로 보낼 수 있다.
  

• 자동 재연결: 네트워크 문제나 클라이언트의 연결이 끊어졌을 때, socket.io 자동으로 재연결을 시도한다.
  

• 브로드캐스트: 서버가 연결된 모든 클라이언트에게 메시지를 보낼 수 있는 기능을 제공한다.

• 방과 네임스페이스: 특정 방에 속한 클라이언트들끼리만 통신할 수 있다.

• 이벤트 기반 통신: 이벤트 기반 시스템을 사용하여 클라이언트와 서버는 이벤트를 주고받으며 데이터가 전달된다.

• 저지연: 저지연 실시간 통신을 지원해 실시간 채팅, 온라인 게임, 실시간 데이터 시각화 등에 매우 적합하다.

• 사용자 정의 인증 및 권한 관리: 클라이언트가 서버에 연결할 때 인증 정보를 전달하고, 서버에서 이를 검증하여 접근 제어 가능하게 할 수 있다.

• 메시지 큐와 같은 대기열 시스템 지원: 큐 시스템을 사용하여 메시지 전송을 관리할 수 있다.(복잡한 메시징 시스템을 구축하려면 추가적인 처리 필요)

🥅 socket.io 작동방식

• 클라이언트와 서버는 이벤트를 통해 데이터를 양방향 통신하여 실시간으로 주고받을 수 있다.
  • 클라이언트가 서버에 연결하면 connect 이벤트가 발생
  • 서버는 emit() 메서드를 이용하여 클라이언트에 메시지를 전송
  • 클라이언트는 on() 메서드를 사용하여 서버에서 보내는 메시지를 수신
  • 네트워크 연결이 끊어지면 자동으로 재연결 시도

✍ socket.io 주요 데코레이터

@WebSocketGateway()

• 이 데코레이터를 사용하면, 서버는 클라이언트와의 웹소켓 연결을 자동으로 처리한다.

• 옵션을 설정할 수 있다. 포트 번호, CORS 설정 등

@WebSocketGateway(3000, { cors: { origin: '*' } })
export class EventsGateway {
  @WebSocketServer() server: Server;

  @SubscribeMessage('message')
  handleMessage(@MessageBody() data: string): string {
    console.log(data);
    return 'Message received!';
  }
}

@WebSocketServer()

• 이 데코레이터는 Server 인스턴스를 주입하여, 클라이언트와 실시간으로 메시지를 주고받을 수 있다.

• 서버에서 클라이언트에게 emit() 메서드를 사용하여 메시지를 전송한다.

@WebSocketServer() server: Server;

@SubscribeMessage()

• 이 데코레이터는 클라이언트가 특정 이벤트를 보냈을 때 해당 이벤트를 처리할 메서드를 지정한다.

• 클라이언트에서 보낸 메시지를 받아 처리하고 응답을 보내는 메서드에 사용된다.

@SubscribeMessage('message')
handleMessage(@MessageBody() data: string): string {
  console.log(data);
  return 'Message received!';
}

@MessageBody()

• 이 데코레이터는 클라이언트가 보낸 데이터의 본문을 받아온다. 보통 @SubscribeMessage() 메서드와 함께 사용한다.

@SubscribeMessage('message')
handleMessage(@MessageBody() data: string): string {
  console.log(data);  // 클라이언트가 보낸 메시지
  return 'Message received!';
}

@ConnectSocket()

• 이 데코레이터는 현재 연결된 클라이언트의 소켓을 메서드의 파라미터로 받을 수 있게 해준다. Socket 객체를 통해 클라이언트의 정보를 확인하거나 연결 상태를 조작할 수 있다.

@SubscribeMessage('message')
handleMessage(@MessageBody() data: string, @ConnectedSocket() socket: Socket): string {
  console.log(socket.id); // 클라이언트의 소켓 ID
  return 'Message received!';
}

📢 socket.io 주요 기능

1. 이벤트 기반 통신

• 클라이언트는 'message'라는 이름의 이벤트로 데이터를 보내고, 서버는 @SubcribeMessage('message') 핸들러로 이를 처리한다.

2. 네임스페이스

• 여러 개의 독립적인 소켓 서버를 생성할 수 있도록 하여, 각 네임스페이스에서만 특정 클라이언트가 연결되도록 한다.

코드

@WebSocketGateway({ namespace: 'chat' })
export class ChatGateway {
  @WebSocketServer() server: Server;

  @SubscribeMessage('message')
  handleMessage(@MessageBody() data: string): string {
    console.log(data);
    return 'Message received in chat namespace';
  }
}

3. 룸

• 클라이언트들을 그룹화하여 특정 룸에만 메시지를 보내는 기능이다.

코드

@WebSocketGateway()
export class EventsGateway {
  @WebSocketServer() server: Server;

  joinRoom(socket: Socket, room: string) {
    socket.join(room);
  }

  leaveRoom(socket: Socket, room: string) {
    socket.leave(room);
  }

  sendToRoom(room: string, message: string) {
    this.server.to(room).emit('message', message);
  }
}

4. 브로드캐스팅

• 서버는 특정 룸이나 모든 클라이언트에게 메세지를 보낼 수 있다. 동일한 메시지를 보내기가 가능하다.

코드

// 모든 클라이언트에게 메시지 보내기
this.server.emit('message', 'Hello, everyone!');