Creare ed Eseguire un Progetto Socket.io con ServBay

Socket.io è una popolare libreria JavaScript progettata per la costruzione di applicazioni web in tempo reale, bidirezionali e basate su eventi. È fondata sul protocollo WebSocket e fornisce meccanismi di fallback (come il long polling) quando necessario, garantendo una comunicazione real-time stabile e affidabile su qualsiasi condizione di client o rete.

Questa guida illustra in dettaglio come sfruttare la potenza dell’ambiente di sviluppo locale ServBay per configurare, eseguire e gestire un progetto Socket.io. ServBay offre un ambiente Node.js preconfigurato e una comoda gestione dei siti web (precedentemente chiamati “host”), rendendo lo sviluppo con Socket.io più efficiente che mai.

Che cos’è Socket.io?

Socket.io è una libreria che implementa una comunicazione real-time, bidirezionale e basata su eventi. Si compone di due parti:

1. Una libreria lato server che gira su Node.js.
2. Una libreria JavaScript lato client che si esegue nel browser.

Nonostante l’obiettivo principale di Socket.io sia sfruttare WebSocket, garantisce comunque la compatibilità con vecchi browser o reti restrittive mediante la rilevazione automatica del trasporto e il fallback su altre modalità (come Adobe Flash Socket, Ajax Long Polling, Ajax Multipart Streaming, Forever IFrame, JSONP Polling, ecc.).

Principali Caratteristiche e Vantaggi di Socket.io

• Comunicazione real-time: Scambio istantaneo di dati tra server e client, perfetto per chat, strumenti collaborativi, dashboard live, giochi online e molto altro.
• Supporto multipiattaforma: Può essere utilizzato su browser web, applicazioni mobile e su server Node.js.
• Riconnessione automatica: Se la connessione viene persa, il client tenta automaticamente di riconnettersi al server, migliorando la robustezza dell'applicazione.
• Event-driven: Il modello di programmazione basato su eventi rende la gestione della comunicazione asincrona intuitiva e semplice da amministrare.
• Stanze e spazi dei nomi: Supporta il raggruppamento dei client in "stanze" per la trasmissione a gruppi selezionati di utenti; gli "spazi dei nomi" consentono il multiplexing e la separazione della logica sulla stessa connessione.
• Supporto per dati binari: Possibilità di inviare e ricevere comodamente anche dati binari.
• Alta compatibilità: Mantiene l’affidabilità su diversi scenari di rete grazie a diversi sistemi di trasporto.

Socket.io permette agli sviluppatori di concentrarsi sulla logica applicativa senza preoccuparsi delle complesse implementazioni di comunicazione real-time.

Creare ed Eseguire un Progetto Socket.io con ServBay

ServBay fornisce agli sviluppatori Node.js un ambiente locale pronto all’uso, comprensivo di runtime Node.js, gestore di pacchetti npm e strumenti intuitivi per la gestione dei siti web. Utilizzeremo queste risorse per configurare ed avviare un progetto di esempio con Socket.io.

Prerequisiti

Prima di iniziare, assicurati di aver completato i seguenti passaggi:

1. Installa ServBay: Scarica e installa la versione più recente di ServBay dal sito ufficiale ServBay.
2. Installa Node.js tramite ServBay: Assicurati di aver installato il pacchetto Node.js in ServBay. Puoi farlo tramite la sezione “Pacchetti” (in precedenza chiamata “Servizi”) nella dashboard di ServBay. Consulta la documentazione Uso di Node.js in ServBay per ulteriori dettagli su installazione e utilizzo.

Creazione del Progetto di Esempio Socket.io

Andremo a creare una semplice app di chat come esempio pratico.

1. Inizializza la cartella di progetto:

   Apri il tuo terminale. ServBay consiglia di posizionare i progetti web nella directory /Applications/ServBay/www. Accedi a questa cartella, crea una nuova directory per il progetto, inizializza il progetto Node.js e installa i pacchetti necessari:

   cd /Applications/ServBay/www
   mkdir servbay-socketio-chat
   cd servbay-socketio-chat
   npm init -y
   npm install express socket.io

   Questo comando creerà un file package.json all’interno della cartella servbay-socketio-chat e installerà Express (per la gestione dei file statici e delle richieste HTTP) e Socket.io (libreria server e client).

