소개

실시간 통신이 필요한 웹 애플리케이션을 개발할 때, 웹 소켓(WebSocket)은 매우 유용한 프로토콜입니다. 웹 소켓을 사용하면 실시간으로 데이터를 송수신할 수 있어 실시간 채팅, 알림 등의 기능을 구현할 수 있습니다. 이번 포스트에서는 자바스크립트와 NestJS를 사용하여 웹 소켓 통신을 구현하는 방법에 대해 알아보겠습니다.

NestJS란?

NestJS는 부트스트랩, Angular와 같은 오픈소스 프레임워크로써, Node.js 애플리케이션 개발을 위한 프레임워크입니다. NestJS는 자바스크립트와 TypeScript를 모두 지원하며, 모듈 기반 아키텍처를 제공하여 개발자가 애플리케이션을 구성하고 유지 관리할 수 있도록 도와줍니다.

NestJS와 웹 소켓 모듈

NestJS는 웹 소켓을 지원하기 위해 @nestjs/websockets 모듈을 제공합니다. 이 모듈을 사용하면 웹 소켓 서버를 구성하고 클라이언트와의 실시간 통신을 처리할 수 있습니다. 다음은 @nestjs/websockets 모듈을 설치하는 명령어입니다:

npm install @nestjs/websockets

웹 소켓 서버 생성하기

먼저, NestJS 애플리케이션에 웹 소켓 서버를 추가해야 합니다. NestJS에서는 웹 소켓 서버를 @WebSocketServer() 데코레이터와 함께 생성합니다. 다음은 웹 소켓 서버를 생성하는 예시입니다:

import { WebSocketServer, SubscribeMessage } from '@nestjs/websockets';
import { Server } from 'socket.io';

@WebSocketGateway()
export class WebSocketGateway {
  @WebSocketServer()
  server: Server;

  @SubscribeMessage('message')
  handleMessage(client, data) {
    this.server.emit('message', data);
  }
}

위 예시에서 @WebSocketGateway() 데코레이터는 웹 소켓 게이트웨이를 정의하는 클래스를 표시합니다. @WebSocketServer() 데코레이터는 실제 웹 소켓 서버 인스턴스를 가져오는 역할을 합니다. @SubscribeMessage() 데코레이터는 클라이언트로부터 메시지를 수신할 때 실행되는 메서드를 정의합니다. 위 예시에서는 클라이언트로부터 받은 메시지를 모든 클라이언트에게 전송하는 예시입니다.

클라이언트와의 연결

웹 소켓 클라이언트는 일반적인 웹 브라우저에서 사용되는 JavaScript를 사용하여 구현할 수 있습니다. 다음은 웹 소켓 클라이언트를 구현하는 예시입니다:

const socket = new WebSocket('ws://localhost:3000');

socket.addEventListener('open', () => {
  console.log('Connected to WebSocket server');
});

socket.addEventListener('message', (event) => {
  console.log('Received message:', event.data);
});

socket.addEventListener('close', () => {
  console.log('Disconnected from WebSocket server');
});

function sendMessage(message) {
  socket.send(message);
}

위 예시에서는 웹 소켓 서버로의 연결을 생성하고, 서버로부터 메시지를 수신받는 로직을 구현하였습니다. sendMessage() 함수는 클라이언트에서 서버로 메시지를 전송하는 역할을 합니다.

결론

NestJS를 사용하여 웹 소켓 통신을 구현하는 방법에 대해 알아보았습니다. 웹 소켓을 활용하면 실시간으로 데이터를 전송할 수 있어 웹 애플리케이션의 실시간 기능을 구현하는 데 유용합니다. NestJS의 @nestjs/websockets 모듈을 사용하면 효율적으로 웹 소켓 통신을 구현할 수 있습니다. 다음번에는 더 다양한 기능과 예제를 포함한 NestJS의 활용 방법을 알아보도록 하겠습니다.

자세한 내용은 NestJS 웹 소켓 모듈 문서를 참고하세요.

#NestJS #웹소켓