Admin Panel 사용하기_ 관리자페이지

socket.io는 우리가 만든 서버를 위한 관리자 UI(user interface)를 제공해 줘.

이를 이용하면 모든 소켓과 룸을 확인할 수 있어.

1. Admin UI 설치하기

터미널에 다음 명령어로 다운로드 받아보자.

→ npm i @socket.io/admin-ui

 

이렇게 @SplattingNotPermitted 오류가 발생하는 경우도 있음.

이는 터미널에서 특수 가호를 받지 못해 생기는 오류이다.

 

해결방법 : 큰따옴표로 묶어 입력하자!

→ npm i "@socket.io/admin-ui" 

 

2.server.js 수정하기

Admin UI를 위해 설치한 패키지에서 instrument를 가져와야 함.

우리가 기존에 socket.io 서버를 만들었던 방식을 변경해보도록 하자. (환경설정)

import http from 'http';

import express from 'express';

import { Server } from "socket.io";

import { instrument } from "@socket.io/admin-ui";

const app = express();

app.set("view engine", "pug");

//dirname은 Node.js기본 전역변수로, 현재 실행되는 폴더의 경로를 의미

app.set("views", __dirname + "/views");

app.use("/public", express.static(__dirname + "/public"));

// '/'를 받으면 home으로 가게 설정

app.get("/", (req, res) => res.render("home"));

//만약홈이 아닌 다른 주소로 get요청을 보내더라도 홈으로 리다이렉션하게 예외처리함

app.get("/*", (req, res) => res.redirect("/"));

const httpServer = http.createServer(app);

const wsServer = new Server(httpServer, {

    cors: {

        origin: ["https://admin.socket.io"],

        credentials: true

    }

});

instrument(wsServer, {

    auth: false

});

function publicRooms() {

    const {

        sockets: {

            adapter: {sids, rooms},

        },

    }= wsServer;

 생략...

 

instrument를 설치하고 방식을 변경함.

서버를 만들 때 내부 객체를 보면 origin이라는 속성이 있는데 여기에는 socket.io에서 제공하는 데모 서버 주소를 지정함.

※ 만약 개인적으로 서버를 가지고 있다면 해당 서버의 주소를 여기에 넣고 사용하면 된다.

 

instrument는 우리 서버가 비밀번호를 사용할 수 있도록  auth 속성을 false로 지정했음.

 

3. 관리자 페이지 접속하기

Ctrl + Shift + N 으로 시크릿 모드 브라우저를 열고 https://admin.socket.io 로 접속하자 

대화상자 이름은 Connection인데 서버가 있는 주소를 연결하라는 뜻이다.

우리는 현재 localhost 주소를 적어두면 됨.

 

여기에 admin 붙혀주자.

path는 현재 필요 없는 항목이니 지우고 맨 아래 CONNET 클릭!

 

 

관리자 페이지에 접속하면 다음과 같은 화면이 나온다.

좌측 sockets를 누르면 내 컴퓨터의 ip도 확인 가능하다.

좌측 rooms를 누르면 현재 사용중인 웹소켓의 룸들도 확인 가능하다.

토글 클릭 시, 아무 방이 없어도 웹소켓의 기본 룸인 '프라이빗 룸'을 함께 볼 수 있다.