Im trying to make a site where multiple users are able to draw at the same time, but one of my challenges is trying to store cookies and session Ids. So basically, when a user connects, theyre given an id, upon refresh that id shoud be the same, and upon window close i want it to be the same.

This is what i have so far; it may look incomplete/messy because im in the middle of working on it:

const express = require("express");
const { Server } = require('socket.io');
const cookieParser = require('cookie-parser');

const { sessionMiddleware } = require('./sessionStore');

const { createServer } = require("node:http");
const { join } = require("node:path");

const app = express();
const server = createServer(app);
const io = new Server(server, {
  cors: {
    origin: 'http://localhost:3000',
    credentials: true,
  }
});

const db = require("./db");

app.use(cookieParser());
app.use(sessionMiddleware);
app.use(express.static("public"));

app.get("/", (req, res) => {
  const sessionID = req.session.id;
  clients[sessionID] = "#000000";

  if (sessionID) {
    console.log(sessionID + " connected");
  } else {
    console.log("No session ID");
  }

  res.sendFile(join(__dirname, "index.html"));
});

const clients = {};

io.engine.use(sessionMiddleware);
io.on("connection", (socket) => {
  const sessionID = socket.request.session.id;
  clients[sessionID] = "#000000";

  db.getAllDrawingData((drawingData) => {
    socket.emit("loadDrawingData", drawingData, clients);
  });

  // start drawing event
  socket.on("startDrawing", ({ x, y }) => {
    const data = { type: "start", x, y, color: clients[sessionID] };
    db.insertDrawingData(sessionID, data);
    socket.broadcast.emit("startDrawing", { x, y, color: clients[sessionID] });
  });

  // drawing event
  socket.on("draw", ({ x, y }) => {
    const data = { type: "draw", x, y, color: clients[sessionID] };
    db.insertDrawingData(sessionID, data);
    socket.broadcast.emit("draw", { x, y, color: clients[sessionID] });
  });

  // stop drawing event
  socket.on("stopDrawing", () => {
    const data = { type: "stop" };
    db.insertDrawingData(sessionID, data);
    socket.broadcast.emit("stopDrawing");
  });

  // change stroke color event
  socket.on("changeStrokeColor", (color) => {
    clients[sessionID] = color;
    socket.broadcast.emit("changeStrokeColor", { socketId: sessionID, color });;
  });

  // disconnect event
  socket.on("disconnect", () => {
    console.log(sessionID + " disconnected");
  });

});

As well, the code in the app.get(“/”) function doesnt work unless i change the endpoint, for example: “/canvas”. MY code worked well without sessions, and just using socket.id data.

I tried inputting the app.get code into the io.on(“connect”), and it worked, but it gave me a new id upon refresh. Ive gone through so many resources and they all have their session code in their app.get functions, and theyre all referring to login/signup which im not doing, i just want if the same user connects that it uses the same sessionID, but for me its just not working, im stumped.