Kategorien
JavaScript & jQuery Programmierung

Aus der Praxis: Wir bauen eine Chatroom Web-App mit Node.js (Teil 5)

In dieser Node.js Tutorial-Serie zeigen wir, wie man eine Node.js-getriebene Echtzeit-Chatroom Web App erstellt, die vollständig cloud-fähig ist. Es wird darum gehen, Node.js auf einem Windows-Rechner aufzusetzen, ein Web-Frontend mit Express zu entwickeln, eine Node-Express-App auf Azure zu bringen, Socket.IO zu nutzen, um einen Echtzeit-Layer hinzuzufügen und zu zeigen, wie man das Ganze zum Schluss einsetzt.

Wir bauen eine Chatroom Web-App mit Node.js (Teil 5)

Schwierigkeitsstufe: Einsteiger bis mittlere Kenntnisse, vorausgesetzt werden HTML5 und JavaScript

Teil 5 – Den Chatroom mit WebSockets verbinden

Willkommen zurück zu Teil 5 unserer Praxis-Serie zu Node.js: Wir programmieren eine Node.js-getriebene Chatroom Web-App.

In diesem Teil erkläre ich, wie man den Frontend-Chatroom mit dem Node-Chatroom-Backend verbindet, das wir in Teil 2, Teil 3 und Teil 4 erstellt haben.

Hinzufügen von jQuery, SocketIO und index.js

Bevor wir beginnen, unseren Frontend-JavaScript-Code zu schreiben, sollten wir sicherstellen, dass alle benötigten Dateien und Abhängigkeiten vom Node-Server ausgeliefert werden. Zu Beginn fügen wir jQuery und Socket.IO der Datei layout.jade hinzu, die durch alle anderen jade Dateien unseres Projekts erweitert wird.

WIr ersetzen den Link zu bootstrap.min.js mit einem Link zu allen Dateien, die wir benötigen.

