반응형
NestJS와 Socket.io를 사용한 채팅 서버 구현
이번 페이지에서는 NestJS와 Socket.io를 사용하여 간단한 채팅 서버를 구현하는 방법을 알아봅니다.
필요한 패키지 설치
먼저, Socket.io와 관련된 패키지를 설치해야 합니다. 터미널에서 다음 명령을 실행하세요.
npm install --save @nestjs/websockets @nestjs/platform-socket.io socket.io-client
채팅 게이트웨이 생성
NestJS의 게이트웨이를 사용하여 소켓 서버를 생성합니다. 터미널에서 다음 명령을 실행하여 채팅 게이트웨이를 생성하세요.
nest generate gateway chat
생성된 src/chat.gateway.ts 파일을 열고 다음과 같이 수정합니다.
import { SubscribeMessage, WebSocketGateway, WebSocketServer, WsResponse } from '@nestjs/websockets';
import { Server } from 'socket.io';
@WebSocketGateway()
export class ChatGateway {
@WebSocketServer()
server: Server;
@SubscribeMessage('message')
handleMessage(client: any, payload: any): WsResponse<void> {
// 클라이언트로부터 받은 메시지를 모든 클라이언트에게 전송합니다.
this.server.emit('message', payload);
return;
}
}
채팅 게이트웨이 등록
src/app.module.ts 파일을 열고 다음과 같이 수정하여 채팅 게이트웨이를 등록합니다.
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ChatGateway } from './chat.gateway';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';
@Module({
imports: [
ServeStaticModule.forRoot({
rootPath: join(__dirname, '..', 'public'),
}),
],
controllers: [AppController],
providers: [AppService, ChatGateway],
})
export class AppModule {}
클라이언트 측 소켓 설정
public 폴더에 socket.js 파일을 생성하고 다음 내용을 추가합니다.
const socket = io();
socket.on('message', (message) => {
// 서버로부터 받은 메시지를 콘솔에 출력합니다.
console.log('Message from server:', message);
});
// 서버에 메시지를 전송하는 예제 함수입니다.
function sendMessage(message) {
socket.emit('message', message);
}
index.ejs 파일 수정
views/index.ejs 파일을 열고 다음과 같이 수정하여 클라이언트 측 소켓 스크립트를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
</head>
<body>
<div id="chat">
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" autofocus/><button>Send</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="/socket.js"></script>
<script>
// 메시지를 받아 화면에 출력하는 함수
function addMessage(message) {
const li = document.createElement('li');
li.innerText = message;
document.getElementById('messages').appendChild(li);
}
// 서버로부터 받은 메시지를 화면에 출력
socket.on('message', (message) => {
addMessage(message);
});
// 메시지 전송 버튼 클릭 이벤트 처리
document.getElementById('form').addEventListener('submit', (e) => {
e.preventDefault();
const input = document.getElementById('input');
sendMessage(input.value);
input.value = '';
});
</script>
</body>
</html>
이제 NestJS와 EJS, 그리고 Socket.io를 사용한 간단한 채팅 애플리케이션이 완성되었습니다. 애플리케이션을 실행하고 여러 브라우저에서 테스트해보세요.
터미널에서 다음 명령을 실행하여 애플리케이션을 시작합니다.
npm run start
위와 같이 나오면 정상적으로 작동이 되는 겁니다.
이 후 포스팅은 추가적인 기능과 CSS를 추가구현할 예정입니다.
반응형
'Framework > NestJS' 카테고리의 다른 글
| NestJS - Socket 통신을 이용한 간단한 채팅페이지 구현하기 # 4 (1) | 2023.04.28 |
|---|---|
| NestJS - Socket 통신을 이용한 간단한 채팅페이지 구현하기 # 2 (0) | 2023.04.17 |
| NestJS - Socket 통신을 이용한 간단한 채팅페이지 구현하기 # 1 (2) | 2023.04.17 |
