[Nestjs] 네스트js 프로젝트 websocket 구축해서 postman 테스트 해보기

nestjs 프로젝트로 websocket을 구현해서 postman으로 테스트를 해보겠다.

간단하게 테스트를 해볼것이기 때문에 코드레벨은 간단히 정의해보았다.

 

88번 포트로 웹소켓 통신을 시작할 것이고, 연결이 되기 시작했다면 'message'라는 값으로 통신을 시작할 것이다.

@WebSocketGateway(88, {
  transports: ['websocket'],
  cors: {
    origin: '*',
    methods: ['GET', 'POST'],
    transports: ['websocket', 'polling'],
    credentials: true,
  },
  allowEIO3: true,
})
 
export class ChatGateway
  implements OnGatewayConnection, OnGatewayDisconnect, OnGatewayInit
{
  @WebSocketServer() private readonly server: Server;
 
  public handleConnection(client: Socket): void {
    const roomId: string = client?.handshake?.query['id'] as string;
    
    client.connected && client.join(roomId);
  }
 
  public handleDisconnect(client: Socket): void {
    !client.disconnected && client.disconnect();
  }
 
  public afterInit(): void {
    instrument(this.server, {
      auth: false,
      mode: 'development',
    });
  }
 
  @SubscribeMessage<string>('message')
  private message(@MessageBody() message: Message) {
    this.server.to(message.roomId).emit('message', message);
  }
}

 

 

 

 

위에처럼 코드를 작성해서 서버를 실행한다면 이제 postman으로 테스트 할 수 있는 상황이 되었다.

 

1. 포스트맨을 접속한다.

 

 

2. 왼쪽 상단의 [ New ] 버튼을 눌러서 뜨는 창에서 [ Socket.IO ]를 눌러주자.

 

 

3. 그러면 이렇게 빈 창이 뜨는데 하나씩 채워보자!

 

 

4.

(1) 맨위의 url 창부터 확인해보자.

- host: 나는 로컬에서 우선적으로 테스트 하기 위해서 127.0.0.1(localhost)를 사용하였다. 

- port: 포트번호는 위에와 동일하게 88번 포트를 사용하였다.

- query: handleConnection 함수가 실행될때 사용할 id값과 nickname값을 쿼리로 같이 사용하였다.

 

(2) Message 창

- 메시지창은 구성하기 나름이다. 그렇기 때문에 정해진 규격없이 팀이나 회사가 정하는 방식으로 보내면 된다.

- 본문의 메시지창은 message 함수에서 사용하기 위해 보낸다.

- 나의 경우에는 메시지 타입을 정의해 놓는것을 선호한다.

export type Message = Readonly<{
  roomId: string;
  nickname: string;
  message: string;
  profileImage?: string;
  createdAt: Date;
  level: string;
}>;

- 메시지 본문의 경우 JSON으로 설정해야한다.

 

 

(3) Events 창은 소켓 서버에 발생한(emit) 이벤트 중 수신(on) 할 이벤트를 관리한다.

evnents는 커넥션 이후에 추가적으로 추가할 수 있지만, 나는 미리 설정하였다.

 

(4) Params는 쿼리스트링에 포함할 정보를 관리한다.

 

(5) Headers는 헤더에 포함할 정보를 관리한다. 나는 없기 때문에 비워두었다.

 

(6) Settings는 설정 정보를 가지고 있다.

 

(7) Ack 창

- Ack 창을 체크버튼을 눌러 체크를 해준다.

- 위의 코드를 보면 @SubscribeMessage('message')를 해주었기 때문에 공란에 message라고 채워준다.

 

 

5. 위에 같은 방식대로 창하나를 더 띄어서 룸에 접속할 client를 2명을 만들어야지 채팅 테스트가 가능하다.

나의 경우에는 'aaa' 와 'bbb'를 만들어서 사용해보겠다. 

2개의 client를 만들고 url 칸 옆의 파란색 [ Connet ] 를 눌러서 연결해주자. 그러면 연결되면 회색 [ Disconnet ] 변환되는걸 확인할 수 있다.

 

 

6. 2개의 client 모두 연결을 확인해보고 이제 [ Send ] 버튼을 눌러서 통신을 확인해보자.

 

확인 후 아이디 'aaa'로 Send 하면 밑에처럼 확인이 가능해진다.

밑에 message를 확인해보면 아래처럼 자세히 확인이 가능하다.

 

 

7. 그렇다면 client 'bbb'한테 전송이 될까? 아래처럼 'aaa'가 보낸 데이터가 도착하는것이 확인이 된다.