app.js 파일 소스코드

//var socket = SocketIO(); // ?????
var socket = new WebSocket(`wss://${window.location.host}`);
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("#msg input");
const value = input.value;
socket.emit("new_message", input.value, roomName, () => {
addMessage(`You: ${value}`);
});
input.value = "";
}
function showRoom() {
welcome.hidden = false;
room.hidden = false;
const h3 = room.querySelector("h3");
h3.innerText = Room ${roomName};
const msgForm = room.querySelector("#msg");
msgForm.addEventListener("submit", handleMessageSubmit);
}
function handleRoomSubmit(event) {
event.preventDefault();
const input = form.querySelector("input");
socket.emit("enter_room", input.value, showRoom);
roomName = input.value;
input.value = "";
}
form.addEventListener("submit", handleRoomSubmit);

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

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

// server.js 코드 시작..

import http from "http";

import SocketIO from "socket.io";

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);var wssServer = SocketIO(httpServer);wssServer = new Server(httpServer, { cors: { origin: ["https://admin.socket.io"], credentials: true }});
instrument(wssServer, { auth: false});
function publicRooms() { const { sockets: { adapter: { sids, rooms } } } = wssServer; const publicRooms = []; rooms.forEach((_, key) => { if (sids.get(key) === undefined) { publicRooms.push(key); } }); return publicRooms;}function countRoom(roomName) { return wssServer.sockets.adapter.rooms.get(roomName)?.size;}wssServer.on("connection", (socket) => { socket["nickname"] = "Anon"; socket.onAny((event) => { console.log(`Socket Event: ${event}`); }); socket.on("enter_room", (roomName, done) => { socket.join(roomName); done(); socket.to(roomName).emit("welcome", socket.nickname, countRoom(roomName)); wssServer.sockets.emit("room_change", publicRooms()); }); socket.on("disconnecting", () => { socket.rooms.forEach((room) => socket.to(room).emit("bye", socket.nickname, countRoom(room) - 1) ); }); socket.on("disconnect", () => { wssServer.sockets.emit("room_change", publicRooms()); }); socket.on("new_message", (msg, room, done) => { socket.to(room).emit("new_message", ${socket.nickname}: ${msg}); done(); }); socket.on("nickname", (nickname) => (socket["nickname"] = nickname));});/*const wss = new WebSocket.Server({ server });const sockets = [];wss.on("connection", (socket) => { sockets.push(socket); socket["nickname"] = "Anon"; console.log("Connected to Browser ✅"); socket.on("close", onSocketClose); socket.on("message", (msg) => { const message = JSON.parse(msg); switch (message.type) { case "new_message": sockets.forEach((aSocket) => aSocket.send(`${socket.nickname}: ${message.payload}`) ); case "nickname": socket["nickname"] = message.payload; } });}); */const handleListen = () => console.log(`Listening onhttp://localhost:3000`);httpServer.listen(3000, handleListen);

=============

버튼 누르면

리로드 현상이 계속 발생되는데 어떤 부분 수정하면 해결될지 잘 모르겠어요