[NestJS] Web Socket

혜진·2024년 9월 6일

NestJS

목록 보기

4/12

WebSocket

Web Socket

HTML5 표준의 일부로, TCP 소켓을 기반으로 작동하며, 실시간 데이터 전송이 필요한 애플리케이션에서 주로 사용된다. 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 하며, 연결을 유지하면서 데이터를 주고받을 수 있는 프로토콜이다.

WebSocket 특징

양방향 통신: 서버와 클라이언트가 서로 자유롭게 메시지를 주고받을 수 있다. 클라이언트뿐만 아니라 서버도 능동적으로 데이터를 보낼 수 있다.
실시간성: 데이터 전송이 매우 빠르고, HTTP처럼 매번 요청과 응답을 주고받지 않으므로 실시간 데이터 전송에 최적화되어 있다.
연결 유지: 한 번 연결되면 클라이언트와 서버 간의 연결이 계속 유지되어 다수의 요청-응답 사이클이 필요하지 않다.
낮은 오버헤드: 웹소켓 연결은 HTTP 헤더의 오버헤드를 줄여, 데이터 전송을 더욱 효율적으로 만든다.
이벤트 기반: 웹소켓은 이벤트 기반으로 동작하므로, 특정 이벤트가 발생할 때마다 자동으로 데이터가 전송되거나 수신될 수 있다.

웹소켓의 동작 방식

핸드셰이크: 클라이언트가 서버에 연결 요청을 보내고, 서버는 이를 수락하여 연결을 확립한다. 이 과정에서 HTTP 프로토콜이 사용된다.
연결 유지: 핸드셰이크 후에는 TCP 연결이 지속되며, 클라이언트와 서버는 자유롭게 데이터를 주고받는다.
메시지 교환: 클라이언트와 서버는 양방향으로 메시지를 주고받는다. 메시지는 텍스트 또는 바이너리 데이터 형태로 전송된다.
연결 종료: 클라이언트나 서버 중 하나가 연결을 종료할 수 있으며, 연결이 종료되면 더 이상 데이터 전송이 이루어지지 않는다.

NestJS에서 웹소켓 사용 예제

📑 웹소켓 모듈 설치

npm install @nestjs/websockets @nestjs/platform-socket.io

📑 웹소켓 게이트웨이 생성

import { WebSocketGateway, SubscribeMessage, MessageBody } from '@nestjs/websockets';
import { Socket } from 'socket.io';

@WebSocketGateway()
export class ChatGateway {

  @SubscribeMessage('message')
  handleMessage(@MessageBody() data: string, client: Socket): string {
    console.log('Message received: ', data);
    client.emit('message', 'Message received!');
    return 'Message received on server!';
  }
}

📑 모듈에 게이트웨이 추가

import { Module } from '@nestjs/common';
import { ChatGateway } from './chat.gateway';

@Module({
  providers: [ChatGateway],
})
export class ChatModule {}

📑 클라이언트에서 웹소켓 연결

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io('http://localhost:3000');
  socket.emit('message', 'Hello server!');
  socket.on('message', (data) => {
    console.log(data);
  });
</script>