2. Crea il file del server (server.js):

   All’interno della directory principale del progetto servbay-socketio-chat, crea un file chiamato server.js e incolla quanto segue. Questo file avvia il server HTTP, integra Socket.io e gestisce la connessione client con il broadcasting dei messaggi.

   const express = require('express');
   const http = require('http');
   const socketIo = require('socket.io');
   const path = require('path'); // Importa il modulo path
   
   const app = express();
   // Crea il server HTTP basato sull'app Express
   const server = http.createServer(app);
   // Collega Socket.io al server HTTP
   const io = socketIo(server);
   
   // Imposta la cartella dei file statici sulla directory corrente
   app.use(express.static(__dirname));
   
   // Gestisce la richiesta GET alla root, rispondendo con il file index.html
   app.get('/', (req, res) => {
     // Usa path.join per assicurare compatibilità cross-platform
     res.sendFile(path.join(__dirname, 'index.html'));
   });
   
   // Ascolta l'evento di connessione di Socket.io
   io.on('connection', (socket) => {
     console.log('a user connected'); // Logga la connessione di un nuovo utente
   
     // Ascolta l'evento di disconnessione
     socket.on('disconnect', () => {
       console.log('user disconnected'); // Logga la disconnessione dell'utente
     });
   
     // Ascolta l'evento 'chat message'
     socket.on('chat message', (msg) => {
       console.log('message: ' + msg); // Stampa il messaggio ricevuto
       // Broadcast del messaggio ricevuto a tutti i client collegati
       io.emit('chat message', msg);
     });
   });
   
   // Recupera la porta dalla variabile d'ambiente o usa il valore di default
   const port = process.env.PORT || 3000;
   server.listen(port, () => {
     console.log(`Server running on port ${port}`);
     console.log(`Access it via http://localhost:${port} (direct) or via ServBay reverse proxy`);
   });

   Spiegazione del codice:

   • Usiamo express per creare un semplice server web che serve il file index.html.
   • http.createServer(app) crea un server HTTP standard, necessario per l’integrazione di Socket.io.
   • socketIo(server) inizializza Socket.io e lo collega al server HTTP.
   • io.on('connection', ...) ascolta le nuove connessioni client.
   • socket.on('disconnect', ...) gestisce la disconnessione dei client.
   • socket.on('chat message', ...) gestisce l’evento ‘chat message’ in arrivo dagli utenti.
   • io.emit('chat message', msg) invia il messaggio ricevuto a tutti i client connessi.

