Créer et exécuter un projet Socket.io avec ServBay

Socket.io est une bibliothèque JavaScript populaire conçue pour développer des applications web temps réel, bidirectionnelles et orientées événement. Basée sur le protocole WebSocket, elle intègre également des mécanismes de repli (comme le long polling) si nécessaire, afin de garantir une communication temps réel fiable et stable dans tous les environnements clients et réseaux.

Ce guide détaille comment exploiter la puissance de l’environnement de développement local ServBay pour installer, exécuter et gérer un projet Socket.io. ServBay offre un environnement Node.js préconfiguré ainsi qu’une gestion intuitive des sites web (anciennement appelés « hôtes »), pour un développement Socket.io encore plus efficace.

Qu’est-ce que Socket.io ?

Socket.io est une bibliothèque qui implémente un mécanisme de communication temps réel, bidirectionnel et basé sur les événements. Elle comporte deux parties :

Une bibliothèque backend fonctionnant sur un serveur Node.js.
Une bibliothèque JavaScript côté client qui s’exécute dans le navigateur.

Bien que Socket.io privilégie l’utilisation de WebSocket, elle assure la compatibilité avec les anciens navigateurs ou réseaux restreints qui ne gèrent pas WebSocket, en détectant automatiquement et en basculant vers d’autres modes de transport (comme Adobe Flash Socket, Ajax Long Polling, Ajax Multipart Streaming, Forever IFrame, JSONP Polling, etc.).

Principales fonctionnalités et avantages de Socket.io

Communication en temps réel : Échange instantané de données entre le serveur et le client, idéal pour des applications de chat, outils collaboratifs, tableaux de bord temps réel, jeux en ligne, etc.
Support multiplateforme : Utilisable aussi bien dans les navigateurs web, les applications mobiles que sur les environnements serveur Node.js.
Reconnexion automatique : En cas d’interruption réseau, le client tente automatiquement de se reconnecter au serveur, ce qui renforce la robustesse de l’application.
Architecture événementielle : Le modèle de programmation basé sur les événements facilite la gestion et la compréhension des communications asynchrones.
Salles et espaces de nommage : Prise en charge du regroupement des clients dans des « salles » pour diffuser des messages à des groupes spécifiques ; les « namespaces » permettent la multiplexion de ressources sur une même connexion.
Support des données binaires : Transmission et réception aisées de données binaires.
Compatibilité maximale : Fiabilité assurée sur tous types de réseaux grâce à de multiples mécanismes de transport.

Avec Socket.io, les développeurs peuvent se concentrer sur la logique métier de l’application sans se soucier de la complexité des fondements de la communication temps réel.

Créer et exécuter un projet Socket.io avec ServBay

ServBay propose un environnement clé en main pour les développeurs Node.js, incluant le runtime Node.js, le gestionnaire de paquets npm, ainsi que des outils pratiques de gestion de sites. Nous allons utiliser ces fonctionnalités pour configurer et lancer un projet Socket.io d’exemple.

Prérequis

Avant de commencer, veuillez vous assurer d’avoir réalisé les étapes suivantes :

Installer ServBay : Téléchargez et installez la dernière version de ServBay via le site officiel de ServBay.
Installer le package Node.js dans ServBay : Vérifiez que le package Node.js est installé dans ServBay. Rendez-vous dans l’onglet « Packages » (anciennement « Services ») du panneau ServBay pour l’installation et la gestion. Consultez la documentation Utiliser Node.js avec ServBay pour plus de détails.

Création d’un projet Socket.io d’exemple

Nous allons réaliser une petite application de chat pour l’exemple.

