NestJS에서 Socket.io 사용 에러

NestJs를 사용하여 슬랙 백엔드 클론을 하던 중 채팅 기능을 구현하기 위해 Socket.io 라이브러리를 사용하고자 했다.

$ npm i --save @nestjs/websockets @nestjs/platform-socket.io

명령어를 통해 nestjs에서 필요한 websocket 모듈들을 설치를 해준 뒤
event 폴더를 만들어 event gateway 파일을 생성했다.

// src/event/event.gateway.ts
import {
  ConnectedSocket,
  MessageBody,
  OnGatewayConnection,
  OnGatewayDisconnect,
  OnGatewayInit,
  SubscribeMessage,
  WebSocketGateway,
  WebSocketServer,
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';
import { onlineMap } from './onlineMap';

@WebSocketGateway({ namespace: /\/ws-.+/ })
export class EventsGateway
  implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect
{
  @WebSocketServer() public server: Server;

  @SubscribeMessage('test')
  handleTest(@MessageBody() data: string) {
    console.log('test', data);
  }

  @SubscribeMessage('login')
  handleLogin(
    @MessageBody() data: { id: number; channels: number[] },
    @ConnectedSocket() socket: Socket,
  ) {
    const newNamespace = socket.nsp;
    console.log('login', newNamespace);
    onlineMap[socket.nsp.name][socket.id] = data.id;
    newNamespace.emit('onlineList', Object.values(onlineMap[socket.nsp.name]));
    data.channels.forEach((channel) => {
      console.log('join', socket.nsp.name, channel);
      socket.join(`${socket.nsp.name}-${channel}`);
    });
  }
  afterInit(server: Server): any {
    console.log('WebSocket Server Init');
  }

  handleConnection(@ConnectedSocket() socket: Socket): any {
    console.log('connected', socket.nsp.name);
    // onlineMapdms 워크스페이스 참가자 목록을 실시간으로 담고 있는 객체
    if (!onlineMap[socket.nsp.name]) {
      onlineMap[socket.nsp.name] = {};
    }

    // broadcast to all clients in the given sub-namespace
    socket.emit('hello', socket.nsp.name);
  }

  handleDisconnect(@ConnectedSocket() socket: Socket) {
    console.log('disconnected', socket.nsp.name);
    const newNamespace = socket.nsp;
    delete onlineMap[socket.nsp.name][socket.id];
    newNamespace.emit('onlineList', Object.values(onlineMap[socket.nsp.name]));
  }
}

// websocket은 namespace안에 room이 있음
// workspace -> channel / dm

그리고 나서 서버를 실행을 했을 때

발생 에러

다음과 같이 gateWay에 있는 method를 읽어오지 못하는 에러가 발생했다.

해결 방법

공식문서에 나와있는 명령어를 통해 필요한 라이브러리가 설치되었을 때 버전은

"@nestjs/platform-socket.io": "9.3.6", 
"@nestjs/websockets": "9.3.6"

이었는데, 이 버전에서 지원이 되지 않거나 무언가 충돌이 발생하는 것 같다.
그래서 버전을 다운그레이드 하여 해결하였다.

"@nestjs/platform-socket.io": "9.1.6", 
"@nestjs/websockets": "9.1.6"

이후 정상적으로 서버가 작동되는 것을 확인할 수 있었다.

참고링크 : https://docs.nestjs.com/websockets/gateways
https://stackoverflow.com/questions/75375378/i-cannot-use-websocket-package-on-nestjs