Socket.io , CSS and UUID aren't working together?

Question

I'm developing a project for real-time communication.

I believe there is an issue with my server.js file that I was unable to decipher

I therefore programmed it to use the uuid library to create a random room.

Everything was going smoothly: joining them, making random rooms, etc. However, as soon as I combine it with socket.io, it crashes.

I'm not sure why, but my project's CSS and Server.js file are being affected by socket.io.

Because it occasionally causes the app to break and reload the CSS.

Here is the My server.js code and the error image.

I apologize for not being able to snap a screenshot of the CSS loading issue because it crashes the app right away.

const express = require("express");
const app = express();
const http = require("http").Server(app);
const path = require("path");
const io = require("socket.io")(http);
const { v4: uuidv4 } = require("uuid");
const { Server } = require("socket.io");

app.use(express.static("public"));
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "/src"));
app.use(express.static(path.join(__dirname, "public")));

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

app.get("/room", (req, res) => {
  res.render("room");
});

app.get("/create-room", (req, res) => {
  const roomId = uuidv4();
  res.render("create-room", { roomId });
});

app.get("/join-room", (req, res) => {
  res.render("join-room");
});

app.post("/join", (req, res) => {
  const roomId = req.body.roomId;
  res.redirect(`/room/${roomId}`);
});
app.get("/room/:roomId", (req, res) => {
  const roomId = req.params.roomId;
  // Render the room view (you can customize this according to your frontend framework)
  res.render(__dirname + "/src/room.ejs");
});

// io.on("connection", (socket) => {
//   console.log("A user connected");

//   socket.on("join-room", (roomId, userName) => {
//     socket.join(roomId); // Join the specified room
//     console.log(`User ${userName} joined room ${roomId}`);
//     socket.to(roomId).emit("user-joined", userName);
//     socket.userName = userName;
//   });

//   socket.on("send-chat-message", (roomId, userId, message) => {
//     io.to(roomId).emit("chat-message", { userId, message });
//   });

//   socket.on("disconnect", () => {
//     console.log("A user disconnected");
//     io.to(roomId).emit("user-left", userId);
//   });
// });

const PORT = process.env.PORT || 3000;
http.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

In the Following Image You can Clearing See That the App Runs Its Creates a Room, As Soon as a user connects it Crashes Most of the Time the Error is ReferenceError: roomId is not defined

Answer 1

This errors seems to be occuring in the disconnect function.

The code:

socket.on("disconnect", () => {
    console.log("A user disconnected");
    io.to(roomId).emit("user-left", userId);
});

Doesn't actually define roomId anywhere.