[nest | socket.io] 연결 성공한 이후 클라이언트 요청 응답오지 않는 경우

발단

nest, socket.io 를 사용하여 채팅을 구현하고 있다. 웹소켓 쪽은 처음 해보다보니 공식문서 레퍼런스를 그대로 참고하고, 구글링한 내용들을 통해 구현했다. 

포스트맨에서 테스트했을 때 분명 잘 연결되었는데, 이후 메세지를 전송했을 때 포스트맨에서는 잘 전송된 것처럼 보이지만 실질적으로 서버에서 반응이 없었다. 

 

 

해결 방법

아직 구현중이라 전체 코드는 나중에 올려보겠다. 지금은 문제에 대한 해결방법만 올려보려 한다. 

@WebSocketGateway(appConfig().CHAT_PORT, {
  namespace: "messages",
  cors: { origin: "*" },
  transports: ["websocket"],
})


// ... 

  @SubscribeMessage("messages")
  async handleMessage(@MessageBody() data: string) {}


  handleConnection(client: Socket, ...args: any[]) {
    console.log("웹소켓 유저 연결완료: ", client.id);
    this.logger.log(`Client Connected : ${client.id}`);
  }

 

웹소켓을 연결할 때 @WebSocketGateway 데코레이터를 통해 namespace를 통해 구분, cors를 설정, 그리고 websocket이라는 구분을 정의했다. 

클라이언트가 실제로 웹소켓 연결을 하게 되면 서버에서 handleConnection에서 찍은 콘솔이 나와야 한다.

 

클라이언트에서 api 요청을 보낼 때 http, https를 통해 보내는 것처럼 웹소켓은 ws, wss로 보내게 된다. (http, https처럼 http를 사용하여 테스트하고 있으므로 ws로 진행한다.)

그리고 현재 요청하는 포트 그대로 ws://localhost:80 으로 진행했는데, 여기서 서버로 실질적인 요청이 가지 않은 이유는 주소 자체는 올바르기 때문에 포스트맨에서는 요청이 성공한 것으로 보이지만, 우리는 namespace를 messages로 적용시켰기 때문에 엔드포인트에 대한 설정을 해줘야 한다. 이게 당연한 것인지 모르겠지만... 구글링했을 땐 잘 나오지 않았던 것 같다...ㅠㅠ 

 

ws://localhost:80/messages 로 namespace 대로 지정하고 포스트맨에서 요청을 보냈더니 서버에서 드디어 값을 반환했다.