NestJS에서 기본적으로 별도의 설정이 없으면 웹소켓을 사용할 때 socket.io를 사용하도록 설정이 되어었습니다.
ws를 사용하기 위해선 main.ts에 다음과 같은 설정이 필요합니다.
import { WsAdapter } from '@nestjs/platform-ws';
...
async function bootstrap() {
...
app.useWebSocketAdapter(new WsAdapter(app));
...ws를 기본적으로 사용하도록 객체를 생성하여 사용합니다.
당연히 모듈을 설치해야 사용할 수 있으므로 npm을 통해 설치합니다.
npm i -s @nestjs/websockets @nestjs/platform-ws그리고 nest g ga 게이트웨이이름를 입력하여 게이트웨이 파일을 생성합니다.
서버의 게이트웨이 파일 예제는 아래와 같습니다.
import {
SubscribeMessage,
WebSocketGateway,
WebSocketServer,
} from '@nestjs/websockets';
import { Server } from 'ws';
@WebSocketGateway(8080)
export class EventsGateway {
@WebSocketServer()
server: Server;
@SubscribeMessage('events')
onEvent(client: any, data: any) {
return { event: 'events', data: 'test' };
}
}
socket.io와 대부분 비슷하나 이벤트를 감지할 때 key값이 event인 문자열을 감지하여 처리하고 보낼 때 기본적으로 return을 사용하여 보내는 것을 알 수 있었습니다.
아래는 클라이언트쪽 코드 예제입니다.
<html>
<head>
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = function() {
console.log('Connected');
socket.send(
JSON.stringify({
event: 'events',
data: 'test',
}),
);
socket.onmessage = function(data) {
console.log(data);
};
};
</script>
</head>
<body></body>
</html>
websocket은 ws프로토콜을 사용하며 주소에도 ws를 붙여 서버주소를 가르키고 웹소켓 객체를 생성합니다.
통신을 할 때 send 메서드로 보내고 onmessage로 받을 수 있고 클라이언트-서버간 문자열로 데이터를 주고 받기 때문에,
보낼 때는 JSON.stringify메서드로 json->문자열로 변환하여 보내고, 받을 때는 JSON.parse를 통해 문자열->JSON으로 변환하여 이벤트와 내용을 처리합니다.
위의 예제 코드가 정상적으로 작동되었다면 브라우저의 콘솔에 로그가 남은 걸 확인할 수 있습니다.
NestJS의 웹소켓 예제는 아래 링크에서 확인할 수 있습니다.
백엔드 개발을 공부하고 있습니다.