Cet article propose un tutoriel approfondi pour créer une application en temps réel avec Node.js, incluant des étapes techniques actualisées que les développeurs peuvent suivre pour concevoir un système de vote dont les résultats sont mis à jour instantanément sur tous les clients.
Node.js est un environnement d’exécution JavaScript open-source et multiplateforme. Cette technologie permet d’exécuter du code JavaScript côté serveur. Par conséquent, elle ouvre la voie à la création d’applications web dynamiques et en temps réel. Node.js a été publié pour la première fois en 2009 par Ryan Dahl et est désormais géré par l’OpenJS Foundation. Dans ce tutoriel, vous apprendrez à créer une application en temps réel avec Node.js pour un système de vote simple.
Principes de Base d’une Application en Temps Réel avec Node.js
La technologie centrale utilisée est Socket.IO. Socket.IO facilite une communication bidirectionnelle et événementielle entre le serveur et les clients. Ainsi, toute modification des données sur le serveur peut être instantanément envoyée à tous les clients connectés. Ce concept est idéal pour des fonctionnalités telles que les votes en direct, les chats ou les tableaux de bord de monitoring.
Étapes pour Créer une Application de Vote en Temps Réel
- Installer Node.js
Assurez-vous d’avoir installé la dernière version LTS de Node.js. Vous pouvez la télécharger depuis le site officiel de Node.js. Le processus d’installation est simple et disponible pour divers systèmes d’exploitation. - Initialiser le Projet
Créez un nouveau dossier pour le projet et initialisez le fichierpackage.jsonvia le terminal. Cependant, vous pouvez également le créer manuellement comme dans l’exemple suivant.
{
"name": "application-vote-temps-reel",
"version": "1.0.0",
"description": "Application de vote en temps réel avec Node.js et Socket.IO",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"express": "^4.18.2",
"socket.io": "^4.7.2"
}
}Ensuite, exécutez la commande npm install dans le terminal pour télécharger les dépendances. Ce processus créera le dossier node_modules.
npm install.- Créer le Serveur avec Express et Socket.IO
Créez un fichier nomméserver.js. Le code qu’il contient configurera le serveur HTTP, servira la page HTML et gérera les connexions en temps réel.
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = new Server(server);
// Données de vote stockées dans un objet
let voteData = {
candidatA: 0,
candidatB: 0
};
// Servir le fichier index.html
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// Gérer les connexions Socket.IO
io.on('connection', (socket) => {
console.log('Un utilisateur est connecté');
// Envoyer les dernières données de vote au nouveau client
socket.emit('mettreAJourVote', voteData);
// Gérer les événements de vote des clients
socket.on('soumettreVote', (candidat) => {
if (voteData.hasOwnProperty(candidat)) {
voteData[candidat]++;
// Diffuser la mise à jour à TOUS les clients connectés
io.emit('mettreAJourVote', voteData);
}
});
});
// Exécuter le serveur sur le port 3000
server.listen(3000, () => {
console.log('Serveur en cours d\'exécution sur http://localhost:3000');
});- Créer l’Interface Client (HTML)
Créez le fichierindex.html. Cette interface affichera les résultats du vote et des boutons pour voter.
<!DOCTYPE html>
<html>
<head>
<title>Application de Vote en Temps Réel</title>
<script src="/socket.io/socket.io.js"></script>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; text-align: center; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
th, td { border: 1px solid #ddd; padding: 12px; }
th { background-color: #f4f4f4; }
button { padding: 10px 20px; background-color: #007cba; color: white; border: none; cursor: pointer; }
button:hover { background-color: #005a87; }
</style>
</head>
<body>
<h1>Élection en Temps Réel pour Président</h1>
<table>
<tr><th>Candidat</th><th>Nombre de Voix</th></tr>
<tr><td>Candidat A</td><td id="compteurA">0</td></tr>
<tr><td>Candidat B</td><td id="compteurB">0</td></tr>
</table>
<div>
<button onclick="voter('candidatA')">Voter pour le Candidat A</button>
<button onclick="voter('candidatB')">Voter pour le Candidat B</button>
</div>
<script>
const socket = io();
socket.on('mettreAJourVote', function(data) {
document.getElementById('compteurA').textContent = data.candidatA;
document.getElementById('compteurB').textContent = data.candidatB;
});
function voter(candidat) {
socket.emit('soumettreVote', candidat);
}
</script>
</body>
</html>Tester et Exécuter l’Application en Temps Réel
- Exécutez le serveur avec la commande
node server.jsdans le terminal. - Ouvrez un navigateur et accédez à
http://localhost:3000. - Ouvrez la même URL dans un autre onglet du navigateur ou sur un appareil différent.
- Essayez de voter sur un client. Instantanément, vous verrez les résultats se mettre à jour sur tous les clients ouverts. Ce processus démontre que l’application en temps réel avec Node.js fonctionne correctement.
Conclusion
En tirant parti de Node.js et de Socket.IO, vous avez construit avec succès un système fonctionnel en temps réel. Cette architecture peut être étendue à diverses fins telles que la surveillance de données, la collaboration sur documents ou les notifications en direct. Le code utilisé dans ce tutoriel est modulaire. Par conséquent, vous pouvez facilement l’adapter pour une plus grande échelle et complexité.
