Tutorial: Einfacher Chat mit Node.js und WebSocket

nodejs-chatIn diesem Node.js-Tutorial entwickle ich eine einfache Webanwendung, in der die Benutzer chatten können. Zum Einsatz kommen dabei Node.js, Soket.IO und jQuery. Als Ergebnis sollen die Benutzer einen Namen wählen, Nachrichten eingeben und absenden, und der Server soll diese mittels einer WebSocket-Verbindung an alle (anderen) Nutzer verteilen können.

Ich werde in folgendem die komplette Anwendung entwickeln, also sowohl den Server als auch den Client, der wiederum aus HTML, JavaScript und CSS besteht. Es geht hierbei in erster Linie um das Verständnis der Funktionsweise und des Entwicklungsprozesses, die Anwendung wird deswegen bewusst einfach und überschaubar gehalten.

Den Quellcode des ganzem veröffentliche ich als Open-Source-Projekt auf Github.

Vorbereitung #

Als erstes erstelle ich die package.json-Datei. in dieser befinden sich Informationen zur Anwendung wie z.B. der Name, sowie die benötigten Node.js-Module. Für diese Anwendung brauche ich genau zwei zusätzliche Module: Express und Socket.io. Die fertige package.json sieht wie folgt aus:

{
	"name": "Node.js-Chat",
	"description": "Ein einfacher Chat mit Node.js",
	"author": "NodeCode.de",
	"dependencies" : {
		"express": "3.x",
		"socket.io": "*"
	}
}

Danach lade ich mir die clientseitige JavaScript-Bibliothek jQuery herunter. Da ich möglichst viele Browser unterstützen möchte, wähle ich die Version 1.x, da diese im Gegensatz zu der 2.x auch den Internet Explorer 6, 7 und 8 unterstützt. Socket.io bietet übrigens Fallback-Alternativen zu WebSocket an, sodass der Internet Explorer ab Version 5.5+ von Socket.io unterstützt wird.

Zudem erstelle ich mir schonmal alle weiteren Dateien, die ich benötigen werden. Alle öffentlichen Daten, die der Webserver zukünftig ausgeben wird, landen im Ordner public. Eine Übersicht aller (wichtigen) Dateien:

  • package.json – Infos zum Projekt wie der Name und die vom Server benötigten Module
  • server.js – unser Node.js-Server
  • config.json – die Konfiguration für den Server
  • public/ – der Ordner für die öffentlichen Dateien
  • public/index.html – unsere HTML-Datei
  • public/style.css – unsere Stylesheet-Datei
  • public/client.js – unsere clientseitige JavaScript-Datei
  • public/jquery.min.js – die minifizierte jQuery-Bibliothek

Server #

Der Node.js-Server besteht aus genau zwei Dateien: server.js und config.json. Während server.js der eigentliche Server ist, enthält die config.json die Konfiguration des Servers. Da ich die Anwendung möglichst einfach halte, wird nur der Port mit der config.json konfiguriert. Ich fülle sie deswegen gleich als erstes mit dem Inhalt:

{
	"port": 8080
}

Weiter geht es mit dem eigentlichem Server. Hierbei lade ich in den ersten 5 Zeilen die benötigten Module sowie die soeben erstellte config.json in die Anwendung.

var express = require('express')
,   app = express()
,   server = require('http').createServer(app)
,   io = require('socket.io').listen(server)
,   conf = require('./config.json');

Dann binde ich den Webserver an die sich in der Konfigurationsdatei befindende Portnummer:

server.listen(conf.port);

Als nächstes weise ich Express dazu an, Dateien die sich im Ordner public befinden, bei Anfrage an den Besucher auszugeben:

app.configure(function(){
	// statische Dateien ausliefern
	app.use(express.static(__dirname + '/public'));
});

Und wenn der Pfad / aufgerufen wird, soll die Datei index.html ausgegeben werden:

// wenn der Pfad / aufgerufen wird
app.get('/', function (req, res) {
	// so wird die Datei index.html ausgegeben
	res.sendfile(__dirname + '/public/index.html');
});

Websocket #

Danach kommen wir zum eigentlichem Teil des Servers, nämlich der WebSocket-, oder besser gesagt Socket.io-Verbindung. Sobald sich ein Client verbindet, wird die Nachricht Du bist nun mit dem Server verbunden! gesendet. Der Client wird zukünftig ein Objekt mit den Attributen zeit, text und – sofern es sich nicht um die Verbindungs-Meldung handelt – name erwarten.

Außerdem muss dafür gesorgt werden, dass sobald ein Benutzer etwas sendet, dies über den Server an alle Benutzer verteilt wird. Zuletzt beschriebenes geschieht im folgenden ab Zeile 5:

io.sockets.on('connection', function (socket) {
	// der Client ist verbunden
	socket.emit('chat', { zeit: new Date(), text: 'Du bist nun mit dem Server verbunden!' });
	// wenn ein Benutzer einen Text senden
	socket.on('chat', function (data) {
		// so wird dieser Text an alle anderen Benutzer gesendet
		io.sockets.emit('chat', { zeit: new Date(), name: data.name || 'Anonym', text: data.text });
	});
});

In Zeile 5 warten wir mit der Funktion socket.on() auf eine eingehende Websocket-Nachricht, die den Namen chat hat, und binden diese an eine Rückruf-Funktion. Die empfangenen Daten werden dabei in der Variable data gespeichert. Über die Funktion io.sockets.emit() verteilen wir anschließend den aktuellen Zeitstempel, den empfangenen Namen und den empfangenen Text an alle Benutzer, wobei als Name Anonym verwendet wird, wenn kein Name angegeben wurde.

Im Grunde funktioniert der Server ziemlich einfach, denn die Hauptarbeit wird im Client erledigt. Hier noch einmal die gesamten 34 Zeilen der Datei server.js:

var express = require('express')
,   app = express()
,   server = require('http').createServer(app)
,   io = require('socket.io').listen(server)
,   conf = require('./config.json');

// Webserver
// auf den Port x schalten
server.listen(conf.port);

app.configure(function(){
	// statische Dateien ausliefern
	app.use(express.static(__dirname + '/public'));
});

// wenn der Pfad / aufgerufen wird
app.get('/', function (req, res) {
	// so wird die Datei index.html ausgegeben
	res.sendfile(__dirname + '/public/index.html');
});

// Websocket
io.sockets.on('connection', function (socket) {
	// der Client ist verbunden
	socket.emit('chat', { zeit: new Date(), text: 'Du bist nun mit dem Server verbunden!' });
	// wenn ein Benutzer einen Text senden
	socket.on('chat', function (data) {
		// so wird dieser Text an alle anderen Benutzer gesendet
		io.sockets.emit('chat', { zeit: new Date(), name: data.name || 'Anonym', text: data.text });
	});
});

// Portnummer in die Konsole schreiben
console.log('Der Server läuft nun unter http://127.0.0.1:' + conf.port + '/');

