Admin UI - for backend

Admin UI
-> 여기서 모든 Sockets를 볼 수 있고, 모든 room과 클라이언트도 확인할 수 있다.

사용법

1. 설치

npm i @socket.io/admin-ui

2. import 및 SetUp하기 ㄱ ㄱ

const { createServer } = require("http");
const { Server } = require("socket.io");
const { instrument } = require("@socket.io/admin-ui");

const httpServer = createServer();

const io = new Server(httpServer, {
  cors: {
    origin: ["https://admin.socket.io"],
    credentials: true
  }
});

instrument(io, {
  auth: false
});

httpServer.listen(3000);

2.1 -> 내 server.js에 적용

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


const app = express();

app.set("view engine", "pug");
app.set("views", __dirname + "/views");
app.use("/public", express.static(__dirname + "/public"));
app.get("/", (_, res) => res.render("home"));
app.get("/*", (_, res) => res.redirect("/"));

const httpServer = http.createServer(app);//http 서버 만들기.
const ioServer = new Server(httpServer, {
    cors: {
      origin: ["https://admin.socket.io"],
      credentials: true
    },
  });

instrument(ioServer, {
    auth: false
});

function publicRooms(){
    const {sockets : {adapter: {sids, rooms}}} = ioServer;
    const publicRooms = [];
    rooms.forEach((_, key) => {
        if(sids.get(key) === undefined){
            publicRooms.push(key);
        }
    });
    return publicRooms;
};

function countRoom(roomName){
    return ioServer.sockets.adapter.rooms.get(roomName)?.size
};

ioServer.on("connection",(backSocket) => {
    backSocket["nickname"] = "Anonymous";
    backSocket.onAny((event) => {
        console.log(ioServer.sockets.adapter);
        console.log(`Socket Event: ${event}`);
    });
    backSocket.on("enter_room", (roomName, done) => {
        backSocket.join(roomName);
        done();
        backSocket.to(roomName).emit("welcome", backSocket.nickname, countRoom(roomName));
        ioServer.sockets.emit("room_change", publicRooms());
    });
    backSocket.on("disconnecting",() => {
        backSocket.rooms.forEach((room) => backSocket.to(room).emit("bye", backSocket.nickname, countRoom(room) -1 ));
    });
    backSocket.on("disconnect", () => {
        ioServer.sockets.emit("room_change", publicRooms());
    });
    backSocket.on("new_message",(msg, room, done) => {
        backSocket.to(room).emit("new_message", `${backSocket.nickname}: ${msg}`);
        done();
    });
    backSocket.on("nickname",(nickname) => backSocket["nickname"] = nickname);
});


const handleListen = () => console.log(`Listening on http://localhost:3000, ws://localhost:3000`);
httpServer.listen(3000,handleListen);

3. 실제 사용하기

1. admin UI 에 접속 ㄱ
2. 다음 사진과 같이 작성
   
   -> 연결 완료.
3. nomadcoder AdminUI강의 및 사용 참조하기