NestJS: Gateways (socket.io)

오픈소스·2023년 2월 5일

NestJS Boilerplate

목록 보기

9/16

제로초 NestJS 강의를 수료하고, NestJS에 OAuth 카카오 로그인 인증을 추가한 repo에 Chat 기능을 추가해 봅니다.

기본적으로 socket.io 양방향 통신만을 위해서는 NestJS Gateways만 추가하면 됩니다.
그러면 아무런 인증 없이, 해당 페이지에 접속한 사용자들끼리 메세지를 주고 받을 수 있지만, 인증된 사용자만 Chat할 수 있게 chat.html(GET)에 JwtAuthGuard를 붙여 주었습니다.

제로초 강의에서는 Send Message도 POST method를 통해 전달하여, 보안 및 사용자 정도를 추가로 처리하고, Service에서 this.eventsGateway.server.emit() 하는 코드로 설명합니다.

저는 인터넷에 보편적으로 나와 있는 심플한 형태로 서버도 chat을 subscribe 하는 형태로 구현하였습니다.

하면서 고민중의 하나가 socket.io front 코드였는데, poiemaweb 코드를 참조하였습니다.

login subscribe 없이 connection/disconnect에서 사용자 맵핑을 하고 싶었으나 하지 못하고, 사용자 수만 표시 하였습니다.

server log

[Nest] 6881  - 02/05/2023, 9:36:24 PM   DEBUG [EventsGateway] client(uqLCGK-thQOaCxT9AAAB) connected on namespace(/)
[Nest] 6881  - 02/05/2023, 9:36:25 PM   DEBUG [EventsGateway] client(uqLCGK-thQOaCxT9AAAB) disconnected on namespace(/)
[Nest] 6881  - 02/05/2023, 9:36:25 PM     LOG [HTTP] GET /chat 304 undefined - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 ::ffff:192.168.219.101
[Nest] 6881  - 02/05/2023, 9:36:25 PM   DEBUG [EventsGateway] client(_EnHVS2rPTI1_cclAAAD) connected on namespace(/)
[Nest] 6881  - 02/05/2023, 9:36:40 PM   DEBUG [EventsGateway] Object:
{
  "msg": "hello"
}

client

추가로 사용자 맵핑을 한다면, https://www.bootdey.com/snippets/view/Messages와 같이 front를 좀 더 꾸미려고 합니다.

참고)

오픈소스

이전 포스트

NestJS Custom Param decorators

다음 포스트

NestJS: Gateways (socket.io)

NestJS Boilerplate

NestJS Custom Param decorators

socket.io emit 하는 2가지 방법

0개의 댓글