[Nest.js] Gateway와 socket.io

노션에 정리한거 임시 복붙

 

 

 

• Nest.js의 Gateway & socket.io
  • 웹소켓 - 실시간 채팅(1) (Socket.io, React, NestJS) 위 블로그를 참고해 구현
  • 공식사이트와 같이 참고하면 좋다.
  • Nest.js에서 Nest 명령어를 통해 생성할 수 있는 Gateway는 단순히 @WebSocketGateway 데코레이터가 달린 클래스이다.
  • socket.io와 ws 중 선택해 구축할 수 있다.
  • 연결 방법
    • Front-End (React)
    • const socket = io(`${process.env.REACT_APP_SERVER_ADDRESS}/chat`);
    • Back-End (Nest.js)
    • @WebSocketGateway({ namespace: 'chat', cors: true })
  • socket.broadcast vs. this.nsp
    • socket.broadcast: 나 빼고 전체 → 내가 친 채팅을 모두에게 보낼 경우
    • this.nsp: 나 포함 전체 → 접속 유저 수 같은 어떠한 값을 모두에게 동기화 시켜야 할 경우
  • socket.broadcast .to(chatObj.roomId) .emit('message', chatObj); this.nsp .to(chatObj.roomId) .emit('alert', alertObj, this.countNumberOfRoom(chatObj.roomId));
  • socket.io에는 네임스페이스(namespace)와 어댑터(adapter)라는 개념이 있다.
    • 네임스페이스
      • 네임스페이스는 클라이언트들 간의 통신을 그룹화하는 역할을 한다.
      • 특정한 기능이나 역할을 가진 클라이언트들끼리 묶어서 채팅방, 게임방, 실시간 데이터 전송 등의 기능을 구현할 수 있다.
      • 우리 프로젝트에선 /chat 에 대한 네임스페이스 객체를 생성해 사용했다.
    • 어댑터
      • 어댑터는 Socket.IO 서버와 실제로 데이터를 교환하는 인터페이스 역할을 한다.
      • 기본적으로 Socket.IO는 메모리 기반의 어댑터를 사용하지만, Redis, MongoDB, MySQL 등 다양한 데이터베이스를 어댑터로 사용할 수 있다.
      • 어댑터를 사용하여 Socket.IO 서버는 여러 개의 프로세스나 서버들 간에도 데이터를 공유할 수 있으며, 수평적 확장에 용이하다.
      • 어댑터를 사용하여 데이터베이스와 연동할 수 있으므로, 보다 안정적인 데이터 관리가 가능하다.
  • 이벤트를 감지하는 두 가지 adapter.on()과 @SubscribeMessage() 데코레이터의 차이
    • adapter.on()
      • Socket.IO의 네임스페이스(namespace) 어댑터를 사용하여 서버에서 이벤트를 감지한다.
      • 이 메서드를 사용하면 socket.io 서버에서 생성된 이벤트를 감지하고 이에 대한 콜백 함수를 실행할 수 있다.
      • 우리 프로젝트에선 delete-room 채팅방이 사라지는 경우에 대한 이벤트를 감지해 실행되게끔 활용했다.
    • @SubscribeMessage()
      • @SubscribeMessage() 데코레이터는 클라이언트로부터 받은 메시지를 감지하는 역할이다.
  • 정리
    • **adapter.on()**메서드는 Socket.IO 서버에서 이벤트를 감지하고, @SubscribeMessage() 데코레이터는 socket.io 서버에서 클라이언트로부터 수신한 메시지를 감지합니다. 이 두 가지는 서로 다른 방식으로 이벤트를 처리하고 다른 목적을 가지고 있다.