Client #

Nun beginne ich also mit dem Client. Hier haben wir gleich drei Dateien, die wir füllen müssen: die index.html, style.css und client.js.

HTML5 #

Das Grundgerüst der Webanwendung wird in HTML geschrieben. Im folgenden verwende ich die neuste Version – HTML5, zu erkennen an dem kurzen <!DOCTYPE html> und den semantischen HTML-Tags <header> und <footer>.

Viel gibt es zur index.html nicht zu sagen, denn es werden im Grunde nur die Eingabefelder, der Senden-Button und die restlichen Elemente erstellt, sowie die style.css und alle JavaScript-Dateien angefordert. Die gesamte index.html sieht wie folgt aus:

<!DOCTYPE html>
<html>
    <head>
        <title>Node.js Chat</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" />
        <script src="socket.io/socket.io.js"></script>
        <script src="jquery.min.js"></script>
        <script src="client.js"></script>
    </head>
    <body>
        <header>Node.js Chat <a href="http://nodecode.de/">von NodeCode</a></header>
        <ul id="content"></ul>
        <footer>
            <input id="name" type="text" placeholder="dein Name" />
            <input id="text" type="text" placeholder="schreibe etwas..." />
            <input id="senden" type="submit" value="senden" />
        </footer>
    </body>
</html>

Design (CSS) #

Weiter geht es mit dem Design, der style.css. Hierzu gibt es noch weniger zu sagen, da man Design schlecht in Worte fassen kann. Die Elemente <header> und <footer> bekommen eine grüne Hintergrundfarbe, und alles wird an die richtigen Pixel gerückt.

Die Eingabe-Felder und der Absenden-Button werden (bis in der Größe) im standard-Style des Browsers gelassen, da es sich hierbei um eine Demonstration eines Node.js-Chats handelt, und nicht um einen Design-Wettbewerb. 😀nodejs-chat

Hier noch einmal ein Screenshot der fertigen Anwendung – rechts als Bild, und unten der komplette Inhalt der style.css:

body{
	margin: 0;
	padding: 0;
	font: 16px "Helvetica neue", Helvetica, Arial, sans-serif;
	color: #333;
}
header, footer{
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: auto;
	padding: 0 0.5em;
	background-color: #8BC84B;
	font-size: 24px;
	line-height: 2em;
	height: 2em;
	color: #fff;
}
header{
	font-weight: bold;
}
header > a:last-child{
	float: right;
	color: #fff;
	font-weight: normal;
}
footer{
	top: auto;
	bottom: 0;
}
input{
	height: 1.5em;
	font-size: 14px;
}
#content{
	margin: 48px 0.5em;
	list-style: none;
}

JavaScript #

Kommen wir nun zum entscheidenden Teil der Anwendung, dem JavaScript. Das Script soll erst dann ausgeführt werden, soll die Website komplett geladen ist. Daher füge ich als erstes eine Rückruf-Funktion

$(document).ready(function(){

});

ein, welche den nachfolgenden Script umschließt und dann ausgeführt wird, sobald die Website zu Ende geladen hat.

Jetzt müssen wir zunächst eine Verbindung zum WebSocket-Server herstellen, dies geschieht mit:

var socket = io.connect();

Sobald der Client eine Nachricht vom Server erhält, muss diese ausgegeben werden. In diesem Fall wird ein neues Element der Liste #content hinzugefügt. Mehr gibt es dazu nicht zu sagen, außer dass zum Schluss noch nach unten gescrollt wird, sofern dies erforderlich ist.

socket.on('chat', function (data) {
    var zeit = new Date(data.zeit);
    $('#content').append(
        $('<li></li>').append(
            // Uhrzeit
            $('<span>').text('[' +
                (zeit.getHours() < 10 ? '0' + zeit.getHours() : zeit.getHours())
                + ':' +
                (zeit.getMinutes() < 10 ? '0' + zeit.getMinutes() : zeit.getMinutes())
                + '] '
            ),
            // Name
            $('<b>').text(typeof(data.name) != 'undefined' ? data.name + ': ' : ''),
            // Text
            $('<span>').text(data.text))
    );
    // nach unten scrollen
    $('body').scrollTop($('body')[0].scrollHeight);
});

Da wir Nachrichten nicht nur empfangen sondern auch senden wollen, definiere ich als nächstes eine Funktion senden(). Diese ließt die Werte der Felder #name und #text aus, und sendet sie anschließen an den Server. Abschließend wird der Inhalt des Feldes #text wieder geleert.

function senden(){
	// Eingabefelder auslesen
	var name = $('#name').val();
	var text = $('#text').val();
	// Socket senden
	socket.emit('chat', { name: name, text: text });
	// Text-Eingabe leeren
	$('#text').val('');
}

Die Funktion senden() soll in zwei Fällen aufgerufen werden: Entweder wenn der Button #senden geklickt wird, oder wenn die Enter-Taste innerhalb des Eingabe-Feldes gedrückt wird. Der Code dazu ist ziemlich einfach:

// bei einem Klick
$('#senden').click(senden);
// oder mit der Enter-Taste
$('#text').keypress(function (e) {
	if (e.which == 13) {
		senden();
	}
});

Und damit ist auch die client.js fertig. Hier noch einmal der vollständige Code:

$(document).ready(function(){
    // WebSocket
    var socket = io.connect();
    // neue Nachricht
    socket.on('chat', function (data) {
        var zeit = new Date(data.zeit);
        $('#content').append(
            $('<li></li>').append(
                // Uhrzeit
                $('<span>').text('[' +
                    (zeit.getHours() < 10 ? '0' + zeit.getHours() : zeit.getHours())
                    + ':' +
                    (zeit.getMinutes() < 10 ? '0' + zeit.getMinutes() : zeit.getMinutes())
                    + '] '
                ),
                // Name
                $('<b>').text(typeof(data.name) != 'undefined' ? data.name + ': ' : ''),
                // Text
                $('<span>').text(data.text))
        );
        // nach unten scrollen
        $('body').scrollTop($('body')[0].scrollHeight);
    });
    // Nachricht senden
    function senden(){
        // Eingabefelder auslesen
        var name = $('#name').val();
        var text = $('#text').val();
        // Socket senden
        socket.emit('chat', { name: name, text: text });
        // Text-Eingabe leeren
        $('#text').val('');
    }
    // bei einem Klick
    $('#senden').click(senden);
    // oder mit der Enter-Taste
    $('#text').keypress(function (e) {
        if (e.which == 13) {
            senden();
        }
    });
});

Schlusswort #