Initialiser le répertoire du projet :
Ouvrez votre terminal. Par convention, ServBay recommande de placer vos projets web dans le dossier /Applications/ServBay/www. Accédez à ce dossier, créez un nouveau dossier de projet, puis initialisez un projet Node.js et installez les dépendances nécessaires :
bash
```
cd /Applications/ServBay/www
mkdir servbay-socketio-chat
cd servbay-socketio-chat
npm init -y
npm install express socket.io
```
1
2
3
4
5
Cela crée un fichier package.json dans le dossier servbay-socketio-chat et installe les deux dépendances principales : express (pour servir les fichiers statiques et gérer les requêtes HTTP) et socket.io (bibliothèque serveur et client pour Socket.io).

Créer le fichier serveur (server.js) :

Dans le dossier racine de servbay-socketio-chat, créez un fichier nommé server.js et copiez-y le code suivant. Ce fichier lancera le serveur HTTP, intégrera Socket.io et gèrera les connexions et la diffusion des messages côté client.

javascript

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const path = require('path'); // Importation du module path

const app = express();
// Création d'un serveur HTTP basé sur l’application express
const server = http.createServer(app);
// Attachement de Socket.io au serveur HTTP
const io = socketIo(server);

// Définition du dossier de fichiers statiques vers le répertoire courant
app.use(express.static(__dirname));

// Traitement d’une requête GET sur la racine : envoi du fichier index.html
app.get('/', (req, res) => {
  // Utilisation de path.join pour assurer la compatibilité des chemins sur tous les systèmes d’exploitation
  res.sendFile(path.join(__dirname, 'index.html'));
});

// Écoute de l’événement de connexion Socket.io
io.on('connection', (socket) => {
  console.log('a user connected'); // Journalisation lors d'une nouvelle connexion utilisateur

  // Écoute de l'événement de déconnexion
  socket.on('disconnect', () => {
    console.log('user disconnected'); // Journalisation lors d'une déconnexion utilisateur
  });

  // Écoute de l’événement 'chat message'
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg); // Affiche le message reçu
    // Diffuse le message à tous les clients connectés
    io.emit('chat message', msg);
  });
});

