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:
<code>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 server = createServer(app);
const io = new Server(server, {
origin: 'http://localhost:3000',
const db = require("./db");
app.use(sessionMiddleware);
app.use(express.static("public"));
app.get("/", (req, res) => {
const sessionID = req.session.id;
clients[sessionID] = "#000000";
console.log(sessionID + " connected");
console.log("No session ID");
res.sendFile(join(__dirname, "index.html"));
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);
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] });
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] });
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 });;
socket.on("disconnect", () => {
console.log(sessionID + " disconnected");
<code>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");
});
});
</code>
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.