NestJS를 활용한 자바스크립트 앱의 실시간 통지 기능 구현

08 Nov 2023

nestjs

서론

실시간 통지 기능은 현대 웹 애플리케이션에서 매우 중요합니다. 사용자에게 실시간 업데이트를 제공함으로써 더 나은 사용자 경험을 제공할 수 있습니다. 이를 위해 NestJS 프레임워크를 사용하여 JavaScript 앱에 실시간 통지 기능을 구현하는 방법에 대해 알아보겠습니다.

NestJS란?

NestJS는 TypeScript로 작성된 서버 사이드 애플리케이션을 구축하기 위한 프레임워크입니다. Express.js와 비슷한 아키텍처를 사용하며, 강력한 의존성 주입(Dependency Injection) 및 모듈 시스템을 지원하여 개발을 더욱 쉽고 효율적으로 할 수 있습니다.

실시간 통지를 위한 Socket.io 사용하기

실시간 통지를 구현하기 위해 Socket.io를 사용할 것입니다. Socket.io는 웹 소켓(WebSocket)을 기반으로 동작하며, 양방향 통신을 제공하여 실시간 데이터를 전송할 수 있습니다.

먼저, NestJS 프로젝트를 생성합니다.

$ npm install -g @nestjs/cli
$ nest new realtime-app
$ cd realtime-app

다음으로, Socket.io를 설치합니다.

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

이제, 앱 모듈에 Socket.io 모듈을 추가합니다.

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { SocketIoModule } from '@nestjs/platform-socket.io';

@Module({
  imports: [SocketIoModule],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

다음으로, 앱 서비스에서 Socket.io 이벤트를 처리하는 메서드를 작성합니다.

import { Injectable } from '@nestjs/common';
import { Socket } from 'socket.io';

@Injectable()
export class AppService {
  handleNotification(socket: Socket): void {
    socket.on('notification', (data) => {
      // 통지 처리 로직 작성
      console.log('Received notification:', data);
      // 클라이언트에게 통지 응답 전송
      socket.emit('response', { message: 'Notification received' });
    });
  }
}

마지막으로, 컨트롤러에서 클라이언트의 Socket.io 연결을 처리합니다.

import { Controller, Get, Post, Req, Res, UseGuards } from '@nestjs/common';
import { Socket } from 'socket.io';
import { AppService } from './app.service';

@Controller('notifications')
export class AppController {
  constructor(private readonly appService: AppService) {}

  @UseGuards(SocketAuthGuard)
  @Post('connect')
  handleConnection(@Req() req, @Res() res, @SocketIoServer() server: Server) {
    const socket = req['socket'];
    this.appService.handleNotification(socket);
    res.sendStatus(200);
  }
}

이제, JavaScript 앱에서 Socket.io를 사용하여 서버와 통신할 수 있습니다. 통지 이벤트를 서버로 전송하고 응답을 받을 수 있습니다.

결론

NestJS를 사용하여 JavaScript 앱에 실시간 통지 기능을 구현하는 방법을 살펴보았습니다. Socket.io를 통해 웹 소켓을 이용하여 실시간 데이터를 전송하고 처리할 수 있습니다. 실시간 통지는 사용자에게 더 나은 사용자 경험을 제공하며, NestJS는 이를 구현하기 위한 강력한 도구입니다.

#NestJS #실시간통지