// Récupération du port via la variable d’environnement ou utilisation d’une valeur par défaut
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`);
});

Explication du code :

express est utilisé pour fournir un serveur web simple et servir le fichier index.html.
http.createServer(app) crée un serveur HTTP standard, base de Socket.io.
socketIo(server) initialise et attache Socket.io au serveur HTTP.
io.on('connection', ...) écoute les connexions de nouveaux clients.
socket.on('disconnect', ...) détecte la déconnexion des clients.
socket.on('chat message', ...) écoute les évènements intitulés 'chat message' et reçoit les données.
io.emit('chat message', msg) diffuse tout message reçu à tous les clients connectés.

Créer le fichier client (index.html) :

Toujours dans le dossier racine, créez un fichier index.html et insérez le code ci-dessous. Ce fichier contient la structure HTML, le style et le code JavaScript Socket.io client, pour la connexion, l’envoi et l'affichage des messages.

html

<!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; /* Bleu 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">Bienvenue sur la démo ServBay Socket.io Chat !</div>
  <ul id="messages"></ul>
  <form id="form" action="">
    <input id="input" autocomplete="off" /><button type="submit">Envoyer</button>
  </form>

  <!-- Inclusion de la bibliothèque Socket.io côté client -->
  <!-- Ce fichier est généré dynamiquement par le serveur Socket.io lors de l’exécution -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    // Connexion au serveur Socket.io
    // Si le client et le serveur fonctionnent sous le même domaine et port, io() s’y connecte automatiquement
    var socket = io();

    var form = document.getElementById('form');
    var input = document.getElementById('input');
    var messages = document.getElementById('messages'); // Récupère l’élément messages

    form.addEventListener('submit', function(e) {
      e.preventDefault(); // Empêche le comportement par défaut du formulaire
      if (input.value) {
        // Envoi de l’événement 'chat message' et du contenu du message au serveur
        socket.emit('chat message', input.value);
        input.value = ''; // Vide le champ de saisie
      }
    });

    // Écoute de l’événement 'chat message' envoyé par le serveur
    socket.on('chat message', function(msg) {
      // Crée un nouvel élément de liste pour afficher le message
      var item = document.createElement('li');
      item.textContent = msg; // Utilisation de textContent pour éviter les attaques XSS
      messages.appendChild(item); // Ajoute le message à la liste
      // Fait défiler la page jusqu’au dernier message
      window.scrollTo(0, document.body.scrollHeight);
    });
  </script>
</body>
</html>

Explication du code :

La page propose une structure HTML simple, des styles CSS (notamment une bannière aux couleurs de ServBay), une liste de messages (ul#messages) et un formulaire d’envoi (form#form).
<script src="/socket.io/socket.io.js"></script> inclut la bibliothèque client Socket.io. Ce fichier est servi automatiquement par le serveur Socket.io – inutile de le créer.
io() initialise et connecte le client au serveur Socket.io.
Le client intercepte la soumission du formulaire, bloque le comportement par défaut, puis envoie le message via socket.emit('chat message', input.value).
À la réception de l’événement 'chat message', le message est ajouté au fil de discussion.

À ce stade, le code de base du projet Socket.io d’exemple est prêt. Passons à l’exécution et à l’accès via ServBay.

Exécuter le projet via ServBay (mode développement)

En phase de développement, on lance généralement le serveur Node.js directement, puis on configure ServBay en proxy inverse pour relier le service à un nom de domaine local.

Lancer le serveur Node.js (mode développement) :
Ouvrez le terminal, déplacez-vous vers le dossier /Applications/ServBay/www/servbay-socketio-chat, puis lancez la commande suivante pour démarrer le serveur. Nous utilisons le port 8585 (modifiable si besoin) :
bash
```
cd /Applications/ServBay/www/servbay-socketio-chat
PORT=8585 node server.js
```
1
2
Une fois lancé, le terminal affiche un message du type Server running on port 8585. Le serveur Node.js écoute alors sur le port 8585 de votre machine.
Configurer un site ServBay (proxy inverse) :
Pour accéder au projet via un nom de domaine local et tirer parti du HTTPS/SSL de ServBay, créez un site en proxy inverse.
- Ouvrez le panneau de contrôle ServBay.
- Rendez-vous dans l’onglet « Sites » (anciennement « Hôtes »).
- Cliquez sur le bouton d’ajout d’un nouveau site.
- Configurez comme suit :
  - Nom : ServBay Socket.io Dev (ou tout nom explicite)
  - Domaine(s) : servbay-socketio-dev.servbay.demo (ou tout domaine en .servbay.demo)
  - Type de site : Sélectionnez Proxy inverse (Reverse Proxy)
  - Destination du proxy : http://127.0.0.1:8585 (le port de votre serveur Node.js)
- Enregistrez la configuration. ServBay appliquera automatiquement les changements et relancera si nécessaire les services web associés (Caddy ou Nginx selon votre config).
Remarque : Le proxy inverse est crucial pour Socket.io, car il gère non seulement les requêtes HTTP standards, mais aussi la montée en WebSocket. Les configurations de Caddy/Nginx livrées avec ServBay incluent déjà la prise en charge du proxy WebSocket.
Pour consulter la procédure détaillée : Ajouter un site Node.js en développement. Pour activer HTTPS sur ce domaine local avec ServBay, consultez la documentation Protéger un site avec SSL/TLS. ServBay User CA et ServBay Public CA peuvent générer et valider des certificats SSL locaux.
Accéder au site de développement :
Ouvrez dans votre navigateur le domaine local configuré, tel que : https://servbay-socketio-dev.servbay.demo. Vous devriez voir l’interface du chat et pouvoir interagir en temps réel via plusieurs onglets ou appareils.

Déployer le projet via ServBay (mode production)

En production, il est conseillé d’utiliser un gestionnaire de processus (comme PM2 ou forever) pour exécuter Node.js de manière robuste, puis de l’intégrer à ServBay. Nous illustrons ici la configuration du proxy inverse ServBay, en supposant que l’application Node.js tourne en arrière-plan.

Démarrer le serveur Node.js (mode production) :
En prod, utilisez un gestionnaire pour garantir le redémarrage automatique du serveur. Exemple avec PM2 :
bash
```
# Installation de PM2 si besoin
# npm install pm2 -g

