Simple Lobby Management using ExpressJS and SocketIO

[creeperkatze]

Hey Folks!

First of all, I wanted to clarify this is a beginner-ish question. C# Dev here with very little JavaScript knowledge.

I am currently experimenting with ExpressJS, specifically using SocketIO to create a simple lobby system for now. The frontend I'm using is nuxt. My implementation has a few problems. Joining basically doesn't work, the lobby is always "full" and all players get addressed to a lobby they shouldn't get.

I am not asking anyone to "just write some code for me", but If you got some spare time and want to help me, im more than grateful for any tips / fixes / improvements! :)

Backend (ExpressJS + SocketIO):

index.js

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const socketController = require('./server/controllers/socketController');

const app = express();
const server = http.createServer(app);
const io = socketIo(server, {
    cors: {
        origin: "http://localhost:3000",
        methods: ["GET", "POST"],
    }
});

io.on('connection', (socket) => {
    socketController(socket, io);
});

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

module.exports = socketController;

server/controllers/socketController.js

const Lobby = require('../models/Lobby');

const lobbies = {};

const socketController = (socket, io) => {
    console.log('A user connected');

    socket.on('createLobby', (nickname) => {
        const lobby = new Lobby(`${nickname}'s Lobby`);
        lobbies[lobby.code] = lobby;

        socket.emit('lobbyDetails', lobby.getLobbyDetails());
    });

    socket.on('joinLobby', ({ nickname, code }) => {
        const lobby = lobbies[code];

        if (lobby) {
            if (lobby.addPlayer(nickname)) {
                socket.join(code);
                socket.nickname = nickname;

                io.to(code).emit('playerJoined', nickname);
                socket.emit('lobbyDetails', lobby.getLobbyDetails());
            } else {
                socket.emit('error', 'Lobby is full');
            }
        } else {
            socket.emit('error', 'Lobby not found');
        }
    });

    socket.on('getLobbyDetails', (code) => {
        const lobby = lobbies[code];
        if (lobby) {
            socket.emit('lobbyDetails', lobby.getLobbyDetails());
        } else {
            socket.emit('error', 'Lobby not found');
        }
    });

    socket.on('disconnect', () => {
        for (const code in lobbies) {
            const lobby = lobbies[code];
            if (lobby.players.includes(socket.nickname)) {
                lobby.removePlayer(socket.nickname);
                io.to(code).emit('playerLeft', socket.nickname);
                break;
            }
        }
    });
};

module.exports = socketController;

server/models/lobby.js

class Lobby {
    constructor(name) {
        this.code = Math.random().toString(36).substring(2, 8).toUpperCase();
        this.name = name;
        this.players = [];
        this.maxPlayers = 4;
        console.log(`[${this.name} (${this.code})] Created`);
    }

    addPlayer(player) {
        if (!this.isFull()) { // Ensure the lobby isn't full
            this.players.push(player);
            console.log(`[${this.name} (${this.code})] ${player} Joined`);
            return true;
        }
        return false;
    }

    removePlayer(player) {
        this.players = this.players.filter(p => p !== player);
        console.log(`[${this.name} (${this.code})] ${player} Left`);
    }

    getLobbyDetails() {
        return {
            code: this.code,
            name: this.name,
            players: this.players,
            maxPlayers: this.maxPlayers,
        };
    }

    isFull() {
        return this.players.length >= this.maxPlayers;
    }
}

module.exports = Lobby;

Frontend socket example:

const joinLobby = () =>
{
    if (nickname.value && joinCode.value)
    {
        socket.emit('joinLobby', { nickname: nickname.value, code: joinCode.value });
    }
};