42.Nest.js와 Next.js에서 웹소켓 활용하기, Nest.js에서 실시간 통신 구현하기

이번 강좌에서는 Nest.js와 Next.js를 활용하여 실시간 통신을 구현하는 방법에 대해 설명하겠습니다. 웹소켓(WebSocket)은 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜입니다. 이를 통해 정보를 실시간으로 주고 받을 수 있으며, 특히 채팅 애플리케이션, 실시간 대시보드 등과 같은 응용 프로그램에서 유용합니다.

1. 웹소켓의 기초 이해

웹소켓은 HTTP 기반의 통신 채널로, 매번 연결을 새로 여는 대신에 한 번 연결된 이후로 지속적인 연결을 유지하여 양방향 통신을 가능하게 합니다. 이로 인해 클라이언트와 서버 간의 데이터 전송 속도가 빨라지고, 불필요한 오버헤드가 줄어드는 장점이 있습니다.

1.1 웹소켓의 동작 구조

1. 클라이언트가 WebSocket 서버에 연결 요청.
2. 서버는 요청을 수락하여 연결을 완성.
3. 클라이언트와 서버가 연결된 후 양방향으로 데이터 전송.
4. 클라이언트 또는 서버가 연결을 종료.

2. Nest.js에서 웹소켓 구현하기

Nest.js는 Node.js를 위한 프레임워크로, 웹소켓을 쉽게 구현할 수 있도록 도와주는 ‘socket.io’ 패키지를 지원합니다. 먼저 Nest.js 프로젝트를 생성하고 필요한 패키지를 설치하는 방법을 알아보겠습니다.

2.1 Nest.js 프로젝트 생성

npm install -g @nestjs/cli
nest new websocket-demo
cd websocket-demo

2.2 필요한 패키지 설치

웹소켓 기능을 사용하기 위해 socket.io와 관련 패키지를 설치합니다:

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

2.3 웹소켓 모듈 생성

웹소켓을 구현하기 위해 새로운 모듈과 서비스를 생성합니다:

nest g module chat
nest g service chat
nest g gateway chat

2.4 웹소켓 게이트웨이 구현

생성된 chat.gateway.ts 파일을 다음과 같이 수정하여 웹소켓 기능을 구현합니다:

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

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

  @SubscribeMessage('message')
  handleMessage(client: any, payload: { sender: string; content: string }): void {
    this.server.emit('message', payload);
  }
}

2.5 서비스에 로직 추가

chat.service.ts에 비즈니스 로직을 추가하여 더 복잡한 기능을 구현할 수 있습니다. 예를 들어, 사용자 목록 관리, 메시지 저장 등을 추가할 수 있습니다.

3. Next.js에서 웹소켓 클라이언트 구현하기

Next.js에서는 브라우저에서 웹소켓 서버와 통신하는 클라이언트를 쉽게 생성할 수 있습니다. socket.io-client 패키지를 사용하면 기존의 socket.io 서버와 쉽게 연결할 수 있습니다.

3.1 Next.js 프로젝트 생성

npx create-next-app websocket-client
cd websocket-client
npm install socket.io-client

3.2 웹소켓 클라이언트 구현

Next.js의 pages/index.tsx 파일을 수정하여 웹소켓 연결을 구현합니다:

import { useEffect, useState } from 'react';
import { io } from 'socket.io-client';

const socket = io('http://localhost:3000'); // Nest.js 서버의 주소

export default function Home() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  useEffect(() => {
    socket.on('message', (message) => {
      setMessages((prev) => [...prev, message]);
    });

    return () => {
      socket.off('message');
    };
  }, []);

  const sendMessage = () => {
    socket.emit('message', { sender: 'User', content: input });
    setInput('');
  };

  return (
    
      WebSocket Chat
      
        {messages.map((msg, index) => (
          {msg.sender}: {msg.content}
        ))}
      
       setInput(e.target.value)}
        placeholder="Type a message"
      />
      
    
  );
}

4. Nest.js와 Next.js 연결하기

Nest.js 서버를 실행하고 Next.js 클라이언트를 통해 연결하면, 클라이언트가 Nest.js 서버와 실시간으로 메시지를 주고받을 수 있습니다. 이를 통해 간단한 채팅 애플리케이션을 구현할 수 있습니다.

4.1 Nest.js 서버 실행

npm run start

4.2 Next.js 클라이언트 실행

npm run dev

브라우저에서 http://localhost:3000에 접속하면 웹소켓 클라이언트가 실행되고, 다른 브라우저에서 같은 주소로 접속하여 메시지를 주고받는 실시간 통신이 가능해집니다.

5. 결론

Nest.js와 Next.js를 활용하여 간단한 웹소켓 기반의 실시간 통신 애플리케이션을 만들 수 있었습니다. 웹소켓은 실시간 데이터를 전달하는데 매우 유용하며, 다양한 분야에서 활용될 수 있습니다. 본 강좌를 통해 여러분이 웹소켓의 기초를 이해하고, Nest.js와 Next.js에서 쉽게 구현할 수 있는 방법을 배울 수 있었기를 바랍니다.