Come creare un applicazione di chat con Node.js e Socket.IO

Introduzione

Questo tutorial ti guiderà attraverso la creazione di un'applicazione di chat semplice utilizzando Node.js e Socket.IO.

Prerequisiti

Per seguire questo tutorial, avrai bisogno di:

Node.js e npm installati sul tuo computer. Puoi scaricare entrambi da qui.
Un editor di codice, come Visual Studio Code.
Una conoscenza di base di JavaScript e HTML.

Installazione delle dipendenze

Apri il terminale o il prompt dei comandi e naviga fino alla cartella in cui desideri creare il tuo progetto. Una volta li, esegui il seguente comando per inizializzare un nuovo progetto Node.js:

npm init -y

Successivamente, installa express e socket.io utilizzando npm:

npm install express socket.io

Creazione del server

Crea un nuovo file chiamato server.js e inserisci il seguente codice:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.use(express.static('public'));

io.on('connection', (socket) => {
    console.log('New client connected');

    socket.on('message', (message) => {
        io.emit('message', message);
    });

    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });
});

server.listen(3000, () => {
    console.log('Listening on port 3000');
});

Questo codice inizializza un server express e Socket.IO e configura l'app per servire file statici dalla cartella public. Inoltre, ascolta gli eventi di connessione e disconnessione del socket e l'evento message per inoltrare i messaggi ricevuti a tutti i client connessi.

Creazione del client

Crea una nuova cartella chiamata public e all'interno di essa, crea un nuovo file chiamato index.html con il seguente codice:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat App</title>
</head>
<body>
    <ul id="messages"></ul>
    <form id="form">
        <input id="input" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script>
    const socket = io();
    const form = document.getElementById('form');
    const input = document.getElementById('input');

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (input.value) {
            socket.emit('message', input.value);
            input.value = '';
        }
    });

    socket.on('message', function(message) {
        const item = document.createElement('li');
        item.textContent = message;
        document.getElementById('messages').appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
    });
    </script>
</body>
</html>

Questo codice HTML contiene un semplice modulo di input e un elemento <ul> per visualizzare i messaggi. Il codice JavaScript gestisce la connessione Socket.IO, l'invio di messaggi al server quando l'utente invia il modulo e l'aggiunta di nuovi messaggi alla lista quando riceve un messaggio dal server.

Avvio dell'applicazione

Ora puoi avviare il server con il seguente comando:

node server.js

Apri il tuo browser e vai a http://localhost:3000. Dovresti vedere la tua semplice applicazione di chat. Puoi aprire più schede o finestre del browser per simulare più utenti e vedere come i messaggi vengono trasmessi a tutti i client.

Conclusione

Congratulazioni! Hai appena creato una semplice applicazione di chat utilizzando Node.js e Socket.IO. Da qui, puoi aggiungere più funzionalità, come supporto per nomi utente, stanze di chat private, messaggi diretti e altro.