[nestjs] socket.io 사용과 테스트

사용 라이브러리

"@nestjs/websockets": "^8.1.2",
"socket.io": "^4.3.1"

 

소켓 개념의 이해

우리가 통신할때는 http라는 통신 방법을 사용한다.

이 방법은 클라이언트가 서버에 요청을 보내면 서버가 클라이언트에 응답을 보내주는 방식으로,

일련의 요청과 응답이 끝나면 서버는 더 이상 클라이언트에 정보를 보내지 못한다.

http 통신 방식

이 방식으로 채팅을 구현하기엔 한 가지 문제가 있다.

클라이언트에서 채팅이 왔는지 확인하는 요청을 1초에 한 번씩 보낼 순 없는 노릇이다.

그래서 등장한 통신 방식이 WebSocket이다.

 

이 방식은 http와 다르게 request와 response로 통신하는것이 아닌, open과 close의 여부로 통신한다.

클라이언트에서 서버에 Socket을 열어달라고 한 뒤 일련의 데이터를 보내면, 서버는 연결된 모든 클라이언트에 해당 데이터를 전달한다.

 

이상 메신저의 기본적인 원리이다.

nestjs 프로젝트에 events 추가

// events.gateway.ts
import {
  MessageBody,
  SubscribeMessage,
  WebSocketGateway,
  WebSocketServer,
} from '@nestjs/websockets';
import { Server } from 'socket.io';

@WebSocketGateway(8080, { transports: ['websocket'] })
export class EventsGateway {
  @WebSocketServer()
  server: Server;

  @SubscribeMessage('ClientToServer')
  async handleMessage(@MessageBody() data) {
    this.server.emit('ServerToClient', data);
  }
}

먼저, socket을 열기 위해 socket.io 라이브러리를 사용한다. websocket이라는 라이브러리도 있으나 socket.io가 더 사용하기 쉽다.

 

데코레이터부터 살펴보자면,

@WebSocketGateway(8080, { transports: ['websocket'] })

socket을 8080번 포트에서 열겠다는 구문이다. 이 다음의 클래스 구현은 socket서버에서 일어나는 일을 처리하게 된다.

@WebSocketServer()
  server: Server;

서버 인스턴스에 접근하기 위해서 사용한다.

@SubscribeMessage('ClientToServer')
  handleMessage(@MessageBody() data) {
    this.server.emit('ServerToClient', data);
  }

클라이언트에서 보낸 메세지를 처리하는 핸들러이다.

클라이언트에서 ClientToServer라는 이름으로 메세지를 보내면 서버에선 메세지의 body에서 데이터를 읽어와 그대로 ServerToClient라는 이름으로 보낸다.

 

이제 EventsGateway를 provider로 내보낸 뒤, app.module.ts에서 imports해 main.ts에 다음과 같이 추가하면 된다.

app.useWebSocketAdapter(new IoAdapter(app));

postman으로 socket 테스트

아직 베타지만, postman에서 소켓 테스트를 지원한다.

이런식으로 소켓 테스트를 진행할 수 있는데, 앞서 설정했던 소켓 서버의 주소(보통은 서버의 주소 뒤에 설정한 포트만 붙이면 된다.)를 입력한 뒤 연결하면 된다.

연결된 화면

이제 Listeners에 ServerToClient를 입력하여 서버에서 보내는 메세지를 받을 준비를 한 뒤에 Event에 ClientToServer라는 이름으로 메세지를 보내면 된다.