TypeScript와 Nest.js로 실시간 채팅 구현하기

1. 프로젝트 설정 및 설치

먼저 새로운 Nest.js 프로젝트를 생성하고, Socket.io를 설치합니다.

 Nest.js 프로젝트 생성
 nest new real-time-chat-app

 Socket.io 설치
 npm install --save @nestjs/platform-socket.io @nestjs/websockets socket.io

2. WebSocket 모듈 생성

Nest.js에서 WebSocket을 사용하기 위해 WebSocketsModule을 생성하고 설정합니다.

import { Module } from '@nestjs/common';
import { WebSocketsModule } from './websockets/websockets.module';

@Module({
  imports: [WebSocketsModule],
})
export class AppModule {}

---

import { Module } from '@nestjs/common';
import { WebSocketsGateway } from './websockets.gateway';

@Module({
  providers: [WebSocketsGateway],
})
export class WebSocketsModule {}

3. WebSocket Gateway 생성

WebSocket Gateway를 생성하여 실시간 통신을 처리합니다.

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

@WebSocketGateway()
export class WebSocketsGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer()
  server: Server;

  async handleConnection(client: Socket) {
    // 클라이언트 연결 시 처리
  }

  async handleDisconnect(client: Socket) {
    // 클라이언트 연결 종료 시 처리
  }

  @SubscribeMessage('chat')
  handleMessage(client: Socket, message: string) {
    // 클라이언트로부터 메시지 수신 처리
    this.server.emit('chat', message); // 모든 클라이언트에 메시지 전달
  }
}

4. 클라이언트 측 구현

클라이언트 측에서도 Socket.io를 사용하여 실시간 채팅을 구현합니다.

 const socket = io(); // Socket.io 연결

    const chatDiv = document.getElementById('chat');
    const input = document.createElement('input');
    const button = document.createElement('button');
    button.textContent = '전송';

    button.addEventListener('click', () => {
      const message = input.value;
      socket.emit('chat', message); // 서버로 메시지 전송
      input.value = '';
    });

    socket.on('chat', (message) => {
      const messageDiv = document.createElement('div');
      messageDiv.textContent = message;
      chatDiv.appendChild(messageDiv);
    });

    chatDiv.appendChild(input);
    chatDiv.appendChild(button);

이와 같이 TypeScript와 Nest.js를 활용하여 실시간 채팅을 구현할 수 있습니다. WebSocket Gateway를 사용하여 서버 측에서 클라이언트로 메시지를 전달하고, 클라이언트 측에서도 Socket.io를 이용하여 실시간으로 메시지를 주고받을 수 있습니다.

오늘의 질의 응답😎

HTTP 메서드에 대해 설명해주세요.

나의 답변 😄

HTTP 메서드는 웹 서버와 클라이언트 사이의 통신에서 사용되는 요청 유형을 나타내며, 주로 다음과 같은 네 가지 메서드가 있습니다.
GET, 주로 데이터 조회에 사용되고, 정보를 서버로부터 가져오기 위한 요청입니다.
POST, 서버에 새로운 데이터를 생성하기 위한 요청입니다. 주로 데이터 생성 또는 업데이트에 활용됩니다.
PUT, 서버의 데이터를 수정하기 위한 요청입니다. 주로 데이터 갱신에 사용되며, 전체 데이터를 업데이트합니다.
DELETE, 서버의 데이터를 삭제하기 위한 요청입니다. 해당 데이터를 삭제하도록 서버에 요청합니다.
이러한 HTTP 메서드들은 각각 명확한 목적과 작업을 나타내며, 웹 애플리케이션 개발 및 API 디자인에서 적절하게 활용됩니다.