#2.11 Admin Panel

sockst.io의 백엔드를 위한 Admin UI가 있다.

내가 socket.io 서버의 호스트가 될 수 있는것이다.

우선 터미널을 열고 npm i @socket.io/admin-ui를 설치하면 된다.

설치 후에 instrument를 import해야 한다.

그리고 socket.IO server를 만들었던 방식을 조금 변경해야 한다.

import SocketIO from "socket.io";
const wsServer = SocketIO(httpServer);

//위와 같이 작성되었던 코드에서 아래의 방식으로 다시 작성한다.

import { Server } from "socket.io";

const wsServer = new Server(httpServer, {
  cors: {
    origin: ["https://admin.socket.io"],
    //"https://admin.socket.io" 에서 localhost:3000에 액세스 할 것이다.
    credentials: true,
  },
});
//온라인에서 Admin ui를 실제로 테스트 할 수 있는 데모를 사용하기 위한 환경설정이다.

instrument(wsServer, {
  auth: false,
});

그리고 https://admin.socket.io 로 접속해주면 된다.

그리고 뜨는 환경설정에서 다른것은 손댈것 없이

Server URL만
http://localhost:3000/admin
으로 작성하면 된다.

접속이 된 브라우저이다.

2개의 socket이 연결되어 있는것이 보이고, 하나의 서버가 있다.

기본 화면은 Dashboard이고,
Rooms 에서는 생성된 방에 대한 정보를 얻을 수 있다.
이 때 private room과 public room 모두를 볼 수 있다.
Events로 들어가면 누가 언제 들어왔는지 나갔는지 등을 알 수 있고,
Clients로 들어가면 접속해 있는 유저를 확인 할 수 있다.