Le coeur de l'application : le serveur temps réel

Maintenant que nous avons une vision claire des fonctionnalités et de l'interface de notre application de chat, il est temps de construire son composant central : le serveur backend. C'est lui qui va écouter les connexions entrantes des clients, recevoir les messages et les diffuser à tous les participants.

Pour gérer la communication WebSocket de manière simplifiée et robuste, nous allons utiliser la bibliothèque Socket.IO côté serveur. Elle s'intègre facilement avec les serveurs HTTP Node.js existants (créés avec le module `http` natif ou via des frameworks comme Express) et nous fournit une API événementielle pour gérer les connexions et les échanges de messages.

Cette section détaille les étapes nécessaires pour initialiser un serveur Node.js de base, y intégrer Socket.IO, et mettre en place la logique initiale pour accepter les connexions des clients.

Initialisation du projet et dépendances

Si vous continuez le projet précédent, vous avez déjà une structure. Sinon, créez un nouveau répertoire et initialisez un projet Node.js :

mkdir real-time-chat
cd real-time-chat
npm init -y

Installons les dépendances nécessaires pour notre serveur :

npm install express socket.io

• `express` : Bien que Socket.IO puisse fonctionner avec le module `http` natif, utiliser Express est une pratique courante pour structurer le serveur et potentiellement servir des fichiers statiques (comme notre client HTML).
• `socket.io` : La bibliothèque Socket.IO pour le serveur.

Comme précédemment, installons `nodemon` pour faciliter le développement :

npm install --save-dev nodemon

Et ajoutons un script `dev` dans `package.json` :

// package.json (section scripts)
"scripts": {
  "start": "node server.js",
  "dev": "nodemon server.js"
}

Création du Serveur HTTP et Intégration de Socket.IO

Socket.IO fonctionne en s'attachant à un serveur HTTP Node.js existant. Nous allons donc d'abord créer un serveur HTTP simple avec Express, puis y greffer Socket.IO.

Créez un fichier `server.js` à la racine de votre projet.

Importons les modules nécessaires :

const express = require('express');
const http = require('http');
const { Server } = require("socket.io"); // Importer la classe Server de socket.io

Créons l'application Express et le serveur HTTP :

const app = express();
const httpServer = http.createServer(app);

Maintenant, initialisons Socket.IO en lui passant notre serveur HTTP. Nous configurons également CORS (Cross-Origin Resource Sharing) pour autoriser les connexions depuis notre client (qui sera servi sur une origine différente en développement, ou même domaine/port si servi statiquement). Pour la simplicité, nous autorisons toutes les origines (`"*"`), mais en production, vous devriez restreindre cela à l'origine de votre frontend.

const io = new Server(httpServer, {
  cors: {
    origin: "*", // ATTENTION: A restreindre en production !
    methods: ["GET", "POST"]
  }
});

Voici la structure de base de `server.js` combinant ces étapes :

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

const app = express();
const httpServer = http.createServer(app);
const io = new Server(httpServer, {
    cors: {
        origin: "*", // ATTENTION: A restreindre en production !
        methods: ["GET", "POST"]
    }
});

const PORT = process.env.PORT || 3001; // Utiliser un port différent de l'API REST si nécessaire

// Route de base pour vérifier que le serveur HTTP fonctionne
app.get('/', (req, res) => {
  res.send('
Serveur de Chat Socket.IO
');
});

// --- Logique Socket.IO viendra ici ---

// Démarrer le serveur HTTP (qui inclut Socket.IO)
httpServer.listen(PORT, () => {
  console.log(`Serveur écoutant sur le port ${PORT}`);
});

Gérer les Connexions Entrantes (`connection` event)

Socket.IO fonctionne sur un modèle événementiel. L'événement principal côté serveur est `connection`, qui est émis chaque fois qu'un nouveau client établit une connexion WebSocket avec le serveur. Nous devons écouter cet événement pour initialiser la logique pour chaque client connecté.

Le callback de l'événement `connection` reçoit un objet `socket` qui représente la connexion spécifique de ce client. Cet objet `socket` est lui-même un émetteur/récepteur d'événements, nous permettant de communiquer individuellement avec ce client ou d'écouter les événements qu'il émet.

Ajoutons la gestion de base de la connexion et de la déconnexion dans notre `server.js` :

// server.js (ajout dans la section // --- Logique Socket.IO viendra ici ---)

io.on('connection', (socket) => {
  console.log('Un utilisateur s\'est connecté:', socket.id); // socket.id est un ID unique pour chaque connexion

  // Gérer la déconnexion
  socket.on('disconnect', () => {
    console.log('Utilisateur déconnecté:', socket.id);
    // Ici, plus tard, on pourrait notifier les autres utilisateurs
  });

  // --- D'autres écouteurs d'événements personnalisés (ex: 'chat message') viendront ici ---

});

Avec ce code, chaque fois qu'un client se connecte, nous affichons son ID unique dans la console du serveur. De même, lorsqu'il se déconnecte (fermeture de l'onglet, perte de connexion), nous enregistrons l'événement `disconnect`. C'est à l'intérieur de ce callback `io.on('connection', ...)` que nous ajouterons la logique pour recevoir et diffuser les messages de chat dans les étapes suivantes.

Lancement et Prochaines Etapes

Vous pouvez maintenant démarrer votre serveur WebSocket en utilisant la commande :

npm run dev

Le serveur est maintenant prêt à accepter des connexions WebSocket sur le port spécifié (3001 par défaut dans notre exemple). Il ne fait pas encore grand-chose à part enregistrer les connexions et déconnexions, mais la structure de base est en place.

La prochaine étape logique est de construire l'interface client (HTML, CSS, JavaScript) qui se connectera à ce serveur Socket.IO, puis d'implémenter la logique d'échange de messages entre le client et le serveur.