script(type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js')
script(type='text/javascript' src='/js/bootstrap.min.js')
script(type='text/javascript' src='/socket.io/socket.io.js')

Beachte: die erste Zeile verweist auf jQuery, das im Microsoft Ajax Content Delivery Network gehostet wird. Dieses CDN beinhaltet beliebte JavaScript-Bibliotheken von Drittanbietern, wie jQuery. Dadurch kann man diese sehr einfach den eigenen Webanwendungen hinzufügen. Die Performance von Ajax-Anwendungen wird durch die Nutzung eines CDN deutlich verbessert. Die Inhalte eines CDN werden auf weltweit verteilten Servern zwischengespeichert. Das CDN unterstützt SSL (HTTPS) für den Fall, dass man eine Webseite mit der Hilfe von Secure Sockets Layer ausliefern will.

Nun füge ich am Ende eine weitere Zeile hinzu, um einen neuen Block zu erstellen.

block body_end

Dadurch kann jede Jade-Datei, die eine layout.jade Erweiterung hat, auch Script-Tags unmittelbar vor dem Ende des Body-Tags einfügen.

Jetzt nutzen wir unseren neuen Block, um dort einen Link zu unserer index.js-Datei einzufügen, die wir im Ordner public/js erstellen werden (bitte nicht vergessen).

block body_end
  script(type='text/javascript' src='/js/index.js')

Wichtig: Der Block beginnt ohne Einzug, um den Code-Konventionen von Jade zu genügen. Wer jetzt den Node-Server ausführt und zur Hauptseite seines Browsers geht, wird in den F12-Tools entdecken, dass die Dateien korrekt ausgeliefert werden.

Schnelle Anpassungen in app.js

Jetzt würde ich gern paar Dinge in app.js ändern. Als erstes will ich die Reihenfolge der Sortierung umkehren – damit die ältesten Mitteilungen zuerst gesendet werden. Außerdem sollen die neuesten Chat-Nachrichten auf dem gleichen Kanal gesendet werden, auf dem die neuen Nachrichten empfangen werden. Diese Änderungen vollziehe ich in den Zeilen 49 und 50 von app.js. Und so sieht es dann aus:

var stream = collection.find().sort().limit(10).stream();
stream.on('data', function (chat) { socket.emit('chat', chat.content); });

Nicht vergessen: Die Umgebungsvariable CUSTOMCONNSTR_MONGOLAB_URI muss festgelegt werden, bevor die app.js-Datei erneut aufgerufen wird, da ansonsten das Node-Backend abstürzt, weil es keine Verbindung zur MongoDB herstellen kann.

Den Send-Button aktivieren

Nun ist es an der Zeit, den Send-Button zu aktivieren, um mithilfe von WebSockets Nachrichten im Mitteilungsfeld an den Backend-Server des Chat-Channels zu senden.

var socket = io();
$('#send-message-btn').click(function () {
    var msg = $('#message-box').val();
    socket.emit('chat', msg);
    $('#messages').append($('
').text(msg)); $('#message-box').val(''); return false; }); socket.on('chat', function (msg) { $('#messages').append($('

').text(msg)); });

Zeile 1

Wir erstellen ein Socket, indem wir die Funktion io() aufrufen, die sich in der Datei socket.io-client.js befindet.

Zeile 2

Danach sorgen wir dafür, dass durch einen Klick auf den Send-Message-Button eine Funktion ausgeführt wird. Dafür nutzen wir die Funktion $ von jQuery und den Click-Event-Handler.

Zeile 3

Wir erhalten den String-Value des Mitteilungsfensters mithilfe der Funktion $ von jQuery.

Zeile 4

Wir nutzen die emit-Funktion auf der Socket-Variable, die wir in Zeile 1 erstellt haben, um eine Mitteilung an den ‘chat’-Channel zu senden, die den Wert des Mitteilungsfensters enthält.

Zeilen 5-7

Hier fügen wir die Nachricht im Mitteilungsfenster der Div #messages hinzu, damit der User erkennt, dass die Nachricht gesendet wurde. Wir weisen den Wert des Mitteilungsfensters einem leeren String zu, um es wieder frei zu machen.

Zeilen 9-10

Wir wollen die im Chat-Channel erhaltenen Nachrichten anderer User der Div #messages hinzufügen. Das Node-Backend wird die vom Client geschriebene Mitteilung nicht an sich selbst zurücksenden. Aber das geht in Ordnung, weil wir diese schon im Click-Handler eingefügt haben.

Wir bauen eine Chatroom Web-App mit Node.js (Teil 5)

Fazit

Geschafft! Wir haben Backend und Frontend mithilfe von WebSockets verbunden. Wer jetzt noch eine Identifikation oder Avatare für alle User hinzufügen will – kein Problem. Aber auch ohne das ist der Chatroom jetzt einsatzbereit. In der nächsten Folge erkläre ich wie der Chatroom auf Azure angewendet und von Fehlern befreit wird.

Dranbleiben für Teil 6!

Teil 6 — das Finale mit dem Debugging von Remote Node Apps — wird schon bald hier bei Dr. Web veröffentlicht. In englischer Sprache gibt es ihn schon auf meinem Blog.

Wer mehr Neuigkeiten dazu und zu anderen Artikeln erfahren will, kann mir einfach auf Twitter folgen: @ramisayar.

Weitere Teile der Serie bei MSDN (in englischer Sprache)

Part 1 – Introduction to Node.js
Part 2 – Welcome to Express with Node.js and Azure
Part 3 – Building a Backend with Node, Mongo and Socket.IO
Part 4 – Building a Chatroom UI with Bootstrap
Part 5 – Connecting the Chatroom with WebSockets
Part 6 – The Finale and Debugging Remote Node Apps

Noch mehr Lernen über Node auf Azure

Ausführlichere Lehrinhalte zu Node gibt es in meinem Kurs an der Microsoft Virtual Academy.

Sehr hilfreich sind auch diese Kurzvideos zu ähnlichen Node-Themen:

Dieser Artikel ist Teil der Web-Dev Tech-Series von Microsoft. Wir freuen uns Microsoft Edge (früher Project Spartan genannt) und seine neue Rendering Engine mit euch zu teilen. Kostenlose Virtual Machines oder Remote Testings für Mac, iOS, Android oder Windows gibt es hier: @ dev.modern.IE.

(dpe)

Von Rami Sayar

Rami Sayar ist technischer Evangelist bei Microsoft Kanada und dort für "Web Development" (JavaScript, AngularJS, Node.js, HTML5, CSS3, D3.js, Backbone.js, Babylon.js), Open Data und Open Source Technologien (Python, PHP, Java, Android, Linux, etc.) zuständig. Er betreibt einen Blog und ist als @ramisayar auf Twitter aktiv.

Schreibe einen Kommentar

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