User Count

app.js

const frontendsocket = io();

const welcome = document.getElementById("welcome");
const form = welcome.querySelector("form");
const room = document.getElementById("room");

room.hidden = true;

let roomName;

function addMessage(message) {
  const ul = room.querySelector("ul");
  const li = document.createElement("li");
  li.innerText = message;
  ul.appendChild(li);
}

function handleMessageSubmit(event) {
  event.preventDefault();
  const input = room.querySelector("#message input");
  const value = input.value;
  frontendsocket.emit("new_message", input.value, roomName, () => {
    addMessage(`You:${value}`); //backend에서 시작시킬 수 있는 function 호출
  });
  input.value = "";
}

function handleNicknameMessageSubmit(event) {
  event.preventDefault();
  const input = room.querySelector("#name input");
  frontendsocket.emit("nickname", input.value);
}
function showRoom() {
  welcome.hidden = true;
  room.hidden = false;
  const h3 = room.querySelector("h3");
  h3.innerText = `Room ${roomName}`;
  const msgForm = room.querySelector("#message");
  const nameForm = room.querySelector("#name");
  msgForm.addEventListener("submit", handleMessageSubmit);
  nameForm.addEventListener("submit", handleNicknameMessageSubmit);
}

function handleRoomSubmit(event) {
  const roomNameInput = form.querySelector("#roomName");
  const nicknameInput = form.querySelector("#name");
  event.preventDefault();
  frontendsocket.emit(
    "enter_room",
    roomNameInput.value,
    nicknameInput.value,
    showRoom
  );
  roomName = roomNameInput.value; //방 이름 보여주기
  roomNameInput.value = ""; //입력한 값은 비움
  const changeNameInput = room.querySelector("#name input");
  changeNameInput.value = nicknameInput.value; //변경하고자 하는 값을 새로운 >	changeNameInput 값으로 대입
}

form.addEventListener("submit", handleRoomSubmit);

frontendsocket.on("welcome", (user, newCount) => {
  const h3 = room.querySelector("h3");
  h3.innerText = `Room ${roomName} (${newCount})`;
  addMessage(`${user} arrived!`);
});

frontendsocket.on("bye", (left, newCount) => {
  const h3 = room.querySelector("h3");
  h3.innerText = `Room ${roomName} (${newCount})`;
  addMessage(`${left} left ㅠㅠ`);
});

frontendsocket.on("new_message", addMessage);

frontendsocket.on("room_change", (rooms) => {
  const roomList = welcome.querySelector("ul");
  roomList.innerHTML = "";
  if (rooms.length === 0) {
    return;
  }
  rooms.forEach((room) => {
    const li = document.createElement("li");
    li.innerText = room;
    roomList.append(li);
  });
});
// frontendsocket.on("room_change", >	(msg)=>console.log(msg));===frontendsocket.on("room_change", console.log);

server.js

import http from "http";
import SocketIO from "socket.io";
import express from "express";

const app = express();

const PORT = 3000;

app.set("view engine", "pug");
app.set("views", __dirname + "/views");
// 기본 path를 /public으로 설정
app.use("/public", express.static(__dirname + "/public"));
app.get("/", (_, res) => res.render("home"));
app.get("/*", (_, res) => res.redirect("/"));

const handleListen = () => console.log(`Listening on >	http://localhost:${PORT}`);

const httpServer = http.createServer(app);
const wsServer = SocketIO(httpServer);

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

function countRooms(roomName) { //방에 사람이 몇 명이 있는지?
  return wsServer.sockets.adapter.rooms.get(roomName)?.size;
}
wsServer.on("connection", (backendsocket) => {
  backendsocket["nickname"] = "Anonymous";
  backendsocket.onAny((event) => {
    console.log(`backendSockevent:${event}`);
  });
  backendsocket.on("enter_room", (roomName, nickname, done) => {
    backendsocket["nickname"] = nickname;
    backendsocket.join(roomName);
    done(countRooms(roomName));
    backendsocket
      .to(roomName)
      .emit("welcome", backendsocket.nickname, countRooms(roomName));
    //이제 새로운 방이 만들어졌다고 모두에게 알려야 한다.
    wsServer.sockets.emit("room_change", publicRooms());
  });

  backendsocket.on("disconnecting", () => {
    backendsocket.rooms.forEach((room) =>
      backendsocket
        .to(room)
        .emit("bye", backendsocket.nickname, countRooms(room) - 1)
    );
  });
  backendsocket.on("disconnect", () => {
    wsServer.sockets.emit("room_change", publicRooms());
  });
  backendsocket.on("new_message", (msg, room, done) => {
    backendsocket
      .to(room)
      .emit("new_message", `${backendsocket.nickname}:${msg}`);
    done();
  });
  backendsocket.on(
    "nickname",
    (nickname) => (backendsocket["nickname"] = nickname)
  );
});

httpServer.listen(PORT, handleListen);