Socket.io-project maken en uitvoeren met ServBay

Socket.io is een populaire JavaScript-bibliotheek, speciaal ontworpen voor het bouwen van realtime, tweerichtings, event-gedreven webapplicaties. Het is gebaseerd op het WebSocket-protocol en biedt waar nodig fallback-mechanismen (zoals long polling), zodat betrouwbare realtime communicatie wordt gewaarborgd onder diverse netwerkcondities en op verschillende clients.

In deze handleiding lees je stap voor stap hoe je met de krachtige lokale ontwikkelomgeving van ServBay een Socket.io-project opzet, uitvoert en beheert. ServBay biedt een vooraf geïnstalleerde Node.js-omgeving en gebruiksvriendelijke site-/hostbeheerfuncties, waarmee het ontwikkelen met Socket.io efficiënt en plezierig wordt.

Wat is Socket.io?

Socket.io is een bibliotheek waarmee realtime, tweerichtings, event-gebaseerde communicatie mogelijk is. Het bestaat uit twee onderdelen:

1. Een backend-bibliotheek die draait op een Node.js-server.
2. Een client-side JavaScript-bibliotheek voor gebruik in browsers.

Hoewel Socket.io primair is gericht op WebSocket, zorgt het dankzij automatische detectie en fallback-opties (zoals Adobe Flash Socket, Ajax Long Polling, Ajax Multipart Streaming, Forever IFrame, JSONP Polling, etc.) voor compatibiliteit met oudere browsers en beperkte netwerkomgevingen waarin WebSocket niet direct wordt ondersteunt.

Belangrijkste kenmerken en voordelen van Socket.io

• Realtime communicatie: Directe gegevensuitwisseling tussen server en client, ideaal voor chatapplicaties, samenwerkingshulpmiddelen, live dashboards, online games, etc.
• Cross-platform ondersteuning: Werkt in web browsers, mobiele applicaties en Node.js-serveromgevingen.
• Automatisch herverbinden: De client probeert automatisch opnieuw te verbinden na een verbroken verbinding, waardoor je app robuuster is.
• Event-gedreven: Dankzij het event-gedreven programmeermodel is asynchrone communicatie eenvoudig en overzichtelijk te beheren.
• Rooms en namespaces: Ondersteunt het groeperen van clients in “rooms” voor het gericht versturen van berichten; “namespaces” vergemakkelijken het delen en multiplexen van resources over één connectie.
• Ondersteuning voor binaire data: Gemakkelijk verzenden en ontvangen van binaire gegevens.
• Hoge compatibiliteit: Meerdere transportmechanismen verzekeren betrouwbare communicatie onder uiteenlopende netwerkcondities.

Dankzij Socket.io kun je je als ontwikkelaar volledig focussen op de applicatielogica, zonder je te hoeven verdiepen in de complexe details van realtime communicatie.

Een Socket.io-project opzetten en uitvoeren met ServBay

ServBay voorziet Node.js-ontwikkelaars van een direct bruikbare lokale omgeving, inclusief Node.js-runtime, npm-package manager én handige sitebeheer-tools. We gebruiken deze mogelijkheden om een voorbeeld Socket.io-chatproject op te zetten.

Vereisten

Voordat je begint, zorg ervoor dat je het volgende hebt voltooid:

1. ServBay geïnstalleerd: Download en installeer de laatste versie van ServBay’s officiële website.
2. Node.js-package in ServBay geïnstalleerd: Zorg dat Node.js binnen ServBay actief is. Dit kun je beheren via het gedeelte “Packages” (voorheen “Services”) in het ServBay-configuratiescherm. Raadpleeg Node.js gebruiken in ServBay voor een uitgebreide installatie- en gebruikershandleiding.

Een Socket.io-demo project aanmaken

We maken een eenvoudige chatapp als demonstratie.