3. Crea il file client (index.html):

   All’interno della cartella del progetto, crea un file index.html e incolla quanto segue. Questo file definisce la struttura HTML, lo stile e il codice Javascript del client che si collega al server, invia messaggi e li visualizza live.

   <!DOCTYPE html>
   <html>
   <head>
     <title>ServBay Socket.io Chat</title>
     <style>
       body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
       #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
       #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
       #input:focus { outline: none; }
       #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
       #messages { list-style-type: none; margin: 0; padding: 0; }
       #messages > li { padding: 0.5rem 1rem; }
       #messages > li:nth-child(odd) { background: #efefef; }
       .servbay-banner {
         background-color: #007bff; /* Blu ServBay */
         color: white;
         text-align: center;
         padding: 15px 0;
         font-size: 22px;
         margin-bottom: 20px;
         font-weight: bold;
       }
     </style>
   </head>
   <body>
     <div class="servbay-banner">Benvenuto al demo chat di ServBay Socket.io!</div>
     <ul id="messages"></ul>
     <form id="form" action="">
       <input id="input" autocomplete="off" /><button type="submit">Invia</button>
     </form>
   
     <!-- Importa la libreria client di Socket.io -->
     <!-- Questo file viene servito dinamicamente dal server Socket.io -->
     <script src="/socket.io/socket.io.js"></script>
     <script>
       // Collegati al server Socket.io
       // Se il client e il server girano sullo stesso dominio e porta, io() si collega automaticamente
       var socket = io();
   
       var form = document.getElementById('form');
       var input = document.getElementById('input');
       var messages = document.getElementById('messages'); // Ottiene l'elemento messages
   
       form.addEventListener('submit', function(e) {
         e.preventDefault(); // Previene il submit di default del form
         if (input.value) {
           // Invia l'evento 'chat message' e il contenuto al server
           socket.emit('chat message', input.value);
           input.value = ''; // Svuota il campo di input
         }
       });
   
       // Ascolta l'evento 'chat message' dal server
       socket.on('chat message', function(msg) {
         // Crea un nuovo elemento lista per il messaggio
         var item = document.createElement('li');
         item.textContent = msg; // Usa textContent contro attacchi XSS
         messages.appendChild(item); // Aggiunge il messaggio alla lista
         // Scrolla all’ultimo messaggio
         window.scrollTo(0, document.body.scrollHeight);
       });
     </script>
   </body>
   </html>

   Spiegazione del codice:

   • La pagina include struttura HTML minimale, stili CSS (compreso il banner con il blu ServBay), una lista messaggi (ul#messages) e il form per inviare messaggi (form#form).
   • <script src="/socket.io/socket.io.js"></script> importa la libreria Socket.io client. Questo file non viene creato da noi, ma servito automaticamente da Socket.io server su quel percorso.
   • io() inizializza e collega il client al server Socket.io.
   • Il client ascolta l’invio del form, previene il comportamento di default ed emette l’evento chat message verso il server.
   • Quando il server invia eventi ‘chat message’, il client li aggiunge alla lista dei messaggi in pagina.

A questo punto hai completato la parte base di codice del tuo progetto demo con Socket.io. Ora vediamo come eseguirlo e accedervi tramite ServBay.

Esecuzione del Progetto Tramite ServBay (Modalità Sviluppo)

Durante lo sviluppo, di solito si esegue direttamente il server Node.js e si utilizza il revers proxy di ServBay per mappare il progetto su un dominio locale.

1. Avvia il server di sviluppo Node.js:

   Apri il terminale, naviga nella cartella /Applications/ServBay/www/servbay-socketio-chat e avvia il server scegliendo la porta 8585 (modificabile a piacere):

   cd /Applications/ServBay/www/servbay-socketio-chat
   PORT=8585 node server.js

   Il terminale mostrerà una riga come Server running on port 8585 a server avviato. Ora il server ascolta sulla porta locale 8585.

2. Configura il sito web (reverse proxy) su ServBay:

   Per accedere comodamente tramite dominio locale ed usare HTTPS/SSL, crea un nuovo sito proxy inverso su ServBay.

   • Apri la dashboard di ServBay.
   • Naviga alla sezione “Siti Web” (in precedenza “host”).
   • Clicca su aggiungi nuovo sito.
   • Configura i seguenti parametri:
     • Nome: ServBay Socket.io Dev (o qualsiasi nome riconoscibile)
     • Dominio: servbay-socketio-dev.servbay.demo (o altro dominio .servbay.demo)
     • Tipo: seleziona Reverse Proxy
     • Destinazione Proxy: inserisci http://127.0.0.1:8585 (puntando alla porta e indirizzo appena avviati)
   • Salva e applica le modifiche. ServBay potrebbe riavviare i suoi server web (Caddy o Nginx, in base alla configurazione).

   Nota: Il proxy inverso è indispensabile per Socket.io perché oltre a inoltrare le richieste HTTP standard, gestisce anche upgrade handshake per il protocollo WebSocket. Le configurazioni predefinite di ServBay (Caddy/Nginx) supportano già WebSocket sui proxy.

   Per istruzioni passo-passo consulta la guida Aggiungere un sito Node.js di sviluppo. Puoi anche abilitare HTTPS per il dominio locale tramite ServBay; consulta la documentazione Proteggere il sito con SSL/TLS. Puoi utilizzare sia ServBay User CA che ServBay Public CA per generare e fidare i certificati locali.

3. Accedi al sito in modalità sviluppo:

   Apri il browser e naviga su https://servbay-socketio-dev.servbay.demo. Visualizzerai l’interfaccia della chat e potrai testare la chat real-time da più schede del browser o dispositivi.

Deployment in Produzione del Progetto Tramite ServBay

In ambiente production è raccomandato eseguire Node.js tramite un process manager (come PM2 o forever) e integrarlo a ServBay. Qui illustriamo la configurazione del reverse proxy su ServBay, assumendo che l’app sia già attiva in background su una porta definita.

1. Avvia il server Node.js in produzione:

   In produzione si usa un process manager per garantire restart automatici e la gestione in background, ad esempio PM2:

   # Se PM2 non è installato
   # npm install pm2 -g
   
   cd /Applications/ServBay/www/servbay-socketio-chat
   PORT=8586 NODE_ENV=production pm2 start server.js --name servbay-socketio-prod

   Con questo comando, PM2 avvia server.js sulla porta 8586 e setta NODE_ENV su production. Il process manager terrà attiva l’app anche in caso di crash.

2. Configura il sito di produzione in ServBay (reverse proxy):

   Come per lo sviluppo, aggiungi un nuovo sito reverse proxy puntando la porta di produzione:

   • Apri la dashboard di ServBay.
   • Naviga su “Siti Web”.
   • Clicca su aggiungi nuovo sito.
   • Imposta:
     • Nome: ServBay Socket.io Prod (o altro nome riconoscibile)
     • Dominio: servbay-socketio-prod.servbay.demo (o altro nome .servbay.demo)
     • Tipo: seleziona Reverse Proxy
     • Destinazione Proxy: http://127.0.0.1:8586 (porta di produzione)
   • Salva e applica.

3. Accedi al sito in produzione:

   Apri il browser su https://servbay-socketio-prod.servbay.demo.

Attraverso ServBay e il suo reverse proxy puoi gestire facilmente diversi progetti Node.js (sia sviluppo che produzione), assegnare ai siti nomi di dominio locali, utilizzare certificati SSL e tutto ciò senza dover modificare il file hosts di sistema o gestire configurazioni server web complesse.

Connessione ai Database Offerti da ServBay

ServBay supporta diversi pacchetti database, inclusi MySQL, MariaDB, PostgreSQL, MongoDB e Redis. Le tue app Socket.io possono integrarsi con questi database per salvare utenti, cronologie, ecc. Ecco alcune istruzioni con esempi di codice per Node.js.

Importante: Prima di eseguire i seguenti codici, installa e avvia il database desiderato dalla dashboard di ServBay. I parametri di default di connessione (porta, utente, password) sono accessibili dall’interfaccia o dalla documentazione ServBay. Per MySQL/MariaDB la password root è impostata durante l’installazione o può essere reimpostata tramite ServBay.

1. Collegarsi a MongoDB:

   Installa ODM Mongoose (o il driver ufficiale mongodb):

   npm install mongoose

   Nel tuo codice Node.js (ad esempio in server.js o in un modulo separato per il db), inserisci:

   const mongoose = require('mongoose');
   
   // Connessione di default a MongoDB locale (porta predefinita 27017)
   // Nome database esempio servbay_socketio_app
   mongoose.connect('mongodb://localhost:27017/servbay_socketio_app', {
     useNewUrlParser: true,
     useUnifiedTopology: true,
     // Altri parametri come user, pass se richiedi autenticazione
     // user: 'your_mongo_user',
     // pass: 'your_mongo_password'
   })
   .then(() => console.log('MongoDB connesso con successo tramite Mongoose'))
   .catch(err => console.error('Errore connessione MongoDB:', err));
   
   // Ora puoi usare mongoose.model() per definire Schema e Model
   // ...

2. Collegarsi a Redis:

   Installa la libreria client redis:

   npm install redis

   Nel tuo codice Node.js aggiungi:

   const redis = require('redis');
   
   // Crea un client Redis, collegato di default a localhost:6379 (porta predefinita Redis)
   const client = redis.createClient({
     // Se Redis richiede autenticazione
     // password: 'your_redis_password',
     // url: 'redis://localhost:6379' // Formato URL alternativo
   });
   
   client.on('error', (err) => {
     console.error('Errore connessione Redis:', err);
   });
   
   client.on('connect', () => {
     console.log('Client Redis connesso con successo');
   });
   
   // Avvia la connessione al server Redis
   client.connect(); // Con versione v4+ occorre chiamare connect()
   
   // Ora puoi usare l’oggetto client per i comandi Redis
   // Es: await client.set('mykey', 'myvalue');
   // ...

3. Collegarsi a MariaDB / MySQL:

   ServBay supporta sia MariaDB che MySQL. Il metodo di connessione è praticamente identico. Usiamo la libreria mariadb (compatibile anche con MySQL).

   Installa il client mariadb:

   npm install mariadb

   Nel tuo codice aggiungi:

   const mariadb = require('mariadb');
   
   // Crea il pool di connessioni
   const pool = mariadb.createPool({
     host: 'localhost',
     port: 3306, // Porta predefinita MariaDB/MySQL
     user: 'root', // Utente root di default su ServBay
     password: 'password', // Sostituisci con la password che hai impostato su ServBay
     database: 'servbay_socketio_app', // Esempio nome database
     connectionLimit: 5 // Numero massimo connessioni nel pool
   });
   
   // Ottiene una connessione di test
   pool.getConnection()
     .then(conn => {
       console.log("Connessione a MariaDB/MySQL avvenuta con successo");
       conn.release(); // Rilascia la connessione al pool
       // Puoi ora utilizzare pool per le query al database
       // Es: await pool.query("SELECT 1");
       // ...
     })
     .catch(err => {
       console.error("Errore connessione MariaDB/MySQL:", err);
     });

   Nota: Sostituisci il campo password con la tua password effettiva impostata per MySQL/MariaDB in ServBay. È buona pratica creare un utente dedicato per l’app invece di usare root.

4. Collegarsi a PostgreSQL:

   Installa la libreria client pg:

   npm install pg

   Nel tuo codice aggiungi:

   const { Pool } = require('pg');
   
   // Crea il pool di connessioni
   const pool = new Pool({
     user: 'user', // Utente default PostgreSQL
     host: 'localhost',
     database: 'servbay_socketio_app', // Esempio nome database
     password: 'password', // Password impostata su ServBay
     port: 5432, // Porta predefinita PostgreSQL
   });
   
   // Ottiene una connessione di test
   pool.connect((err, client, done) => {
     if (err) {
       console.error('Errore connessione PostgreSQL:', err);
       return;
     }
     console.log('Connesso a PostgreSQL con successo');
     client.release(); // Rilascia la connessione al pool
     // Puoi ora utilizzare pool per le query al database
     // Es: pool.query('SELECT NOW()', (err, res) => { ... });
     // ...
   });

   Nota: Sostituisci user e password con quelli impostati su ServBay per PostgreSQL.

Integrando questi database, le tue app Socket.io potranno gestire dati in modo persistente e realizzare funzionalità più avanzate. ServBay rende l’allestimento di ambienti Node.js + database semplice e veloce in locale.

Avvertenze

• Conflitti di porta: Assicurati che la porta su cui gira la tua app (es. 8585, 8586) non sia già utilizzata da altri servizi. In caso di conflitto, cambia il valore della variabile d’ambiente PORT.
• Configurazione siti ServBay: Dopo aver configurato il reverse proxy, verifica che il web server di ServBay (Caddy o Nginx) sia stato correttamente riavviato e abbia applicato la nuova configurazione.
• Proxy WebSocket: La configurazione predefinita del reverse proxy di ServBay supporta già l’upgrade WebSocket. Se riscontri problemi, verifica i log o le impostazioni dei web server ServBay per assicurarti che il proxy WebSocket sia attivo.
• Firewall: Assicurati che il firewall di sistema non blocchi la porta usata da ServBay (ad esempio 80, 443) o dalla tua app Node.js.

FAQ (Domande Frequenti)