Dieser Artikel bietet ein umfassendes Tutorial zum Erstellen einer Echtzeit-Anwendung mit Node.js, mit aktuellen technischen Schritten, die Entwickler befolgen können, um ein Wahlsystem mit Ergebnissen zu erstellen, die live auf allen Clients aktualisiert werden.
Node.js ist eine Open-Source– und plattformübergreifende JavaScript-Laufzeitumgebung. Diese Technologie ermöglicht die Ausführung von JavaScript-Code auf der Serverseite. Dadurch eröffnet sie Möglichkeiten zum Erstellen dynamischer Webanwendungen in Echtzeit. Node.js wurde erstmals 2009 von Ryan Dahl veröffentlicht und wird heute von der OpenJS Foundation verwaltet. In diesem Tutorial lernen Sie, wie Sie eine Echtzeit-Anwendung mit Node.js für ein einfaches Wahlsystem erstellen.
Grundprinzipien einer Echtzeit-Anwendung mit Node.js
Die Kerntechnologie ist Socket.IO. Socket.IO ermöglicht vollduplex und ereignisgesteuerte Kommunikation zwischen Server und Clients. Daher können alle Datenänderungen auf dem Server sofort an alle verbundenen Clients gesendet werden. Dieses Konzept ist ideal für Funktionen wie Live-Abstimmungen, Chats oder Monitoring-Dashboards.
Schritte zum Erstellen einer Echtzeit-Wahlanwendung
- Node.js installieren
Stellen Sie sicher, dass Sie die neueste Node.js LTS-Version installiert haben. Sie können sie von der offiziellen Node.js-Website herunterladen. Der Installationsprozess ist einfach und für verschiedene Betriebssysteme verfügbar. - Projekt initialisieren
Erstellen Sie einen neuen Projektordner und initialisieren Sie diepackage.json-Datei über das Terminal. Sie können sie jedoch auch manuell wie im folgenden Beispiel erstellen.
{
"name": "echtzeit-wahl-anwendung",
"version": "1.0.0",
"description": "Echtzeit-Wahlanwendung mit Node.js und Socket.IO",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"express": "^4.18.2",
"socket.io": "^4.7.2"
}
}Führen Sie dann den Befehl npm install im Terminal aus, um die Abhängigkeiten herunterzuladen. Dieser Prozess erstellt den Ordner node_modules.
npm install.- Server mit Express und Socket.IO erstellen
Erstellen Sie eine Datei namensserver.js. Der Code darin konfiguriert den HTTP-Server, stellt die HTML-Seite bereit und verwaltet Echtzeit-Verbindungen.
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);
// Wahldaten in einem Objekt speichern
let voteData = {
kandidatA: 0,
kandidatB: 0
};
// index.html Datei bereitstellen
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// Socket.IO-Verbindungen verwalten
io.on('connection', (socket) => {
console.log('Ein Benutzer ist verbunden');
// Aktuelle Wahldaten an neuen Client senden
socket.emit('updateWahl', voteData);
// Wahl-Ereignisse von Clients verarbeiten
socket.on('submitWahl', (kandidat) => {
if (voteData.hasOwnProperty(kandidat)) {
voteData[kandidat]++;
// Update an ALLE verbundenen Clients senden
io.emit('updateWahl', voteData);
}
});
});
// Server auf Port 3000 starten
server.listen(3000, () => {
console.log('Server läuft auf http://localhost:3000');
});- Client-Oberfläche (HTML) erstellen
Erstellen Sie dieindex.html-Datei. Diese Oberfläche zeigt die Wahlergebnisse an und bietet Buttons zur Stimmabgabe.
<!DOCTYPE html>
<html>
<head>
<title>Echtzeit-Wahlanwendung</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>Echtzeit-Wahl zum Vorsitzenden</h1>
<table>
<tr><th>Kandidat</th><th>Stimmenzahl</th></tr>
<tr><td>Kandidat A</td><td id="zaehlerA">0</td></tr>
<tr><td>Kandidat B</td><td id="zaehlerB">0</td></tr>
</table>
<div>
<button onclick="waehlen('kandidatA')">Für Kandidat A stimmen</button>
<button onclick="waehlen('kandidatB')">Für Kandidat B stimmen</button>
</div>
<script>
const socket = io();
socket.on('updateWahl', function(data) {
document.getElementById('zaehlerA').textContent = data.kandidatA;
document.getElementById('zaehlerB').textContent = data.kandidatB;
});
function waehlen(kandidat) {
socket.emit('submitWahl', kandidat);
}
</script>
</body>
</html>Testen und Ausführen der Echtzeit-Anwendung
- Starten Sie den Server mit dem Befehl
node server.jsim Terminal. - Öffnen Sie einen Browser und rufen Sie
http://localhost:3000auf. - Öffnen Sie die gleiche URL in einem anderen Browser-Tab oder auf einem anderen Gerät.
- Versuchen Sie, auf einem Client abzustimmen. Sofort sehen Sie, wie sich die Ergebnisse auf allen geöffneten Clients aktualisieren. Dieser Prozess zeigt, dass die Echtzeit-Anwendung mit Node.js korrekt funktioniert.
Fazit
Durch die Nutzung von Node.js und Socket.IO haben Sie erfolgreich ein funktionales Echtzeit-System erstellt. Diese Architektur kann für verschiedene Zwecke erweitert werden, wie Datenmonitoring, Dokumentenkollaboration oder Live-Benachrichtigungen. Der Code in diesem Tutorial ist modular. Daher können Sie ihn leicht für größere Umfänge und Komplexität anpassen.