1. Initialiseer je projectmap:

   Open je terminal. ServBay adviseert projectsites op te slaan onder /Applications/ServBay/www. Ga naar deze map, maak een nieuwe map voor het project, initialiseer een Node.js-project en installeer de benodigde dependencies:

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

   Hierdoor verschijnt er in de servbay-socketio-chat map een package.json en worden express (voor het serveren van statische bestanden en HTTP-afhandeling) en socket.io (server- en clientbibliotheek) geïnstalleerd.

2. Maak het serverbestand (server.js):

   Maak in de projectmap servbay-socketio-chat een bestand server.js aan en plaats daarin de volgende code. Dit bestand start de HTTP-server, integreert Socket.io en handelt clientconnecties en het broadcasten van berichten af.

   const express = require('express');
   const http = require('http');
   const socketIo = require('socket.io');
   const path = require('path'); // Importeer het path-module
   
   const app = express();
   // Maak een HTTP-server gebaseerd op de express-app
   const server = http.createServer(app);
   // Koppel Socket.io aan de HTTP-server
   const io = socketIo(server);
   
   // Stel de map voor statische bestanden in naar de huidige directory
   app.use(express.static(__dirname));
   
   // Afhandeling van GET-verzoek op root: verstuur index.html
   app.get('/', (req, res) => {
     // Gebruik path.join om platformonafhankelijke paden te verzekeren
     res.sendFile(path.join(__dirname, 'index.html'));
   });
   
   // Luister op Socket.io connecties
   io.on('connection', (socket) => {
     console.log('a user connected'); // Log bij nieuwe gebruiker
   
     // Luister naar disconnect event
     socket.on('disconnect', () => {
       console.log('user disconnected'); // Log bij disconnectie
     });
   
     // Luister naar 'chat message' event
     socket.on('chat message', (msg) => {
       console.log('message: ' + msg); // Log ontvangen berichten
       // Zend ontvangen bericht door naar alle verbonden clients
       io.emit('chat message', msg);
     });
   });
   
   // Haal het poortnummer uit omgevingsvariabele of gebruik standaardwaarde
   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`);
   });

   Code-uitleg:

   • We gebruiken express om een simpele webserver op te zetten voor index.html.
   • http.createServer(app) creëert een standaard HTTP-server als basis voor Socket.io.
   • socketIo(server) initialiseert en koppelt Socket.io aan de HTTP-server.
   • io.on('connection', ...) luistert naar nieuwe clientverbindingen.
   • socket.on('disconnect', ...) registreert disconnecties van clients.
   • socket.on('chat message', ...) vangt events op van type 'chat message'.
   • io.emit('chat message', msg) stuurt ontvangen berichten naar alle aangesloten clients.

3. Maak het clientbestand (index.html):

   Maak in dezelfde projectmap een bestand index.html aan en plak deze code erin. Dit bestand bevat de HTML-structuur, stijlen en de JavaScript-clientcode voor Socket.io: verbinding maken, berichten versturen en weergeven.

   <!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; /* ServBay Blauw */
         color: white;
         text-align: center;
         padding: 15px 0;
         font-size: 22px;
         margin-bottom: 20px;
         font-weight: bold;
       }
     </style>
   </head>
   <body>
     <div class="servbay-banner">Welkom bij de ServBay Socket.io Chat Demo!</div>
     <ul id="messages"></ul>
     <form id="form" action="">
       <input id="input" autocomplete="off" /><button type="submit">Verstuur</button>
     </form>
   
     <!-- Importeer de Socket.io-clientbibliotheek -->
     <!-- Dit bestand wordt dynamisch gegenereerd door de Socket.io-server -->
     <script src="/socket.io/socket.io.js"></script>
     <script>
       // Maak verbinding met de Socket.io-server
       // Als client en server op hetzelfde domein en poort draaien, connecteert io() automatisch
       var socket = io();
   
       var form = document.getElementById('form');
       var input = document.getElementById('input');
       var messages = document.getElementById('messages'); // Verkrijg messages-element
   
       form.addEventListener('submit', function(e) {
         e.preventDefault(); // Voorkom standaard submitgedrag van het formulier
         if (input.value) {
           // Zend 'chat message' event en berichtinhoud naar de server
           socket.emit('chat message', input.value);
           input.value = ''; // Maak invoerveld leeg
         }
       });
   
       // Luister naar 'chat message'-event van de server
       socket.on('chat message', function(msg) {
         // Maak een nieuw list item aan om het bericht te tonen
         var item = document.createElement('li');
         item.textContent = msg; // Gebruik textContent om XSS-aanvallen te voorkomen
         messages.appendChild(item); // Voeg bericht toe aan de lijst
         // Scroll naar het laatste bericht
         window.scrollTo(0, document.body.scrollHeight);
       });
     </script>
   </body>
   </html>

   Code-uitleg:

   • De pagina bevat een eenvoudige HTML-structuur, enkele CSS-stijlen (inclusief een ServBay-banner), een berichtenlijst (ul#messages) en een verzendformulier (form#form).
   • <script src="/socket.io/socket.io.js"></script> importeert de Socket.io-clientbibliotheek. Dit bestand wordt niet handmatig gemaakt, maar automatisch aangeboden door de server, op het pad /socket.io/socket.io.js.
   • io() initialiseert de connectie met de Socket.io-server.
   • De client luistert naar het verzend-event van het formulier, voorkomt standaardgedrag en stuurt berichten via socket.emit('chat message', input.value).
   • Ontvangen 'chat message'-events worden getoond in de berichtenlijst in de browser.

Je hebt nu de basis van het Socket.io-demo project. We leggen nu uit hoe je het via ServBay draait en toegankelijk maakt.

Project uitvoeren via ServBay (ontwikkelmodus)

In de ontwikkelfase kun je de Node.js-server direct starten en er via ServBay’s reverse proxy eenvoudig een lokaal domein aan koppelen.

1. Start de Node.js ontwikkelserver:

   Open de terminal, ga naar je projectmap /Applications/ServBay/www/servbay-socketio-chat, en start de server op een gewenste poort (bijv. 8585):

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

   Na het starten zie je Server running on port 8585 in de terminal. De server luistert nu op poort 8585.

2. Configureer een site (reverse proxy) in ServBay:

   Om je app bereikbaar te maken via een lokaal domein en HTTPS/SSL van ServBay te gebruiken, maak je in ServBay een reverse proxy site aan.

   • Open het ServBay-configuratiescherm.
   • Ga naar het deel “Websites” (voorheen “Hosts”).
   • Klik op de knop om een nieuwe site toe te voegen.
   • Instellingen als volgt:
     • Naam: ServBay Socket.io Dev (of een andere herkenbare naam)
     • Domein(en): servbay-socketio-dev.servbay.demo (of elk gewenst .servbay.demo-domein)
     • Sitetype: Kies Reverse Proxy
     • Proxydoel: http://127.0.0.1:8585 (verwijst naar je net gestarte Node.js-server)
   • Sla op. ServBay past de wijzigingen automatisch toe, mogelijk moet de bijbehorende webserver (zoals Caddy of Nginx) herstarten volgens jouw ServBay-instelling.

   Let op: De reverse proxy is essentieel voor Socket.io. Hij stuurt niet alleen reguliere HTTP-verzoeken door, maar ook de WebSocket-upgradehandshakes. De interne Caddy/Nginx-configuratie van ServBay ondersteunt standaard WebSocket-proxying.

   Voor meer info zie Node.js-ontwikkelwebsite toevoegen. Voor HTTPS op je lokale domein gebruik je SSL/TLS gebruiken om website te beveiligen. Zowel ServBay User CA als ServBay Public CA kunnen daarbij lokale SSL-certificaten aanmaken en vertrouwen.

3. Toegang tot je ontwikkelsite:

   Open in je browser het ingestelde domein https://servbay-socketio-dev.servbay.demo. Je zou nu het chatvenster moeten zien. Test gerust met meerdere browsertabbladen of apparaten om de realtime-chat te ervaren!

Project uitrollen via ServBay (productiemodus)

Voor productie kun je de app veerkrachtiger maken (bijvoorbeeld met procesmanagers als PM2 of forever) en koppelen aan ServBay. Hieronder wordt alleen de reverse proxy van ServBay uitgelegd, met het uitgangspunt dat je Node.js-app continu in de achtergrond actief is.

1. Start de Node.js-productieserver:

   In productiesituaties start je je Node.js-app doorgaans via een procesmanager zodat deze herstart bij storingen en altijd op de achtergrond draait, bijvoorbeeld met PM2:

   # Als PM2 nog niet geïnstalleerd is:
   # npm install pm2 -g
   
   cd /Applications/ServBay/www/servbay-socketio-chat
   PORT=8586 NODE_ENV=production pm2 start server.js --name servbay-socketio-prod

   Zo draait server.js met PM2 op poort 8586 en krijgt het de omgevingsvariabele NODE_ENV=production mee. PM2 beheert het proces op de achtergrond.

2. Configureer een productie-site (reverse proxy) in ServBay:

   Maak vergelijkbaar met de ontwikkelmodus een nieuwe reverse proxy-site aan die naar jouw Node.js-app op de productiepoort verwijst.

   • Open het ServBay-configuratiescherm.
   • Ga naar het onderdeel “Websites”.
   • Klik op toevoegen.
   • Instellingen:
     • Naam: ServBay Socket.io Prod (of een andere herkenbare naam)
     • Domein(en): servbay-socketio-prod.servbay.demo (of ander gewenst .servbay.demo-domein)
     • Sitetype: Kies Reverse Proxy
     • Proxydoel: http://127.0.0.1:8586 (de productiepoort)
   • Sla op.

3. Toegang tot je productiesite:

   Open in je browser het domein https://servbay-socketio-prod.servbay.demo.

Met de reverse proxy van ServBay beheer je eenvoudig meerdere Node.js-apps (in ontwikkel- én productiemodus) met eigen lokale domeinen en SSL-certificaten, zonder hostsbestanden te hoeven passen of lastige webserverinstellingen.

Verbinden met databases die door ServBay geleverd worden

ServBay ondersteunt verschillende databases zoals MySQL, MariaDB, PostgreSQL, MongoDB en Redis. Je Socket.io-app zal hier wellicht mee werken voor gebruikersdata, chatgeschiedenis etc. Hieronder vind je enkele Node.js-codevoorbeelden voor de verbinding.

Belangrijk: Start en installeer de gewenste databasesoftware via het ServBay-configuratiescherm. Standaard databasegegevens (zoals poorten en standaardwachtwoorden) vind je in ServBays databasebeheertool of documentatie. Bijvoorbeeld: het root-wachtwoord voor MySQL/MariaDB zet je vaak bij de installatie. Je kunt het via ServBay eenvoudig resetten.

1. Verbinden met MongoDB:

   Installeer Mongoose ODM (of officiële mongodb driver):

   npm install mongoose

   Voeg in je Node.js-code verbinding toe (bijv. in server.js of een los databasebestand):

   const mongoose = require('mongoose');
   
   // Verbind met de lokaal draaiende MongoDB (poort 27017 is standaard)
   // De database naam servbay_socketio_app is een voorbeeld
   mongoose.connect('mongodb://localhost:27017/servbay_socketio_app', {
     useNewUrlParser: true,
     useUnifiedTopology: true,
     // Extra opties zoals user, pass indien authenticatie nodig is
     // user: 'jouw_mongo_gebruiker',
     // pass: 'jouw_mongo_wachtwoord'
   })
   .then(() => console.log('MongoDB succesvol verbonden via Mongoose'))
   .catch(err => console.error('MongoDB verbindingsfout:', err));
   
   // Nu kun je met mongoose.model() Schema’s en Models definiëren
   // ...

2. Verbinden met Redis:

   Installeer de redis client library:

   npm install redis

   Voeg in je Node.js-code verbinding toe:

   const redis = require('redis');
   
   // Maak een Redis-client aan, standaard verbindt naar localhost:6379
   const client = redis.createClient({
     // Voeg desgewenst authenticatie toe
     // password: 'jouw_redis_wachtwoord',
     // url: 'redis://localhost:6379' // Of als URL
   });
   
   client.on('error', (err) => {
     console.error('Redis verbindingsfout:', err);
   });
   
   client.on('connect', () => {
     console.log('Verbonden met Redis');
   });
   
   // Verbind met Redis-server
   client.connect(); // Bij v4+ moet je expliciet connect() aanroepen
   
   // Je kunt nu Redis-commando’s uitvoeren via client
   // Bijvoorbeeld: await client.set('mijnsleutel', 'waarde');
   // ...

3. Verbinden met MariaDB / MySQL:

   ServBay ondersteunt MariaDB en MySQL. De verbinding is vergelijkbaar; we gebruiken mariadb library (ook geschikt voor MySQL).

   Installeer de mariadb client library:

   npm install mariadb

   Voeg in je Node.js-code verbinding toe:

   const mariadb = require('mariadb');
   
   // Maak een pool
   const pool = mariadb.createPool({
     host: 'localhost',
     port: 3306, // MariaDB/MySQL standaardpoort
     user: 'root', // Meestal root in ServBay
     password: 'wachtwoord', // Stel in volgens jouw ServBay-instelling
     database: 'servbay_socketio_app', // Voorbeeld database
     connectionLimit: 5 // Poolgrootte
   });
   
   // Haal een verbinding uit de pool en test deze
   pool.getConnection()
     .then(conn => {
       console.log("Succesvol verbonden met MariaDB/MySQL");
       conn.release(); // Geef de verbinding terug aan de pool
       // Je kunt nu queries uitvoeren met pool
       // Bijvoorbeeld: await pool.query("SELECT 1");
       // ...
     })
     .catch(err => {
       console.error("MariaDB/MySQL verbindingsfout:", err);
     });

   Let op: Vervang wachtwoord door het daadwerkelijke root-wachtwoord zoals ingesteld in ServBay. Het is aanbevolen om aparte app-gebruikers aan te maken ipv direct met root te werken.

4. Verbinden met PostgreSQL:

   Installeer de pg client library:

   npm install pg

   Voeg in je Node.js-code verbinding toe:

   const { Pool } = require('pg');
   
   // Maak een pool
   const pool = new Pool({
     user: 'user', // Standaard PostgreSQL-gebruiker
     host: 'localhost',
     database: 'servbay_socketio_app', // Voorbeeld database
     password: 'wachtwoord', // Stel in volgens jouw ServBay-instelling
     port: 5432, // Standaardpoort PostgreSQL
   });
   
   // Test de verbinding
   pool.connect((err, client, done) => {
     if (err) {
       console.error('PostgreSQL verbindingsfout:', err);
       return;
     }
     console.log('Succesvol verbonden met PostgreSQL');
     client.release(); // Geef de verbinding terug aan de pool
     // Queries uitvoeren kan nu met pool.query(...)
     // Bijvoorbeeld: pool.query('SELECT NOW()', (err, res) => { ... });
     // ...
   });

   Let op: Vervang user en wachtwoord door de daadwerkelijke waarden ingesteld via ServBay.

Door databases te koppelen, kun je je Socket.io-app permanent data laten opslaan en complexere features bouwen. Dankzij ServBay is het lokaal opzetten van Node.js en verschillende database-omgevingen eenvoudig en snel.

Aandachtspunten

• Poortconflicten: Zorg dat de poort waarop je Node.js-app luistert (zoals 8585 of 8586) niet al door een ander proces wordt gebruikt. Je kunt altijd het poortnummer via de PORT-omgeving variëren.
• ServBay-siteconfiguratie: Controleer na toevoegen van een reverse proxy-site of ServBay’s webserver (Caddy/Nginx) is herstart en de nieuwe configuratie draait.
• WebSocket-proxy: De reverse proxyconfiguratie van ServBay ondersteunt standaard WebSocket-upgrades. Zie je verbindingsproblemen? Controleer de webserverlogs en settings of de WebSocket-proxy goed staat.
• Firewall: Zorg dat lokale firewalls ServBay-poorten (zoals 80, 443) en je Node.js-poorten niet blokkeren.

Veelgestelde vragen