cd /Applications/ServBay/www/servbay-socketio-chat
PORT=8586 NODE_ENV=production pm2 start server.js --name servbay-socketio-prod
```
1
2
3
4
5
ceci lance server.js sur le port 8586 avec l’environnement production, sous supervision de PM2.
Configurer le site ServBay de production (proxy inverse) :
Comme pour la dev, ajoutez un site en proxy inverse, mais vers le port 8586 :
- Ouvrez le panneau de contrôle ServBay.
- Rendez-vous dans « Sites ».
- Cliquez sur l’ajout d’un nouveau site.
- Paramètres :
  - Nom : ServBay Socket.io Prod (ou autre)
  - Domaine(s) : servbay-socketio-prod.servbay.demo (ou domaine en .servbay.demo)
  - Type de site : Proxy inverse (Reverse Proxy)
  - Destination du proxy : http://127.0.0.1:8586
- Enregistrez.
Accéder au site de production :
Accédez à votre domaine de production via le navigateur : https://servbay-socketio-prod.servbay.demo.

Grâce au proxy inverse ServBay, vous pouvez gérer aisément plusieurs applications Node.js (en dev ou prod), leur associer des domaines locaux et des certificats SSL, sans configurer manuellement les fichiers hosts ou le serveur web.

Connexion aux bases de données fournies par ServBay

ServBay intègre divers gestionnaires de bases de données : MySQL, MariaDB, PostgreSQL, MongoDB, Redis, etc. Votre projet Socket.io pourra donc stocker des données utilisateurs, historiques de messages… Voici des exemples d’accès à ces bases côté Node.js.

Important : Avant d’exécuter les exemples, assurez-vous d’avoir installé et démarré les bases correspondantes via ServBay. Retrouvez leurs informations de connexion par défaut dans le panneau ou la documentation ServBay. Le mot de passe root MySQL/MariaDB est défini à l’installation. Il peut être réinitialisé via ServBay.

Connexion à MongoDB :

Installation de Mongoose ODM (ou du driver officiel) :

bash

npm install mongoose

Dans votre code Node.js (ex: server.js ou module dédié) :

javascript

const mongoose = require('mongoose');

// Connexion à l’instance MongoDB locale (port 27017 par défaut)
// Nom de base de données servbay_socketio_app à titre d’exemple
mongoose.connect('mongodb://localhost:27017/servbay_socketio_app', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  // Ajoutez user, pass si authentification requise
  // user: 'your_mongo_user',
  // pass: 'your_mongo_password'
})
.then(() => console.log('Connexion MongoDB réussie via Mongoose'))
.catch(err => console.error('Erreur connexion MongoDB:', err));

// Vous pouvez ensuite définir des schémas et modèles avec mongoose.model()
// ...

Connexion à Redis :

Installer la bibliothèque client :

bash

npm install redis

Dans votre code Node.js :

javascript

const redis = require('redis');

// Instance client Redis, se connecte à localhost:6379 par défaut
const client = redis.createClient({
  // Ajouter le mot de passe si nécessaire
  // password: 'your_redis_password',
  // url: 'redis://localhost:6379' // Ou au format URL
});

client.on('error', (err) => {
  console.error('Erreur connexion Redis :', err);
});

client.on('connect', () => {
  console.log('Client Redis connecté');
});

// Connexion au serveur Redis
client.connect(); // Depuis v4+, connect() doit être appelé explicitement

// Le client peut ensuite exécuter des commandes Redis
// Exemple : await client.set('mykey', 'myvalue');
// ...

Connexion à MariaDB / MySQL :

ServBay supporte MariaDB et MySQL. Le module mariadb convient pour les deux.

Installer le client MariaDB :

bash

npm install mariadb

Dans votre code Node.js :

javascript

const mariadb = require('mariadb');

// Création d’un pool de connexions
const pool = mariadb.createPool({
  host: 'localhost',
  port: 3306, // Port par défaut MariaDB/MySQL
  user: 'root', // User root ServBay par défaut
  password: 'password', // Mettez ici le mdp root défini dans ServBay
  database: 'servbay_socketio_app', // Exemple de base
  connectionLimit: 5 // Taille du pool
});

// Test de connexion à la base
pool.getConnection()
  .then(conn => {
    console.log("Connexion MariaDB/MySQL réussie");
    conn.release(); // Libère la connexion au pool
    // Vous pouvez maintenant interroger la base via pool
    // Exemple : await pool.query("SELECT 1");
    // ...
  })
  .catch(err => {
    console.error("Erreur de connexion MariaDB/MySQL :", err);
  });

Note : Remplacez password par le mot de passe réel du root MariaDB/MySQL. Il est conseillé de créer un utilisateur dédié à l’application.

Connexion à PostgreSQL :

Installer le client :

bash

npm install pg

Dans votre code Node.js :

javascript

const { Pool } = require('pg');

// Création du pool de connexions
const pool = new Pool({
  user: 'user', // Utilisateur par défaut
  host: 'localhost',
  database: 'servbay_socketio_app', // Exemple de base
  password: 'password', // Renseignez le mdp défini dans ServBay
  port: 5432, // Port PostgreSQL par défaut
});

// Test de connexion
pool.connect((err, client, done) => {
  if (err) {
    console.error('Erreur connexion PostgreSQL :', err);
    return;
  }
  console.log('Connexion PostgreSQL réussie');
  client.release(); // Libère la connexion
  // Utilisez pool pour vos requêtes, exemple :
  // pool.query('SELECT NOW()', (err, res) => { ... });
  // ...
});

Note : Remplacez user et password par l’utilisateur/mot de passe PostgreSQL défini dans ServBay.

Grâce à ces intégrations, votre application Socket.io peut stocker des données de manière pérenne et gagner en fonctionnalités. ServBay facilite grandement la création d’un environnement Node.js + base de données en local.

Points d’attention

Conflit de ports : Vérifiez que le port utilisé par votre application Node.js (ex : 8585 ou 8586) n’est pas occupé par un autre service. Modifiez la variable d’environnement PORT si besoin.
Configuration des sites ServBay : Après ajout/modification d’un proxy dans ServBay, assurez-vous que le serveur web (Caddy ou Nginx) a bien redémarré et appliqué la configuration.
Proxy WebSocket : La configuration proxy de ServBay prend en charge WebSocket par défaut. En cas de problème, vérifiez les logs et la configuration pour valider la gestion des connexions WebSocket.
Pare-feu : Assurez-vous que le pare-feu de votre OS ne bloque pas les ports utilisés par ServBay (80, 443) ou par vos applis Node.js.

Créer et exécuter un projet Socket.io avec ServBay ​

Qu’est-ce que Socket.io ? ​

Principales fonctionnalités et avantages de Socket.io ​

Créer et exécuter un projet Socket.io avec ServBay ​

Prérequis ​

Création d’un projet Socket.io d’exemple ​

Exécuter le projet via ServBay (mode développement) ​

Déployer le projet via ServBay (mode production) ​

Connexion aux bases de données fournies par ServBay ​

Points d’attention ​

FAQ ​

Créer et exécuter un projet Socket.io avec ServBay

Qu’est-ce que Socket.io ?

Principales fonctionnalités et avantages de Socket.io

Créer et exécuter un projet Socket.io avec ServBay

Prérequis

Création d’un projet Socket.io d’exemple

Exécuter le projet via ServBay (mode développement)

Déployer le projet via ServBay (mode production)

Connexion aux bases de données fournies par ServBay

Points d’attention

FAQ