Nachdem ich nun schon hier etwas über Node.js geschrieben habe und hier eine kleine Chroot mit fertigen Node.js drin angeboten habe, möchte ich nun etwas tiefer gehend einen der Beipsiele durchleuchten, für die Node.js extrem nützlich ist – Ein Websocket-Server! 🙂

Was ist ein Websocket-Server überhaupt?
Websockets sind ständige verbindungen von Client zu Server, welche auf das HTTP Protokoll aufbauen.
Damit ist es z.B. Möglich Echtzeit-Benachrichtigungen wie man es von diversen Push-Notification Services gewohnt ist bereit zu stellen.
Und genau dies wollen wir hier Exemplarisch einmal tun.

Warum aber gerade in JavaScript mit Node.js?
Erst einmal wird JavaScript-Code durch Node.js in maschinencode übersetzt, was zur Laufzeit einen erheblichen Unterschied im gegensatz zu allen Scriptsprachen macht – und zweitens würdest du diesen Artikel hier gar nicht lesen, wenn genau DIESES Thema dich nicht interessieren würde 😉

Was ist nun also das Ziel des ersten Teils?
Ziel ist es erst einmal einen minimalistischen Server zu bauen, der die Nachrichten vom Angemeldeten Client entgegen nimmt und wieder dort hin zurück sendet – und analog dazu einen Client, welcher sich am Server anmeldet und die Nachricht sendet.

OK! Hört sich fantastisch an! Womit fangen wir nun also an?
Ich denke wir fangen mit dem Server an.

Dieser Soll auf Port 8000 lauschen, dort verbindungen von CLients annehmen und die Nachrichten der Clients wieder an diese zurück senden.
Ich mache es an dieser Stelle mal einfach und poste den gesamten Server-Code an dieser stelle hier rein:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//===============================================
// Websocket Server 0.1
//===============================================
 
// Websocket-Server
var WebSocketServer = require('ws').Server
var wss = new WebSocketServer({host: '192.168.50.63',port: 8000});
 
wss.on('connection', function(ws) 
{
	console.log('client verbunden...');
 
	ws.on('message', function(message) 
	{
		console.log('von Client empfangen: ' + message);
		ws.send('von Server empfangen: ' + message);
    });
 
});

So einfach ist es mit Node.js einen kleinen Websocket-Server zu erstellen 😉
Hier einmal Kurz der Programmablauf erklärt:
In zeile 6 wird ein Objekt „Server“ aus dem Modul „ws“ instanziiert.
Solltet ihr meine NodeChroot nicht verwenden, könnt ihr dieses Modul mit „npm install ws“ nach installieren.
Nähere Infos zum Modul „ws“ gibt es unter http://einaros.github.com/ws/.
In Zeile 7 wird das WebsocketServer Objekt an die IP (192.168.50.63) und den Port (8000) gebunden.
Alles was nun innerhalb des Websocket-Servers passieren soll, muss im Connection-Block (zwischen zeile 11 und 17) passieren.
Darin ist eine allgemeine Ausgabe auf der Console hilfreich, die angibt das sich überhaupt schon mal ein Client angemeldet hat, wie in zeile 11 getan wurde.
Von Zeile 13 bis 17 wird definiert was im „Message-Event“ passieren soll.
Der Message-Event tritt ein, sobald der Server vom Client eine Nachricht empfängt – Innerhalb des Events ist die Nachricht welche vom CLient gesendet wurde in der Variable „message“ auszulesen.
Auch hier gilt wie nach dem Connect erst einmal die Nachricht auf der Console ausgeben, was in diesem Beispiel in Zeile 15 auch erfolgt ist.
Da wir die Nachricht welche vom Client kommt wieder zum Client zurück senden wollen, tun wir dies mit der methode „ws.send()“ wie hier in Zeile 16 zu sehen ist.