Nun ist die gesamte Chat-Anwendung fertig. Ich habe vor allem auf der Seite des Servers nur sehr wenige Zeilen Code benötigt, da die meiste Arbeit von den Modulen erledigt wird. Dies ist ein großer Vorteil der Node.js-Module, welcher vor allem bei größeren Anwendungen deutlich sichtbar ist. Man muss sich nicht immer wieder mit grundlegenden Standard-Aufgaben beschäftigen, und kann sich stattdessen gleich auf die eigentlichen Aufgaben der Anwendung konzentrieren. Wahrscheinlich sind alle hiermit geschriebenen Dateien sogar kleiner als der Text dieses Tutorials, den du momentan ließt. Die Code-Boxen logischerweise ausgenommen. 😉

Du kannst die vollständige Anwendung auf GitHub durchblättern oder dir das Projekt herunterladen. Beachte dabei, dass du nach dem herunterladen noch die nötigen Module installieren musst. Dafür musst du dich mit der Konsole einfach in das Verzeichnis der Anwendung begeben und den Befehl npm install eingeben, die benötigten Module werden dabei automatisch aus der package.json ausgelesen und installiert. Um anschließend den Server zu starten, musst du den Befehl node server.js eingeben. Danach ist die Anwendung über die Adresse http://127.0.0.1:8080/ zu erreichen. Genauere Informationen zur Konsole findest du auf der Seite Konsolen Grundlagen.

Dies war der aufwendigste und zweitintensivste Artikel den ich bisher geschrieben habe, daher interessiert es mich um so mehr ob sich dieser Aufwand geloht hat und mehr solcher Tutorials gewünscht sind. Falls du Fragen hast oder du einen Fehler gefunden hast, kannst du selbstverständlich auch dafür die Kommentar-Funktion unter diesem Artikel nutzen.

VN:F [1.9.22_1171]
Bewertung: 4.8/5 (141 Bewertungen)
Tutorial: Einfacher Chat mit Node.js und WebSocket, 4.8 out of 5 based on 141 ratings
Regelmäßige Beiträge über Node.js

nodecodeAbonniere den kostenlosen NodeCode-Newsletter, und bleibe auf dem laufenden über neue Beiträge zum Thema Node.js. Darunter:

  • Informationen und Neuigkeiten rund um Node.js und zugehörigen Modulen
  • Vorstellung von interessanten Frameworks und Bibliotheken
  • Anleitungen und Tutorials zu Node.js und weiterführenden Technologien
  • Sowie vieles mehr...

