WebSockets avec ExpressJS - Guide pour Débutants

Introduction : Qu’est-ce que les WebSockets ?

Les WebSockets, c’est comme un téléphone qui reste connecté : au lieu d’envoyer une lettre (requête HTTP) et d’attendre une réponse, le serveur et le client peuvent parler en continu. Avec ExpressJS, on peut ajouter cette magie pour des choses comme un chat en direct ou des mises à jour instantanées.

Étape 1 : Préparer Votre Environnement

Avant de coder, préparons tout ce qu’il faut. Si vous avez suivi les tutoriels précédents, vous avez déjà Node.js et ExpressJS. Voici les étapes :

Vérifiez Node.js : Ouvrez un terminal et tapez node -v. Si une version apparaît (ex. : v16.13.0), c’est bon. Sinon, téléchargez Node.js sur nodejs.org.
Créez un dossier projet : Faites un dossier nommé "websockets-express" sur votre ordinateur. Ouvrez-le dans un éditeur comme Visual Studio Code.
Initialisez le projet : Dans le terminal, allez dans ce dossier avec cd chemin/vers/websockets-express, puis tapez npm init -y. Cela crée un fichier package.json.
Installez ExpressJS et ws : Tapez npm install express ws. ws est le module pour les WebSockets.

Étape 2 : Créer une Application avec WebSockets

Construisons une application où les utilisateurs peuvent envoyer des messages via WebSockets, et le serveur les renvoie à tout le monde.

Exemple de Code : Serveur avec WebSockets

Créez un fichier nommé app.js dans votre dossier "websockets-express" et ajoutez ce code :

📋 Copier le code

var express = require('express');
var { Server } = require('ws');
var app = express();

// Serveur HTTP Express
var server = app.listen(3000, function() {
    console.log('Serveur démarré sur http://localhost:3000');
});

// Ajouter les WebSockets
var wss = new Server({ server });

// Quand un client se connecte
wss.on('connection', function(ws) {
    console.log('Nouveau client connecté !');
    
    // Quand on reçoit un message
    ws.on('message', function(message) {
        console.log('Message reçu : ' + message);
        // Envoyer le message à tous les clients
        wss.clients.forEach(function(client) {
            client.send('Quelqu’un a dit : ' + message);
        });
    });

    // Quand un client se déconnecte
    ws.on('close', function() {
        console.log('Client déconnecté.');
    });
});

// Route pour servir une page simple
app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});

Créer une Page Client

Créez un fichier nommé index.html dans "websockets-express" avec ce code :

📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Chat WebSocket</title>
</head>
<body>
    <h1>Chat en Temps Réel</h1>
    <input id="message" type="text" placeholder="Tapez un message">
    <button onclick="sendMessage()">Envoyer</button>
    <ul id="messages"></ul>

    <script>
        var ws = new WebSocket('ws://localhost:3000');
        
        ws.onmessage = function(event) {
            var li = document.createElement('li');
            li.textContent = event.data;
            document.getElementById('messages').appendChild(li);
        };

        function sendMessage() {
            var input = document.getElementById('message');
            ws.send(input.value);
            input.value = '';
        }
    </script>
</body>
</html>

Explication Détaillée du Code

Voici chaque partie expliquée très simplement :

var { Server } = require('ws'); : On importe le module WebSocket.
var server = app.listen(...); : On crée un serveur HTTP avec Express.
var wss = new Server({ server }); : On attache les WebSockets au même serveur.
wss.on('connection', ...); : Quand quelqu’un se connecte :
- ws.on('message', ...) : Reçoit un message et le renvoie à tous.
- wss.clients.forEach(...) : Boucle sur tous les clients connectés.
index.html :
- var ws = new WebSocket(...) : Ouvre une connexion WebSocket.
- ws.onmessage : Affiche les messages reçus.
- ws.send(...) : Envoie un message au serveur.

Étape 3 : Tester l’Application

Démarrez le serveur avec node app.js dans le terminal, puis testez :

Ouvrez http://localhost:3000 dans deux onglets de navigateur (ou deux navigateurs différents).
Tapez un message dans un onglet (ex. : "Salut !") et cliquez sur "Envoyer".
Dans les deux onglets, vous verrez "Quelqu’un a dit : Salut !" apparaître instantanément.

Regardez le terminal : vous verrez "Nouveau client connecté !" et les messages reçus.

Conclusion

Félicitations ! Vous savez maintenant utiliser les WebSockets avec ExpressJS grâce à ws. Votre application peut communiquer en temps réel, comme un chat. Pour aller plus loin, explorez notre prochain tutoriel sur Envoi d’Emails avec ExpressJS ou consultez la documentation ws.

Cours precedent

Sommaire

Cours suivant