Besuche unseren Sponsor
Bad Dream - Entertainment & Service

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.

2 Comments

Add a Comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.