[NestJS & React] 유저 동접 방지 구현

유저 동시 접속 방지 기능을 개발이 완료된 서비스에 추가하는 방식으로 구현해야될 일이 생겼다.

해당 서비스의 경우, 로그인, 유저 관리를 세션/쿠키 방식이 아닌 JWT 방식으로 관리하고 있었기 때문에 동시 접속 방지를 websocket을 활용하여 구현하였다.

 

대략 어떻게 동시접속 방지를 구현할지에 대해 생각해보면 순서가 다음처럼 되었다.

 

1. 유저가 로그인할 때, 토큰을 프론트로 전송함과 동시에 socket connection을 연다.
2. 해당 유저가 로그아웃 할때까지 connection을 유지한다.
3. 다른 클라이언트에서 해당 유저가 접속하면 기존의 connection을 끊고, 새로 접속된 클라이언트에서만 로그인시킨다.

 

위와 같은 방식으로 큰 틀을 잡고 구현하였다.

 

기존의 사용하던 NestJS가 v7이고 socket.io의 버전이 v4로 업데이트된 NestJS는 v8이여서 버전업을 하고 진행하였다.

v7에서 v8로 NestJS 버전을 올리고, 400 에러가 발생할 가능성이 있다. 참고) https://eight20.tistory.com/86

NestJs v7 -> v8로 업그레이드 후, 400 Bad Request 발생 시

 

이번 글에서는 동시접속 방지를 어떻게 구현할지에 대해 생각해보았는데

다음 글에서 본격적으로 유저 동접 방지 기능 구현에 대해 말해보겠다.