웹소켓 하면서 배운점
@websocketGateway() 는 뭐하는거임?
- nestjs에서 websocket 서버를 생성한는 데 사용하는 데코레이터다.
-이걸 사용하면 nest에서는 해당 클래스를 게이트웨이(Gateway)라 인식하고, 클라이언트와의 양방향 실시간 통신을 처리할 수 있게 된다.
*그러기 위해선 class를 만들어야겠지?*
@WebSocketGateway() 정리
기능 설명
@WebSocketGateway() WebSocket 서버를 생성하는 데코레이터
{ port: 8080 } 특정 포트에서 WebSocket 실행
{ cors: { origin: '*' } } CORS 설정 (모든 도메인 허용)
{ namespace: 'chat' } 특정 네임스페이스에서 WebSocket 실행
@SubscribeMessage('event') 특정 이벤트 수신 및 처리
OnGatewayConnection 클라이언트 연결 감지
OnGatewayDisconnect 클라이언트 연결 해제 감지
그렇담 OnGatewayConnection,OnGatewayDisconnect 이건?
-이건 각각 연결 감지를 해주는 건데
OnGatewayConnection : 클라이언트 연결 감지 해줌,
OnGatewayDisconnect : 클라이언트 연결 해제 감지 해줌.
@WebSocketServer() 이건?
-nestjs에서 웹소켓 서버 인스턴스를 직접 사용할 수 있도록 주입하는 데코레이터임.
-이걸 사용하면 socket.id의 server객체를 컨트롤 할 수 있음.
*특정 사용자에게 메시지를 보낼때나 모든 클라이언트에게 이벤트를 브로드캐스트할 때 사용된다.*
handleConnection(client: Socket) 이건 뭐임?
-클라이언트가 WebSocket에 연결될 때 실행됨
-여기선 사용예시가 있다.
(사용자 리스트 관리, jwt 인증 검증, 초기 메시지 전송)
그럼 반대로 연결이 해제 될때도 있어야 되는거 아닌가? 물론 있음
handleDisconnect(client: Socket) 이 친구다.
-클라이언트가 WebSocket 연결을 끊었을 때 자동으로 실행되는 메서드
nestjs를 사용할때 웹소켓 순서(?) 흐름
처음에 nest에는 웹소켓을 지원하는데 그중에서 gateway라는 것이 있따. 이건 쉽게 생각해서 클라이언트하고 서버하고 이어주는 다리라고 생각하면 될 것 같다. 처음에 gateway를 이용해 서버와 클라이언트를 연결해주고 여기서 한 술 더 떠서 jwt같은 검증도 진행할수 있다.
다음으로 서비스 파일에서 자신이 원하는 로직이 실행이 완료가 되었을때 예를들어서 (this.eventEmitter2.emit('card.updated', { boardId: column.board.id, cardData: updatedCard });) 이런식으로 이벤트를 발생시켜 보내준다.
다음으로 listener 파일에서 서비스에서 보낸 이벤트를 받아서 @OnEvent('comment.updated')
handleCommentUpdateEvent(payload: { boardId: number; commentData: any }) {
console.log('서버에서 댓글 업데이트 이벤트 발생:', payload); // 이벤트 발행 로그
// 방 이름과 이벤트 데이터 확인
const roomName = `board-${payload.boardId}`;
console.log(`이벤트를 전송할 방: ${roomName}`);
console.log('이벤트 데이터:', payload.commentData);
// 이벤트 전송
this.alarmGateway.server.to(roomName).emit('commentUpdated', payload.commentData);
}
이런식으로 작성을 해준다. 여기선 클라이언트로 보내줄 이벤트를 받아서 한번 가공(?) 시켜주고 보내준다고 생각하면 편하다.
마지막으로 클라이언트로 와서 // 'cardCreated' 이벤트 수신
socket.on('cardCreated', (data) => {
console.log('카드 생성 이벤트 수신:', data); // 콘솔 로그 추가
const notificationsDiv = document.getElementById('notifications');
const newNotification = document.createElement('div');
newNotification.textContent = `새 카드 생성: ${JSON.stringify(data)}`;
notificationsDiv.appendChild(newNotification);
});
이런식으로 수신해서 받으면 된다. 현재 알람 기능을 만드느라 수신받는쪽으로만 했지만 프론트엔드를 좀 더 진행을 하게 된다면 서비스 파일에서 했던것처럼 로직을 실행시켜 이벤트를 발생하는 식으로 진행이 가능 할 것이다.