[노마드코더] 줌 클론 코딩 - 6. 개설된 방, 사용자 수 띄우기

Adapter 란?

Adapter | Socket.IO

socket.io

  web socket 프로젝트에서 클라이언트 트래픽이 늘어나게 된다면, 하나의 서버로는 부족하게 되고 여러 개의 서버로 나누어 처리하게 될 수 있다. 이러한 프로그램을 여러개의 서버로 나누어 운영하는 경우에 각 ServerA, ServerB에 연결된 클라이언트 간 통신이 불가하는 문제점이 생기게 된다.

 

Adapter는 이러한 경우를 대처하기 위해 두 서버를 연결하여 데이터를 전송하는 기능을 한다.

따라서 이러한 경우에 Adapter는 MongoDB와 같은 외부 DB와 연결하여 서버 간 통신을 해주는 것이다.

 

현재 실습에서는 단순한 하나의 서버이므로 메모리에 Adapter를 연결시켜 사용한다.

 

server.js

console.log(wsServer.sockets.adapter);

adapter을 출력해보면, 현재 개설된 rooms와 socket id의 sids를 확인할 수 있다.

 

먼저 rooms는 private room와 public room가 있으며,
private room은 서버와 브라우저간의 연결을 뜻하고 personal ID로 구성된다.

public room은 내가 생성한 이름으로 시작한다. 그리고 Set 안에는 personal ID로 되어있으며, 이 Set에는 해당 public room에 연결된 personal ID들로 되어있다.

따라서, rooms와 sids을 비교하여 현재 개설된 클라이언트가 생성한 public room만을 추출할 수 있다.

 

개설된 방 추출

server.js

- 어댑터에 저장된 sids와 rooms를 비교하여 publicRooms 만을 추출하는 함수를 정의했다.

 

 

연결된 모든 socket 클라이언트에 방 현황 갱신

server.js

wsServer.sockets.emit("room_change", publicRooms()); // 모든 클라이언트 소켓에 새로운 방 공지

'

- 위의 새로운 방 공지 코드를 초기, 방생성, 방 삭제될 때 각각 추가하여, 현재 방 현황을 갱신하도록 했다.

 

app.js

- 초기 화면 해당 요소에 방 현황 값을 추가한다. 매번 값을 추가하기 전에 ul을 초기화 해서 중복을 방지한다.

home.pug

 

방 안에 있는 사람 수 띄우기

rooms에 있던 key값들의 value의 개수가 해당 room에 있는 사람 수가 된다.

 

server.js

- roomName의 size가 사람 수가 되며, ?는 nullable이다.

 

- welcome, disconnecting의 이벤트 발생 시 해당 방의 유저 수를 count 하는 countRoom()의 값을 그대로 클라이언트에 주어 전송한다.

app.js

- 해당 이벤트 부분에 간단하게 h3 수정해 줌으로써 해당 방의 인원수를 갱신할 수 있다.

 

하지만 이대로는 방에 막 들어갔을 때 인원수 파악할 수 없다.

server.js

앞서 처음 방 접속시, server에서 done() 함수 트리거를 호출할 때 인자로 countRoom() 값을 주어 콜백 했다.

app.js

또한 처음 showRoom()을 수정하여 처음 방을 개설할 때에도 인원수 갱신이 되도록 수정완료했다.

 

---

Admin Panel

socket.io에서 제공하는 admin UI이다.

 

Admin UI | Socket.IO

npm i @socket.io/admin-ui

server.js 수정

 

 

 

auth는 인증 부분으로, 위와 같이 username, password를 부여할 수 있다.

 

admin 페이지

위와 같이 서버의 현황을 파악할 수 있다.

 

 

소스 코드

https://github.com/pkd98/clonecoding/tree/258a367644a34fca70b12771e9673fa788be5579/zoom/src

GitHub - pkd98/clonecoding