Creare una Chat in Tempo Reale con Node.js e Socket.IO

Node.js, con la sua architettura event-driven, è la tecnologia perfetta per costruire applicazioni in tempo reale. In questo tutorial, vedremo come creare una semplice chat usando Express come server web e Socket.IO per la comunicazione in tempo reale basata su WebSockets.

Passo 1: Setup del Progetto

Inizializza un nuovo progetto Node.js e installa le dipendenze:

npm init -y
npm install express socket.io

Passo 2: Il Server (`server.js`)

Creiamo un semplice server Express che servirà una pagina HTML e gestirà le connessioni di Socket.IO.

const express = require('express');
const http = require('http');
const { Server } = require("socket.io");

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

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

// Ascolta per nuove connessioni
io.on('connection', (socket) => {
  console.log('un utente si è connesso');

  // Ascolta per l'evento 'chat message' dal client
  socket.on('chat message', (msg) => {
    // Invia il messaggio a tutti i client connessi, incluso il mittente
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('un utente si è disconnesso');
  });
});

server.listen(3000, () => {
  console.log('Server in ascolto sulla porta 3000');
});

Passo 3: Il Client (`index.html`)

Creiamo una semplice pagina HTML con un form per inviare messaggi e un'area per visualizzarli. Includiamo la libreria client di Socket.IO e scriviamo il codice per connetterci al server e gestire gli eventi.

<!-- ... head e body ... -->
<ul id="messages"></ul>
<form id="form" action="">
  <input id="input" autocomplete="off" /><button>Invia</button>
</form>

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();

  const form = document.getElementById('form');
  const input = document.getElementById('input');
  const messages = document.getElementById('messages');

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    if (input.value) {
      // Invia l'evento 'chat message' al server
      socket.emit('chat message', input.value);
      input.value = '';
    }
  });

  // Ascolta per l'evento 'chat message' dal server
  socket.on('chat message', (msg) => {
    const item = document.createElement('li');
    item.textContent = msg;
    messages.appendChild(item);
    window.scrollTo(0, document.body.scrollHeight);
  });
</script>

Con poche righe di codice, abbiamo creato un'applicazione di chat funzionante che dimostra la potenza della comunicazione in tempo reale con Node.js.