javascripthtmlexpressvisual-studio-codesocket.io

How to create a web application with express with registration


I'm trying to create a server with express that allows me to log in and register, and when I log in I can chat with connected users, I'm having some problems, any advice on how to do it?

I've done various tests, but I really can't, I need some useful advice, thanks in advance


Solution

  • this is a project I did a few years ago, I hope it can help you. SERVER:

    const express = require('express');
    const http = require('http');
    const socketIo = require('socket.io');
    const path = require('path');
    const fs = require('fs');  // Modulo per leggere e scrivere file
    
    const app = express();
    const server = http.createServer(app);
    const io = socketIo(server);
    
    // Percorso del file users.json per salvare gli utenti
    const USERS_FILE = path.join(__dirname, 'users.json');
    
    // Funzione per leggere gli utenti dal file
    const loadUsers = () => {
        if (fs.existsSync(USERS_FILE)) {
            const usersData = fs.readFileSync(USERS_FILE);
            return JSON.parse(usersData);
        }
        return [];
    };
    
    // Funzione per salvare gli utenti nel file
    const saveUsers = (users) => {
        fs.writeFileSync(USERS_FILE, JSON.stringify(users, null, 2));
    };
    
    app.use(express.json());
    app.use(express.urlencoded({ extended: true }));
    
    // Serve la directory statica (dove c'è index.html)
    app.use(express.static(path.join(__dirname, 'www')));
    
    // Carichiamo gli utenti dal file all'avvio del server
    let users = loadUsers();
    
    // Endpoint per registrarsi
    app.post('/api/register', (req, res) => {
        const { username, password } = req.body;
        console.log('Richiesta di registrazione ricevuta:', { username, password });
    
        if (!username || !password) {
            return res.status(400).json({ error: 'Username e password sono obbligatori' });
        }
    
        const userExists = users.some(user => user.username === username);
        if (userExists) {
            console.log('Registrazione fallita: Username già esistente');
            return res.status(400).json({ error: 'Username già esistente' });
        }
    
        const newUser = { username, password };
        users.push(newUser);
        saveUsers(users);  // Salviamo gli utenti nel file JSON
        console.log('Registrazione completata per:', username);
        res.status(201).json({ message: 'Registrazione completata' });
    });
    
    // Endpoint per il login
    app.post('/api/login', (req, res) => {
        const { username, password } = req.body;
        console.log('Richiesta di login ricevuta:', { username, password });
    
        const user = users.find(user => user.username === username && user.password === password);
        
        if (!user) {
            console.log('Login fallito: credenziali non valide');
            return res.status(401).json({ error: 'Credenziali non valide' });
        }
        
        console.log('Login avvenuto con successo per:', username);
        res.status(200).json({ message: 'Login avvenuto con successo', username });
    });
    
    // Gestione della chat con Socket.io
    io.on('connection', (socket) => {
        console.log('Un utente si è connesso');
    
        // Associa l'username al socket
        socket.on('setUsername', (username) => {
            socket.username = username;
            console.log(`L'utente ${username} si è connesso alla chat`);
        });
    
        // Gestione dei messaggi in chat
        socket.on('chatMessage', (msg) => {
            const message = `${socket.username}: ${msg}`;
            console.log('Messaggio ricevuto:', message);
            io.emit('chatMessage', message);  // Invia il messaggio a tutti i client connessi
        });
    
        socket.on('disconnect', () => {
            console.log(`L'utente ${socket.username} si è disconnesso`);
        });
    });
    
    // Avvia il server
    server.listen(3000, () => {
        console.log('Server avviato sulla porta 3000');
    });
    

    Client:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Login e Chat</title>
    </head>
    <body>
        <!-- Sezione Autenticazione -->
        <div id="auth-section">
            <h1>Registrazione</h1>
            <form id="registerForm">
                <input type="text" id="registerUsername" placeholder="Username" required><br>
                <input type="password" id="registerPassword" placeholder="Password" required><br>
                <button type="submit">Registrati</button>
            </form>
    
            <h1>Login</h1>
            <form id="loginForm">
                <input type="text" id="loginUsername" placeholder="Username" required><br>
                <input type="password" id="loginPassword" placeholder="Password" required><br>
                <button type="submit">Login</button>
            </form>
        </div>
    
        <!-- Sezione Chat -->
        <div id="chat-section" style="display: none;">
            <h1>Chat Room</h1>
            <div id="messages" style="border: 1px solid black; height: 300px; overflow-y: auto;"></div>
            <form id="messageForm">
                <input id="messageInput" type="text" placeholder="Scrivi un messaggio..." required>
                <button type="submit">Invia</button>
            </form>
        </div>
    
        <script src="/socket.io/socket.io.js"></script>
        <script>
            const authSection = document.getElementById('auth-section');
            const chatSection = document.getElementById('chat-section');
            const socket = io();
            let loggedInUser = null;
    
            // Funzione per registrarsi
            document.getElementById('registerForm').addEventListener('submit', function (e) {
                e.preventDefault();
                const username = document.getElementById('registerUsername').value;
                const password = document.getElementById('registerPassword').value;
    
                fetch('/api/register', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ username, password })
                })
                .then(response => response.json())
                .then(data => {
                    alert(data.message || data.error);
                })
                .catch(error => console.error('Errore:', error));
            });
    
            // Funzione per fare login
            document.getElementById('loginForm').addEventListener('submit', function (e) {
                e.preventDefault();
                const username = document.getElementById('loginUsername').value;
                const password = document.getElementById('loginPassword').value;
    
                fetch('/api/login', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ username, password })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.message) {
                        // Se il login ha successo, memorizza l'username e mostra la chat
                        loggedInUser = username;
                        socket.emit('setUsername', username);  // Invia l'username al server
                        authSection.style.display = 'none';
                        chatSection.style.display = 'block';
                    } else {
                        alert(data.error);
                    }
                })
                .catch(error => console.error('Errore nella richiesta di login:', error));
            });
    
            // Funzione per gestire i messaggi della chat
            document.getElementById('messageForm').addEventListener('submit', function (e) {
                e.preventDefault();
                const messageInput = document.getElementById('messageInput');
                const message = messageInput.value;
    
                // Invia il messaggio al server tramite Socket.io
                socket.emit('chatMessage', message);
    
                // Svuota il campo di input dopo l'invio
                messageInput.value = '';
            });
    
            // Ricevi e mostra i nuovi messaggi della chat
            socket.on('chatMessage', (msg) => {
                const messageDiv = document.createElement('div');
                messageDiv.textContent = msg;
                document.getElementById('messages').appendChild(messageDiv);
            });
        </script>
    </body>
    </html>