schon 73 Kommentare gehe zum kommentieren

  1. Zargor /

    Kann man dies auch mit Apache2 verbinden? Also das man nicht gleich einen eigenen Webserver starten muss .-. ?

    1. Pino /

      ja. Die Socket lib. io kannst du auch lokal verwenden, musst dann die richtige Verbindung zum Server herstellen. Express musst du dann serverseitig weglassen. Spannend wirds, wenn du deine Frontend Anwendung auf verschiedenen Servern deployst, aber alle auf den Server connecten. Meine apps liefen bisher nur lokal.

  2. zaab /

    Hallo.
    Ich habe alles nach Rezept gemacht. Jedoch werden meine texte nicht versendet. Chat-Area belibt nur leer.
    Woran kann das liegen? package.json sieht so aus:
    {
    „name“: „meinerstesChat“,
    „version“: „1.0.0“,
    „descriptiopn“: „no desc“,

    „dependencies“: {
    „express“: „*“,
    „socket.io“: „*“
    }
    }

    1. zaab /

      Ergänzung: Das Problem hat auf jeden Fall mit dem Laden von socket.io zu tun, denn der Event:
      socket.on(‚chat‘, function (data) {
      alert(„on-event am socket erhalten“);
      ….

      wird erst gar nicht geworfen.
      socket.io ist mit npm installiert, und im index.html importiere ich:

      Nodejs Chat

      Mache ich etwas falsch?

      1. zaab /

        Ups, da wurde mein code abgeschnitten.
        Die script lade ich in meinem index.html mit: src=“socket.io/socket.io.js“.

        Im Browser erhalte ich dann folgende Fehlermeldung:
        Firefox kann keine Verbindung zu dem Server unter ws://localhost:8080/socket.io/?EIO=3&transport=websocket&sid=crgZjGT_yBLnVH-_AAAA aufbauen.

        somehow frustriert…. :(

        1. NodeCode / Beitrags-Autor

          Dass dein Firefox keine Websocket-Verbindung (ws://) aufbauen kann hat erstmal nichts zu sagen, da Socket.io ja über XHR oder JSONP kommuniziert falls WebSockets in deinem Browser deaktiviert wurde oder du eine ältere Firefox-Version verwendest in der WebSockets noch nicht unterstützt wird.

          Läuft denn der Node.js-Server ununterbrochen ohne einen Fehler zurückzugeben? Und kommt zumindest eine XHR-/JSONP-Anfrage zu Socket.io erfolgreich zustande, oder schlägt diese auch fehl? Letzteres kannst du über die Netzwerkanalyse von Firefox nachverfolgen.

          1. zaab /

            Hallo. Danke, dass Du da bist! (das beruhigt :) )

            Ich kann das Problem leider nicht mehr reproduzieren. Es geht auf einmal, ohne dass ich die Ursache lokalisieren konnte. Folgende Änderungen habe ich durchgeführt und dann ging es mit dem Chatten:

            A) In index.html eine script mit: var socket = io(); eingetragen
            B) In server.js und client.js die Event-namen, die zuerst im “ “ standen in ‚ ‚ getan
            C) In index.html den Pfad zu socket.io anstelle von „socket.io/socket.io.js“ zu „/socket.io/socket.io.js“ geändert.

            Drei Änderungen auf einmal! Wenn ich sie alle Rückgängig mache, klappt es trotzdem mit Chatten! ich habe alle Änderungen rückgägngi gemacht und Enide neu gestartet. Chat funktioniert trotzdem.

            Dumm ist, dass ich nicht weißt, warum ich gestern 3Stunden verlieren musste, um am Ende nicht schlauer zu sein :(

  3. Fabian Busch /

    Vielen Dank für dein Tutorial, für den Anfang war das sehr cool zu sehen wie so eine Beispielapp funktioniert!

  4. Pino /

    Ich habe den chat geforkt :) Erweiterungen: * ein/auslogen (ohne Pwd) * private Nachrichten (PM) * Anzeigeboxen für Server/Status/Chat Nachrichten * frisches Layout * eine kleine Uhr/Wochentag/Datum. Um PM zu schicken, muss die serverapp sich beim Anmelden die entspr. Socket merken. Ich habe dazu ein Obj. mit (str) username und (obj) socket angelegt.
    wer schauen mag: https://git.io/vw0uA Ihr könnt mich natürlich jederzeit forken!

  5. Gerald /

    Hmmm ok, da habe ich also dann einen Chat, der auf einem anderen Server Port läuft als der Rest meiner Page – übrigens total reibungslos.

    Jetzt sind die Nutzer aber bereits auf meiner Page mit ihrem Usernamen angemeldet .. wie bekomme ich die Namen in den Chat, ohne das Eingabefeld für die namen? Mit anderen Worten, wie kann ich die index.html ggf. von meinem Apache generieren lassen, damit sie den richtigen Usernamen enthält?

    1. Pino /

      schreib eine user.php die ein angemeldeten user als array JSON encodet zurück gibt, dann in der client.js:

      var user =“;
      $.get(„server/user.php“ )
      .done(function(data) {
      console.log(„user get: “ + data.user );
      if (data.user) {
      var user = data.user;
      $(‚#name‘).val(user);
      }
      });
      (oder so ähnlich..) du kannst die $.ajax() oder $.get() methode nehmen. die index.html wird nach dem laden von jQuery beschrieben

  6. sebastian /

    Folgendes Problem:
    Wenn ich den Server.js in de CMD ausführen möchte, wird angegeben, dass app.configure keine Funktion ist. Express habe ich installiert, funktioniert aber trotzdem nicht.

    1. NodeCode / Beitrags-Autor

      Du nutzt anscheinend Express 4 anstatt 3, in der app.configure nicht mehr existiert. Hast du wie am Ende des Tutorials beschreiben npm install im entsprechendem Verzeichnis ausgeführt? Dann müsste nämlich Express 3 automatisch installiert werden.

      1. sebastian /

        Danke für die schnelle Antwort. Hat alles geklappt! Vielen Dank

      2. jachen /

        Ich hatte npm install ’nicht‘ ausgeführt, bin einfach händisch halbwegs logisch vorgegangen.

        Es ist wie immer bei solchen Techniken, man sollte ALLES lesen und kapieren. Und auch dann bleiben immer wieder Details verborgen, die je nachdem fatal auswirken können.

        Danke fürs Feedback.

  7. jachen /

    Eine tolle Arbeit. Vielen Dank für die aufgewendete Zeit.

    Habe das Projekt (zwecks Weiterbildung) auf einen Raspberry Pi 2 im lokalen Lan gelegt, sodass nun alle chatten können (statt arbeiten).
    Ein paar kleine Hürden gab es anfänglich wegen Änderungen in den Versionsnummern (package.json) und abgelösten Methoden (app.configure()) im server.js. Auch musste ich den URL auf meine Raspi-IP legen, logisch.

    Solche Tuts sollten Schule machen.

  8. Markus /

    Perfekt, weil simple gehalten!
    Vielen Dank!

  9. Bro /

    Bei mir kommt eine Fehlermeldung, wenn ich auf der Konsole server.js starte:


    SyntaxError: /Users/Testuser/config.json: Unexpected token /
    at Object.parse (native)
    at Object.Module._extensions..json (module.js:412:27)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object. (/Users/BM97/server.js:6:12)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)

    Kann mir jmd weiter helfen?

    1. NodeCode / Beitrags-Autor

      Du hast einen Syntax-Fehler in der Datei config.json, der durch das Zeichen / an einer Stelle an der es nicht hingehört verursacht wird.

      Wahrscheinlich hast du die genannte Datei beabsichtigt oder unbeabsichtigt verändert, und dabei das korrekte JSON-Format gebrochen.

  10. Bro /

    Hi! Super Artikel, super Tutorial! Weshalb gibt es von solchen Tutorials nicht mehr? Würde mich und bestimmt viele andere auch freuen. Zum Beispiel wie man einen Chat zwischen nur zwei User hinkriegt oder wie der Username bereits feststeht, sobald man den Chatroom betritt.

    Mfg,

  11. wik /

    Hallo,
    erstmal danke für das Tutorial, hab das sogar so halbwegs verstanden… nur hätte ich eine Frage: Gibt es eine Möglichkeit den usernamen einzugeben bevor man den Chat betritt so dass man anschliessend zum Chat kommt und der username quasi „gemerkt“ wird?

    1. NodeCode / Beitrags-Autor

      Ja, natürlich ist das möglich. Dies würde aber vor allem was die clientseitige Anwendungslogik betrifft den Rahmen dieses grundlegenden Tutorials sprengen.

      Grüße,
      NodeCode

  12. Jan /

    Hey!

    Nur zwei kleine Sachen:
    Zum einen weist npm beim installieren darauf hin, das die Felder „repository“ und „license“ in der package.json fehlen.
    Zum anderen bemerkt node beim starten des Servers: „express deprecated app.configure: Check app.get(‚env‘) in an if statement server.js:11:5“ ist hier evtl. etwas zu ändern?

    LG
    Jan

  13. Christoph /

    Hallo, vielen Dank für das Tutorial. Ein Problem hab ich hier: kann ich das auch für asynchrone Weitergabe nutzen? Bsp. in index.html schreib ich etwas in ein Feld, sende es ab und werde dann auf weiter.html weitergeleitet; dort soll der Inhalt aus index.html angezeigt, also beim Laden übergeben werden (anstatt „du bist nun verbunden“). Dafür wollte ich den abgeschickten Wert auf dem Server speichern (z.B. in einer temporären Datei ablegen und daraus wieder auslesen), aber das hat nicht funktioniert. Die asynchrone Übergabe an andere Clients sollte sich dabei nicht ändern.

  14. Robin /

    Hallo,

    ich beschäftige mich seit kurzem mit dem Thema node.js im Zuge eines Studiumsprojekts und mir hat das leicht verständliche Tutorial wirklich sehr geholfen!

    Nun habe ich jedoch eine Frage. Ich möchte die kleine Chat-Applikation, welche auf dem localhost schon einwandfrei läuft, auf einen Server laden.
    Somit könnte ich Sie mit Kommilitonen von mehreren Computern aus vorführen.

    Was müsste ich im Code alles abändern, damit dies gelingt?

    Vielen Dank und Grüße,
    Robin

    1. NodeCode / Beitrags-Autor

      Im Grunde gar nichts. Du musst die Anwendung einfach nur auf den Server laden, und ggf. die benötigten Module mit der Anweisung npm install installieren (falls du sie nicht mit kopiert hast, es sich um globale Module handelt, oder um binäre Module die für jeden Rechner individuell kompiliert werden müssen).

      Ansonsten kannst du sofort loslegen. Anstatt 127.0.0.1 musst du zum Aufrufen einfach die IP-Adresse der Servers nutzen, oder einen Domainnamen der auf diese IP-Adresse geschalten ist. Wenn eingehende Verbindungen von außen nicht durch einen Router oder eine Firewall blockiert werden (was bei einem Server in den meisten Fällen nicht der Fall sein sollte), dann kannst du die Anwendung von außen problemlos aufrufen. Ansonsten die verwendete Portnummer einfach freischalten.

      Wenn du später die Portnummer aus der URL entfernen möchtest, musst du die Anwendung einfach auf Port 80 schalten (der Standard-HTTP-Port), und als Administrator/Root ausführen (da Portnummer unterhalb der 1024 in der Regel nur mit Root-Rechten belegt werden können).

      Beim Wechsel der Portnummer ist noch zu beachten, dass immer nur ein Programm direkt auf eine Portnummer geschalten werden kann. Wenn man mehrere Anwendungen auf dem gleichen Server über verschiedene Domains auf dem Standard-HTTP-Port 80 haben möchte, muss man dazu einen Webserver verwenden, welcher die eingehenden Anfragen anhand der Domain an die richtige Anwendung weiterleitet. Im Falle der Verwendung von Socket.io sollte der Webserver im Idealfall auch WebSockets unterstützen, was aber bei allen großen Webservern wie Apache oder Nginx der Fall ist.

      1. Robin /

        Vielen Dank für die schnelle Antwort.
        Ich habe es wie beschrieben versucht, jedoch bekomme ich ein 404 Error.
        Das Verzeichnis liegt auf dem Server und ich kann es auch ansteuern:
        http://…..de/~spielman/nodeJS_chat

        Doch sobald ich den Port :8080 dahinter setze kommt der 404 Error.
        Die Module sind sind alle mit auf den Server kopiert worden.

        Woran kann dies liegen?

        1. NodeCode / Beitrags-Autor

          Ist http://…..de/~spielman/nodeJS_chat die URL über die du versucht auf die Anwendung zuzugreifen?

          Wenn ja, dann hast du die Funktionsweise von Node.js wohl noch nicht ganz verstanden. Anders als z.B. bei PHP wird eine Node.js-Anwendung nicht vom Webserver bei jedem einzelnen Aufruf einer bestimmten Datei oder eines Ordners per CGI oder FastCGI gestartet, sondern Node.js ist von Haus aus sein eigener Webserver.

          Wenn du eine Node.js-Anwendung also mit node server.js startest, dann brauchst du keinen Basis-Pfad für die Anwendung zu verwenden, sondern alle Verzeichnisse sind unter der Portnummer genau so, wie du sie im Programmcode konfiguriert hast.

          Somit musst du den Pfad vom Ordner in dem sich das Programm befindet natürlich weglassen. Deine URL müsste dann http://….de:8080/ lauten. Funktioniert es damit? Falls nicht, prüfe mal nach, ob die Anwendung beim Starten mit node server.js irgendwelche Fehlermeldungen ausgegeben hat.

          1. Robin /

            Auf dem Hochschulserver scheinen wohl die nötigen Rechte zu fehlen, dort bekomme ich den Error 403 Zugriff verweigert.

            Nun habe ich die komplette Anwendung auf einen bplaced Server gelegt und dort funktioniert es auch noch nicht.

            Hier ist ein Screenshot des Inhaltes meines Webspace:
            http://i62.tinypic.com/t6czld.png

            wenn ich nun mit http://www.iamrobin.de:8080 auf mein Webspace zugreife, kommt die Fehlermeldung „Die Website ist nicht verfügbar ERR_CONNECTION_REFUSED“
            mit http://www.iamrobin.de/nodeJS_chat gelange ich jedoch ohne Probleme auf das Verzeichnis der Anwendung.

            Wenn ich die Anwendung mit node server.js starte kommt folgender Hinweis: „express deprecated app.configure: Check app.get(‚env‘) in an if statement server.js:12:5“

            Vielen Dank für die schnelle und nette Hilfe!

            1. NodeCode / Beitrags-Autor

              Unterstützt der Webspace von bplaced.net überhaupt Node.js? Soweit ich weiß unterstützt nämlich nur PHP. Und den Kammandozeilen-Befehl node server.js hast du dann auch nur auf deinem lokalen Rechner ausgeführt, richtig?

              Ich denke dann haben wir den Fehler hier gefunden: Node.js ist einfach nicht auf dem Server installiert, sodass auch Node.js-Anwendungen nicht ausgeführt werden können.

              Du musst selbstverständlich einen Hosting-Anbieter wählen, der Node.js auch unterstützt. Wenn Node.js oder irgend eine andere serverseitige Programmiersprache bzw. Plattform nämlich nicht auf dem Server installiert geschweige denn für die Kunden öffentlich eingerichtet ist, dann können darin entwickelte Anwendungen auch nicht auf dem Server ausgeführt werden.

              Falls du keinen eigenen (Root-)Server mit SSH-Zugriff hast (also Zugriff auf die Kommandozeile), solltest du einen Hosting-Anbieter wählen, der Node.js von Haus aus unterstützt. In deinem Fall würde ich dir OpenShift oder Heroku empfehlen, die beide in der Basis-Version ebenfalls kostenfrei sind.

              In meinen Artikel zum Thema Node.js-Hosting hier auf NodeCode.de, oder auch in diesem von mir erstellten JsWiki-Beitrag zum Thema Node.js (im Hosting-Abschnitt) findest du weitere Anbieter mit Node.js-Unterstützung, die sind dann aber in der Regel kostenpflichtig oder bieten nur für eine begrenzte Zeit kostenlosen Zugang an.

              Viel Erfolg noch damit es dir diesmal gelingt. DU kannst bei einem Anbieter der offiziell Node.js-Hosting unterstützt aber eigentlich nicht viel falsch machen 😉

  15. Pingback: Beispiel Chat mit Node.JS | IT-Sommerfest /

  16. Sebastian /

    Hi,
    zunächst, sehr gutes Tutorial! Ich habe ebenfalls ein Chat mit node.js erstellt und hier gute Tipps für die Umsetzung gefunden. Ich bin noch einen Schitt weiter gegangen und habe das ganze um private Chats mit Usern, sowie weiteren Chaträumen, den man beitreten kann erweitert. Aktuell habe ich folgendes Problem.

    Sowie der Client seinen Browser schließt oder einen Page-Reload macht, ist der Chat-Verlauf gelöscht. Ich würde es gern hinbekommen, dass dieser beim Reload nicht verloren geht.

    Da sich der Socket beim Reload ja ändert (ist doch so?) machts wohl keinen Sinn da irgendwas reinzuschreiben.
    Mein Idee wäre wohl, den Chat an User-Logins zu koppeln und ggf. die Infos in eine DB packen und beim Reload entsprechend holen (außer bei explizitem Logout).

    Vielleicht hast du eine Idee oder einen Tipp wie man sowas umsetzt.
    Vielleicht haben auch andere das Problem…

    Danke und Gruß
    Sebastian

    1. NodeCode / Beitrags-Autor

      Die einfachste Lösung wäre es, z.B. die letzten 20 Chat-Mitteilungen je Raum einschließlich der Uhrzeit in einem Array zu speichern, und beim Betreten des Raumes an den jeweiligen User zu übermitteln.

      Dafür brauchst du dann auch keine Datenbank und keine User-Logins. Habe dies in einem anderen Projekt genau so umgesetzt.

  17. neteddie /

    Ein klasse Tutorial! Nicht zu oberflächlich, nicht zu verstiegen, gerade richtig, um Prinzipien verständlich zu machen. Danke, es hat mir sehr dabei geholfen, etwas über node.js und Websockets zu lernen.

  18. myjday /

    Wahnsinn & Lob!
    Ich habe bisher die Möglichkeiten von jQuery ausgetestet und habe immer wieder mal etwas über node.js gehört – konnte mir aber nie richtig etwas darunter vorstellen.
    Daher vielen vielen Dank für dieses wunderbare step-by-step Einstiegsbeispiel. Jetzt wirds hell am Himmel.

    bye bye

  19. Andre /

    Sehr schönes einfach gehaltenes Tutorial, danke sehr.

  20. Peter /

    Hey sau geil

  21. MarcelW /

    Hey, das ist für Anfänger doch mal ein super Tutorial und sehr schön geschrieben. Werde damit die Azubis bei uns mal etwas rumprobieren lassen.

    Ich frage mich jedoch gerade, wie sich das mit den Sockets verhält, wenn man nun mehr als einen Chatraum hat oder man zum Beispiel einen Raum hat und darüber hinaus jeder Anwesende auch andere persönlich in einem privaten Chat anschreiben kann?! Dies liesse sich doch dann über den selben Websocket realisieren und man übergibt vom Client anstelle von „socket.emit(‚chat‘, { name: name, text: text });“ folgendes: „socket.emit(‚chat‘, { room: room, name: name, text: text });“. Oder was wäre hier der eleganteste Weg?

    1. NodeCode / Beitrags-Autor

      Richtig, dies wäre eine von mehreren Möglichkeiten. Eine deutlich elegantere wäre es aber, anstatt ‚chat‘ einfach eine gesonderte Socket-Aktion zu verwenden, wie z.B. ‚privateChat‘. Dann spart man sich das Abfragen, ob die Chat-Nachricht öffentlich oder privat ist, was man ansonsten sowohl in im Webbrowser als auch in Node.js erledigen müsste.

      Sobald man private Chats verwendet, sollte man zur Identifizierung übrigens einmalige IDs anstatt Namen verwenden, da ansonsten sich jemand anderes einfach den selben Namen geben könnte, und dann in der Lage wäre, andere auszuspionieren. Zum reinen Rumprobieren ist das aber selbstverständlich nicht unbedingt erforderlich 😉

      1. MarcelW /

        Vielen Dank, das hilft mir grade beim Design einer anderen Anwendung extremst weiter und spart mir wohl einen Haufen Arbeit. Klasse Job! Bin leider noch recht neu in Sachen node.js und WebSockets, aber das Tutorial hilft super, um ein schnelles Verständnis ihrer Anwendung zu erlangen :)

  22. Felix /

    Hi, echt super Tutorial. Ich habe eine Frage: Im html steht: <script src=“socket.io/socket.io.js“></script>
    Aber im public Folder gibt es bei mir dieses Script gar nicht! Woher lädt der das also (im Firebug kann ich sehen, dass es geladen wurde)???
    Und dann im client.js: var socket = io.connect(); –> Woher weiß der denn an der Stelle, was io ist?

    Viele Grüße,
    Felix

    1. NodeCode / Beitrags-Autor

      Ganz einfach: Das Socket.io-Modul fügt die Datei socket.io/socket.io.js automatisch zum Webserver hinzu, da es ja das Server-Objekt als Parameter übergeben bekommt.

      Wenn diese Datei dann in den Client geladen wird, so wird die globale Variable io angelegt. Daher kannst du darauf ohne weiteres zugreifen.

      Ich habe übrigens die Fehldarstellung in deinem ersten Kommentar korrigiert (lag an der Website), und deinen zweiten entsprechend entfernt. Also nicht wundern 😉

  23. welle /

    Hallo,
    danke für das super Tutorial, es hat mich motiviert node.js auf meiner
    Linux-Maschine zu installieren und gleich loszulegen.
    Bin ja eher Python-Fan, aber Node ist auch nicht von schlechten Eltern.
    Was meiner Meinung nach fehlt (oder ich habe es nicht gefunden),
    ist eine nähere Erläuterung der *.json-Konfigurationsdateien.

    1. NodeCode / Beitrags-Autor

      Die config.json stellt in diesem Fall wie beschrieben ein JSON-Objekt mit der Portnummer bereit, und wird später in die Anwendung geladen um den Webserver an die konfigurierte Portnummer zu binden. So muss man den JavaScript-Code nicht ändern, wenn man die Portnummer später wechseln möchte.

      Die package.json ist hingegen eine universelle Datei zur Konfiguration des Paketmanagers NPM. Darin gebe ich z.B. die benötigten Zusatz-Module aus dem NPM-Verzeichnis an. Genauere Details dazu können der zugehörigen Dokumentation entnommen werden: https://docs.npmjs.com/files/package.json

  24. Ai /

    Hallo,

    erstmal danke für das Tutorial :)
    Habe allerdings folgendes Problem…
    Ich gebe in der Konsole den Befehl „npm install“ ein und versuche über „node server.js“ zu starten allerdings passiert rein gar nichts. Hat jmd viellt ne Idee ?

  25. hinz kunz /

    Hallo,

    super tutorial, weil die Funktionen schlicht gehalten sind, damit das Wesentliche im Focus bleibt.

    7 Sterne für nodecode (da können auch die Fehler nix dran ändern)

  26. Raman /

    Hi,
    habe bis jetzt noch nichts mit NodeJS gemacht und bin zufällig über dieses Tutorial gestolpert. Habs jetzt nur durchgelesen aber noch nicht ausprobiert. Werde ich die Tage sicherlich machen. Echt super einfach und verständlich geschrieben.

    Vielen Dank dafür!

  27. Ellen /

    Danke für das ausführliche Tutorial. Es ist sehr verständlich!
    Allerdings scheine ich irgendwie auf dem Schlauch zu stehen.
    Der Server läuft („Server läuft nun auf Port 8080“). Und wenn ich die index.html im Browser aufrufe erhalte ich keine Fehlermeldung. Aber wenn ich etwas eingebe und abschicke, passiert nichts…

    1. NodeCode / Beitrags-Autor

      Es freut mich, dass dir mein Tutorial gefällt! :-)

      Du musst die Website wie im letzten Abschnitt beschrieben über http://127.0.0.1:8080/ aufrufen, und nicht über das Öffnen der index.html-Datei im Ordner des Quellcodes. Denn ansonsten kann die WebSocket-Verbindung zum Server nicht hergestellt werden, da diese ja erst von Node.js zur Verfügung gestellt wird, und nicht vom lokalen Dateisystem.

      Ich habe dem Quellcodes des Tutorials jetzt entsprechend abgeändert, sodass beim Starten gleich die vollständige URL angezeigt wird, anstatt nur die Portnummer. Damit sollten zukünftige Verwechslungen ausgeschlossen sein.

    2. Phil /

      Hast du die funktion $(document).ready(function(){}
      in der datei client.js korrekt ?

      Diese funktion umschliesst allen nachfolgenden code innerhalb der client.js ?

      1. NodeCode / Beitrags-Autor

        Ja, das ist so richtig. Aller nachfolgender Code steht in der übergebenen Callback-Funktion, wodurch sichergestellt ist, dass er wirklich erst dann ausgeführt wird, wenn die HTML-Seite komplett zu Ende geladen ist.

        Siehe dazu auch in der offiziellen jQuery-Dokumentation: http://api.jquery.com/ready/ (auf Englisch)

  28. K1ngArthur /

    Super Artikel!

    Kleiner Fehler:

    app.configure(function(){
    // statische Dateien ausliefern
    app.use(express.static(__dirname + ‚/public‘));
    });

    ist veraltet. Stattdessen nur:

    // statische Dateien ausliefern
    app.use(express.static(__dirname + ‚/public‘));

    benutzen

  29. Marc-Andre /

    Danke für den Artikel. Bin zwar leider auch über das Thema npm install gestolpert (wäre besser es würde ganz oben erklärt was man machen muss als am Ende des Atikels) aber am Ende hat es geklappt.
    Interessante Sache!

  30. Junichs /

    Danke dir, geht jetzt =)

  31. Junichs /

    Huhu,
    kann sein, dass ich es wirklich überlesen habe oder es nicht für voll genommen habe^^
    Sorry 😉

    Jetzt bekomme ich allerdings ein anderen Fehler:
    Error: ENOENT, stat ‚C:\Users\junichs\AppData\Roaming\npm‘
    Scheinbar ein Pfadproblem.

    1. NodeCode / Beitrags-Autor

      Das scheint wohl ein allgemeines Problem mit NPM unter Windows zu sein. Die Lösung besteht scheinbar darin, manuell einen Ordner namens npm unter C:\Users\junichs\AppData\Roaming\ anzulegen.

      http://stackoverflow.com/questions/25093276/nodejs-windows-error-enoent-stat-c-users-rt-appdata-roaming-npm

  32. Junichs /

    Hi,
    ich bekomme die Meldung:
    module.js:340
    throw err;
    ^
    Error: Cannot find module ‚express‘
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object. (Pfad\server.js:1:77)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)

    Welche module.js?

    1. NodeCode / Beitrags-Autor

      Sieht so aus, als ob das Express-Modul nicht richtig installiert wurde. Du musst in der Konsole einfach die Anweisung npm install eingeben, dann werden alle benötigten Module automatisch installiert.

      Hast du den Artikel nicht vollständig gelesen? Da wird das am Ende nämlich auch erwähnt:

      Beachte dabei, dass du nach dem herunterladen noch die nötigen Module installieren musst. Dafür musst du dich mit der Konsole einfach in das Verzeichnis der Anwendung begeben und den Befehl npm install eingeben, die benötigten Module werden dabei automatisch aus der package.json ausgelesen und installiert.

      Ich hoffe, dass ich dir hiermit weiterhelfen konnte. Falls es noch weitere Probleme geben sollte, sag mir einfach bescheid :-)

  33. MeRo /

    Hey,

    erstmal großes Lob für das Tutorial, gefällt mir sehr gut und macht vor allem Lust auf mehr. Stellenweise wäre es schön wenn du etwas genauer sagen würdest warum du etwas machst.

    Leider funktioniert das ganze bei mir nicht wie gewünscht. Inzwischen habe ich sogar den ganzen Code kopiert, aber ich bekomme immer nur diese Fehlermeldung mit der ich so garnichts anfangen kann.
    http://picload.org/image/lcdrgdr/error.png

    Kann mir jemand weiterhelfen?

    1. hyp3rdino /

      Ist node.js auf deiner Windowskiste installiert und startest du die server.js auf der console explizit mit „node server.js“. Ich bin zwar kein Windowsexperte, aber deine server.js wird hier nicht von nodejs interpretiert sondern vom jscript interpreter. Der kann schon mit der ersten Zeile in der server.js nichts anfangen.

    2. NodeCode / Beitrags-Autor

      @MeRo
      Hast du die Anwendung auch über den Befehl node server.js gestartet? Die Fehlermeldung im Screenshot stammt nicht von Node.js sondern von „Microsoft JScript“, wahrscheinlich hast du also das falsche Programm verwendet.

      Im Screenshot ist außerdem zu sehen, dass sich die Datei im Verzeichnis von XAMPP befindet. Für Node.js wird XAMPP aber nicht benötigt, da eine Node.js-Anwendung als ein eigener Webserver fungiert.

      Falls du nicht weißt, wie genau man eine Anwendung mit Node.js startet, hilft dir möglicherweise folgende Seite weiter: http://nodecode.de/nodejs-konsolen-grundlagen

      Ich konnte dir übrigens erst jetzt antworten, da an dem Tag an dem ich deinen Kommentar freigeschalten habe, das Screenshot auf picload.org nicht aufrufbar war.

  34. Joggie /

    Ergänzung:
    Wenn man in der package.json express 4.x statt 3.x benutzen will startet der node Server nicht.

    Der Fehler lautet:
    TypeError: Object function (req, res, next) {
    app.handle(req, res, next);
    } has no method ‚configure’…

    Das liegt daran, dass ab version 4.x von express „app.configure“ nicht mehr benutzt/benötigt wird (Mehr Informationen dazu: https://github.com/visionmedia/express/wiki/Migrating-from-3.x-to-4.x)

    Um den Server trotzdem zum laufen zu bekommen muss man in der server.js Datei

    app.configure(function(){
    app.use(express.static(__dirname + ‚/public‘));
    });

    durch

    app.use(express.static(__dirname + ‚/public‘));

    ersetzen.

  35. Yannici /

    Hey!

    Vielen Dank für das Tutorial. Auch mich hat es motiviert mit NodeJS anzufangen. Hab es schlussendlich hinbekommen und ohne Vorkenntnisse von NodeJS (mithilfe von Google) sogar noch erweitert!

    Das Verändern von Namen ist nicht mehr so einfach. Habe ein Login-Feld reingemacht, bei dem man vornherein schon ein Name auswählen muss. Der Server und der Client speichert den ausgewählten Namen. Nachdem der Name ausgewählt wurde, wird in der client.js die Socket-Verbindung aufgebaut und alle Benutzer bekommen mit, dass der neue User sich verbunden hat. Schließt jemand die Verbindung (on disconnect), so werden ebenfalls alle darüber benachrichtigt.

    Finde es wirklich klasse, dass man aus dem Tutorial sogar schon mehr lernt, als nur den Chat … Sondern auch die Funktionsweise von Sockets in NodeJS.

    Grüße,
    Yannici

  36. Mounty2010 /

    Hallo, vielen Dank für diese „Schnelleinführung“ in socket.io.
    Für Einsteiger einfach, systematisch und verständlich erklärt.

  37. Rocks /

    Danke für Deine Mühe. War mein erstes Tutorial zu node und ich finde es kommt gut rüber wie kompakt der Code ist bei gleichzeitigem Erhalt einer Fülle von Basisfunktionalitäten! Super!

  38. Matze /

    Ergänzung:

    Bei mir funktioniert der Code nur mit einem Client.
    Damit sich auch mehrere Clients verbinden können muss zum einen in der server.js aus

    socket.emit
    io.sockets.emit

    gemacht werden. Außerdem habe ich socket.emit(‚chat‘, data) ersetzt jeweils durch

    socket.emit(‚toClient‘, data)
    socket.emit(‚toServer‘, data)

    und

    socket.on(‚toClient‘, data)
    socket.on(‚toServer‘, data)

    Hoffe es hilft.

    1. NodeCode / Beitrags-Autor

      Ich habe tatsächlich fälschlicherweise socket.emit() anstatt io.sockets.emit() verwendet. Wahrscheinlich weil ich überlegt habe, beim Abschicken einer Chat-Nachricht sie in dem Browser des Absenders sofort anzuzeigen, ohne den Umweg über den Server gehen zu müssen.

      Dann hätte ich nämlich socket.broadcast() verwendet, sodass die Chat-Nachricht an alle anderen Benutzer gesendet wird, aber nicht an den Absender. Letztendlich habe ich mich aber dafür entschieden, dass auch der Absender seine eigene Meldung über den Server empfängt, damit mit merkt, dass der Server auch richtig funktioniert. Ich werde den Fehler sofort beheben.

      Den Sinn dahinter, socket.emit(‘chat’, data) jeweils durch socket.emit(‘toClient’, data) und socket.emit(‘toServer’, data) zu ersetzen, kann ich nicht nachvollziehen. Wenn eine Websocket-Nachricht von Server gesendet wird, kommt sie logischerweise zum Client, und wenn sie vom Client gesendet wird, zum Server. Der Server dient hier quasi nur als Verteiler zwischen den einzelnen Clients.

      Möchtest du den Code damit übersichtlicher machen? Das würde vielleicht in diesem kurzen Beispiel funktionieren, aber bei größeren Projekten mit vielen verschiedenen Socket-Anweisungen wäre genau das Gegenteil der Fall.

      Wenn du eine Unterscheidung zwischen den Code am Client und am Server haben mochtest, solltest du z.B. am Server io.sockets.on('connection', function (socket) { durch io.sockets.on('connection', function (server) { , und am Client var socket = io.connect(); durch var socket = io.connect(); ersetzen. Dann könntest du mit server.emit(‘chat’, data) vom Server zum Client, und mit client.emit(‘chat’, data) vom Client zum Server senden. Bei dem verwenden des Variablennamens server aber Aufpassen, der gleiche Name schon für das in Zeile 3 geladene HTTP-Modul verwendet wird. Innerhalb von io.sockets.on('connection', function (socket) { würdest du jetzt nicht mehr auf die in Zeile 3 definierte Variable server zugreifen, sondern auf die soeben definierte Gleichnamige. In diesem Beispiel wäre das nicht schlimm, aber wenn du bei einem größeren Projekt innerhalb der Socket-Verbindung noch etwas mit dem HTTP-Server machen wolltest, wäre dass dann selbstverständlich nicht möglich.

      Mich freut es, dass dir mein Tutorial gefällt. Falls du weitere Verbesserungsvorschläge hast, Fehler findest oder Fragen hast, stehe ich gerne zur Verfügung 😉 Das nächste Tutorial ist übrigens schon in der Vorbereitung.

      1. Matze /

        Ja, wenn ich drüber nachdenke ergibt das mit toClient und toServer überhaupt keinen Sinn.
        Es erschien für mich halt fürs erste Tutorial sinnvoller, weil ich erstmal überhaupt nachvollziehen musste „wenn ich hier was reinstecke, kommt es hier wieder raus“. Wenn überall „chat“ steht, weiß man halt irgendwie nicht wo vorne und hinten ist.
        Was du vielleicht im Tutorial nochmal präziser beschreiben (steht bestimmt auch irgendwo auf deiner Website) kannst, ist dass socket.on(event) ein LISTENER ist, also der wartet die ganze Zeit nur bis irgendwann sein Event abgefeuert wird und dann tut er was und socket.emit(event) der SENDER ist, der das Event abfeuert.
        Jetzt nach ein bisschen Praxis ist mir das klar, aber vielleicht kannst dus n bisschen ausführlicher beschreiben…

        Cool, mach weiter!

        1. NodeCode / Beitrags-Autor

          Okay, ich habe einen Absatz unter den Websocket-Code hinzugefügt, in dem ich die Funktionsweise genauer beschreibe.

  39. Matze /

    Hallo,

    erstmal vielen vielen Dank für das Tutorial, hat mich motiviert mit nodejs anzufangen und letzendlich hab ichs jetzt auch zum Laufen bekommen!

    Allerdings hast du einmal einen kleinen Fehler eingebaut, der gerade Anfänger (die alle 1:1 so abtippen) verzweifeln lassen könnte:
    – teilweise schreibst du config.js statt config.json

    Und dann schreibst du nicht wie man den Server zum Laufen bekommt (ich habe lange Zeit einfach versucht, die index.html mit dem Browser zu öffnen, was nicht geklappt hat).

    Man muss in der Konsole in den Ordner gehen und dort den Server mit
    „node server.js“ (bzw. bei mir Linux „nodejs server.js“)
    starten. Dann kann man ihn im Browser mit localhost:8080 öffnen.

    Sonst aber alles super, vielen Dank!!

    LG Matze

    1. NodeCode / Beitrags-Autor

      Stimmt, ich habe zweimal config.js statt config.json geschrieben. Einmal in der Datei-Übersicht, und ein anderes mal gleich darunter bei der Erklärung des Server-Codes. Der Code selbst ist davon nicht betroffen. Ich habe den Fehler soeben korrigiert.

      Was das Starten des des Node.js-Servers angeht, so habe ich das bereits auf der Seite Konsolen Grundlagen ausführlich erklärt. Diese ist auch in der Sidebar oben rechts unter „Einführung in Node.js“ verlinkt, aber wahrscheinlich kommen die meisten Besucher direkt auf dieses Tutorial, und schauen am Ende nicht noch einmal nach oben. Ich werde daher noch einen Hinweis mit entsprechender Verlinkung in das Tutorial hinzufügen.

      1. Matze /

        Hey, ja stimmt, habe dein „Basics“ Tutorial jetzt auch gefunden, dann macht das alles schon Sinn! Meistens ist es ja aber bei so Tutorial Websiten, dass man wie du schon sagst, nur auf das Tutorial fixiert ist und nicht noch den „größeren Kontext“ der ganzen Website / Plattform im Auge hat. :)

  40. Flo /

    Hi, studiere grad nodejs und bin auf deinem Artikel gelandet. Hab ihn überflogen und versucht zu verstehen. Das hat funktioniert! Danke, Berichte weiter über deine Fortschritte… LG, Flo

hinterlasse einen Kommentar