Node.js – Erstellen einer einfachen Server-Client Anwendung mit Node.js
4. Erweiterter Server mit HTTP Server Framework connect
Jetzt wollen wir den Server dahingehend erweitern, dass er den Webseiten-Content der Client-Anwendung ausliefert. Dazu bedienen wir uns des Modules connect, welches noch einmal Arbeit beim Einrichten des Servers abnimmt.
npm install connect
Um statische Dateien (HTML, JS, CSS) auszuliefern, benötigen wir ab connect 3.x noch das Modul serve-static.
npm install serve-static
Unser Code in der server.js sieht nun folgendermaßen aus:
var connect = require('connect');
var serveStatic = require('serve-static');
var app = connect();
app.use(serveStatic("./client"));
app.listen(8085);
console.log("Server started and listen to http://127.0.0.1:8085");
Jetzt können wir in unsere index.html ein wenig HTML reinschreiben.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test App</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div class="jumbotron"> <h1>Ich bin der Client</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> </div> </body> </html>
Wenn wir jetzt den Server neu starten und im Browser http:/localhost:8085/ aufrufen, wird die HTML-Seite angezeigt.
Ok, ok. Das hätten wir mit PHP und einem Apache Webserver auch noch hinbekommen. Aber nicht so elegant.
Und jetzt wollen wir mal etwas Dynamik ins Spiel bringen, mit der WebSocket-Technologie.
5. Socket.io
Socket.io ist ein Modul für Node.js, mit dem Echtzeit-Kommunikation zwischen Server und Client realisiert werden kann. Das Modul besteht aus einer serverseitigen Bibliothek für Node.js und einer clientseitgen JavaScript-Bibliothek. Die Kommunikation zwischen Server und Client, d.h. dem Webbrowser, erfolgt über eine WebSocket-Verbindung. Falls der Browser das Protokoll nicht unterstützt wird, werden Alternativen als Fallback verwendet.
Eine schöne Erklärung ist unter http://nodecode.de/socket-io zu finden.
Die Installation führen wir wieder mittels NPM durch.
npm install socket.io
Im Server (server.js) können wir jetzt Socket.io verwenden, in dem wir die Bibliothek mit require einbinden. Dabei übergeben wir den bereits zuvor initialisierten HTTP-Server.
var io = require('socket.io')(server);
io.on('connection', function (socket) {
console.log('client connected.');
}
Die io.on Funktion gibt nun eine Meldung auf der Konsole aus, wenn sich ein Client verbunden hat und das connection-Event ausgelöst hat.
Im Client binden wir die clientseitige Bibliothek ein. Dazu schreiben wir folgenden Code in den Headerbereich der index.html.
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect();
</script>
<script src="/socket.io/socket.io.js"></script>
Über die Methode io.connect() löst der Client das connection-Event aus und unser Server weiß Bescheid.
Jetzt ist es Zeit für ein kleines Anwendungsbeispiel.
Sie sehen gerade einen Platzhalterinhalt von X. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
Danke. Ist ja echt easy und hat mir gut weitergeholfen 🙂
Gute Anleitung, nur fehlt irgendwie der für die socket.io.js oder wird diese nicht benötigt?
Muss angular nicht vorher erstmal installieren und zum Projekt hinzufügen bevor man es benutzt? Ich bekomme nämlich keine Ping Zahlen angezeigt, nur {{pingMessage}}.