Das war es auch schon zum Server-Teil – viel mehr gibt es nicht zu sagen. 🙂
Wenn man dieses Script nun mit Node aufruft, erreicht man mit dem Browser unter der angegebenen IP und dem Port (Bei mir wäre dies http://192.168.50.63:8000) eine Seite mit dem Inhalt „Not implemented“. Dies ist hier an dieser Stelle beabsichtigt und gibt nur an, das der Server zwar HTTP Anfragen bearbeiten kann, aber nicht dafür gedacht ist Webseiten auszuliefern.

Nun Brauchen wie also einen Client.
Um Alles nicht weiter zu verkomplizieren, bauen wir den Client auch in HTML+Javascript.
HTML5 bringt glücklicherweise schon einen Websockt-Client mit, welchen wir hier nutzen können.
Der Client ist etwas mehr Code – dafür aber besser Dokumentiert:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() 
{
	function connect()
	{
		// Websocket
		var socket = new WebSocket("ws://192.168.50.63:8000");
 
		// Nach dem öffnen des Sockets den Status anzeigen
		socket.onopen 	= function() 	{ message('Socket Status: '+socket.readyState+' (open)');	}
		// Nach dem empfangen einer Nachricht soll diese angezeigt werden
		socket.onmessage= function(msg)	{ message('Empfangen: '+msg.data);							}			
 
		// SENDEN
		function send()
		{
			var text = $('#text').val();	// Text aus textbox in Variable schreiben 
			socket.send(text);		// Den Text aus der Variable an den Socket senden
			message('Gesendet : '+text)	// Anzeigen was gesendet wurde
			$('#text').val("");		// Text-Inhalt der Textbox löschen
		}
 
		// Funktion welche die Nchrichten an das Log anfügt
		function message(msg)
		{
			$('#Log').append(msg+'</br>');
		}
 
		// Enter taste auf der TextBox zum senden behandeln
		$('#text').keypress(function(event) 
		{
			if (event.keyCode == '13') 
			{
				send();
			}
		});	
	}
 
	connect();
 
});
</script>
</head>
<body>
  	<div id="container">
    	<h3>WebSocket Client 0.1</h3>
		<div id="Log"></div>
    	Eingabe: <input id="text" type="text" />
	</div>
</body>
</html>

Eine kleine Anmerkung: Das JQuery benutze ich an dieser Stelle nur um Komfortabler auf die Elemente innerhalb der HTML Seite zugreifen zu können.

Wie Oben schon erwähnt ist der Code der HTML Seite größtenteils selbsterklärend und dokumentiert.
Hat man nun den Server gestartet und ruft die HTML Seite auf (im Idealfall NICHT im Internet Explorer, da dieser noch keine Websockets kann), dann passiert folgendes:
– Der Client verbindet sich zum Server
– Der Client zeigt „Socket Status: 1 (open)“ an
– Der Server gibt die Meldung „client verbunden…“ aus.

Tippt man nun in das Eingabefeld etwas ein (z.B. „testnachricht“) und bestätigt dies mit ENTER, passiert folgendes:
– Der Client sendet die Nachricht zum Server, es erscheint „Gesendet : testnachricht“ im Log.
– Die Nachricht kommt beim Server an, in der Konsole des Servers steht „von Client empfangen: testnachricht“.
– Der Server nimmt die Nachricht entgegen und sendet sie mit „ws.send()“ wieder an den Client zurück.
– Im Client steht nun die Ausgabe „Empfangen: von Server empfangen: testnachricht“.

Das selbe könnte man nun mit mehreren Clients machen in dem man einfach die HTML Seite belibig oft im Browser öffnet.
Für jeden Client wird eine eigene verbindung zum Server geöffnet in der sich erst einmal nur Client und Server der Verbindung sehen.
Damit sieht jeder Client nur das, was auch wirklich er zum Server gesendet hat.

So… Das war der erste Teil zum Thema Websockets mit Node.js 🙂
Ich hoffe ihr finder das Thema mindestens genauso spannend wie ich und freut euch schon auf die nächsten Teile in denen ich Client und Server Stück für Stück weiter ausbauen werde.