Sommaire
Comment intégrer des WebSockets dans une application Express
Les WebSockets sont une technologie essentielle pour créer des applications web en temps réel, permettant une communication bidirectionnelle entre le client et le serveur. Dans cet article, nous allons explorer comment intégrer des WebSockets dans une application Express, un framework Node.js populaire.
Qu’est-ce que WebSocket ?
WebSocket est un protocole de communication qui permet d’établir une connexion persistante entre le client et le serveur. Contrairement aux requêtes HTTP traditionnelles, qui sont unidirectionnelles et nécessitent une nouvelle connexion pour chaque interaction, WebSocket permet d’envoyer et de recevoir des données en temps réel sans avoir à rétablir la connexion. Cela en fait un choix idéal pour des applications comme les chats en ligne, les jeux multijoueurs ou les tableaux de bord en temps réel.
Pré-requis
Avant de commencer, assurez-vous d’avoir Node.js et npm installés sur votre machine. Vous aurez également besoin d’une application Express de base.
. Si vous n’en avez pas encore, vous pouvez en créer une rapidement :
mkdir websocket-app
cd websocket-app
npm init -y
npm install expressInstallation de Socket.IO
Pour intégrer WebSockets dans votre application Express, nous allons utiliser la bibliothèque Socket.IO, qui simplifie la gestion des WebSockets. Installez Socket.IO avec la commande suivante :
npm install socket.ioConfiguration de l’application Express
Voici comment configurer votre application Express pour utiliser Socket.IO :
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('Un utilisateur est connecté');
socket.on('message', (msg) => {
console.log('Message reçu : ' + msg);
io.emit('message', msg);
});
socket.on('disconnect', () => {
console.log('Un utilisateur s'est déconnecté');
});
});
server.listen(3000, () => {
console.log('Écoute sur le port 3000');
});Création de l’interface utilisateur
Pour tester notre application, créons un fichier HTML simple nommé index.html :
<!DOCTYPE html>
<html>
<head>
<title>WebSocket avec Express</title>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
function sendMessage() {
const msg = document.getElementById('message').value;
socket.emit('message', msg);
document.getElementById('message').value = '';
}
socket.on('message', (msg) => {
const item = document.createElement('li');
item.textContent = msg;
document.getElementById('messages').appendChild(item);
});
</script>
</head>
<body>
<ul id="messages"></ul>
<input id="message" autocomplete="off"><button onclick="sendMessage()">Envoyer</button>
</body>
</html>Tester l’application
Démarrez votre serveur avec la commande node app.js et ouvrez votre navigateur à l’adresse http://localhost:3000. Ouvrez plusieurs onglets pour voir la communication en temps réel entre les clients.
Conclusion
Intégrer des WebSockets dans une application Express est un excellent moyen d’améliorer l’interactivité de votre application. Grâce à Socket.IO, la mise en place est simple et rapide. Vous pouvez maintenant explorer d’autres fonctionnalités de Socket.IO, comme les rooms ou les namespaces, pour enrichir encore plus votre application.
