🎯 socket.io 라이브러리 설치
$ npm i --save @nestjs/websockets @nestjs/platform-socket.io
socket.io와 socket.io-client 또는 cnd에서 import해오는 거 서로 버전이 맞아야한다. 4.8.1 = 4.8.1
⚽ socket.io gateway 생성
파일/코드 1. events.gateway.ts 생성
import {
ConnectedSocket,
MessageBody,
SubscribeMessage,
WebSocketGateway,
WebSocketServer,
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';
// 5500 socket server
@WebSocketGateway(5500, {
cors: {
origin: '*', // CORS 설정
methods: ['GET', 'POST'],
allowedHeaders: ['Content-Type'],
},
})
export class EventsGateway {
// socket 서버 실행
@WebSocketServer()
server: Server;
// events namespace
@SubscribeMessage('events')
test(@MessageBody() data: any, @ConnectedSocket() client: Socket) {
console.log(data);
client.emit('events', 'hello client');
}
}
- @WebSocketGateway(): 5500 소켓 서버 설정
- @WebSocketServer(): socket 서버 실행
- @SubscribeMessage('events'): events 네임 스페이스
- @MessageBody(): client에서 보내는 data
- @ConnectedSocket(): client로 보내는 data
🏀 socket.io client 생성
파일/코드 1. client/index.html
<html>
<head>
<script
src="https://cdn.socket.io/4.3.2/socket.io.min.js"
integrity="sha384-KAZ4DtjNhLChOB/hxXuKqhMLYvx3b5MlT55xPEiNmREKRzeEm+RVPlTnAn0ajQNs"
crossorigin="anonymous"
></script>
<script>
// socket 5500 포트 연결
const socket = io('http://localhost:5500');
// socket이 connect될 떄 실행
socket.on('connect', function () {
console.log('socket이 연결되었습니다.');
// events socket 서버에 데이터를 보냄
socket.emit('events', 'hello world server');
});
// events 서버로 부터 데이터를 받음
socket.on('events', function (data) {
console.log(data);
});
</script>
</head>
<body></body>
</html>
- socket cdn 이용
- socket.on('connect'): socket 서버와 연결될 때
- socket.on('events'): socket events 서버와 통신
개발 경험치 쌓는 곳