Kategorien
JavaScript & jQuery Programmierung

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

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.

Aus der Praxis: Wir bauen eine Chatroom Web-App mit Node.js

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

Teil 6 – Das Finale: Debugging Remote-Node-Apps

Herzlich willkommen zum sechsten und gleichzeitig letzten Teil unserer Praxis-Serie zu Node.js: Wir programmieren eine Node.js-getriebene Chatroom Web-App.

In dieser letzten Folge geht es um die finale Bereitstellung des Chatrooms. Ich erkläre euch, wie man dabei ein Remote Debugging durchführt.

In Azure bereitstellen!

Unsere Node.js-getriebene anonyme Chatroom-App läuft. Dann wollen wir sie jetzt mit ein paar Klicks auch in der Cloud bereitstellen. Das funktioniert mit jeder Cloud, die Node.js unterstützt. Ich werde hier Microsoft Azure benutzen, weil ich dort auch eine Node.js Website kostenlos laufen lassen kann.

Einen kostenlosen Testzugang für Microsoft Azure gibt es hier. Dieser ermöglicht, Microsoft Azure einen Monat lang im Wert von €170 zu testen. Auf dem Service, den wir hier nutzen, Azure Websites, kann man damit bis zu zehn Webseiten kostenlos laufen lassen.

1. Sobald das Azure-Konto eingerichtet ist, gehen wir zurück zur IDE. Dort führen wir auf unserem Express-Projekt einen Rechtsklick aus und wählen im Menü dann „Publish„.

Wir bauen eine Chatroom Web-App mit Node.js

2. Das Menü „Publish“ öffnet einen Assistenten mit einigen Optionen. Wir wählen als Ziel Microsoft Azure-Websites.

3. An dieser Stelle erfolgt der Login, und zwar mit dem gleichen Microsoft-Konto wie bei der Azure-Anmeldung.

4. Nun wählen wir „New“ aus, um eine neue Azure-Webseite zu erstellen. Existiert schon eine, könnten wir auch einfach diese im Dropdown-Menü auswählen.

clip_image003

5. Nun füllen wir die Felder im Assistenten aus (siehe unten). Darauf achten, einen unverwechselbaren Namen für die Seite zu wählen und dann „Create“ klicken.

BLOG POST - Part 6 - Screenshot 3

6. Als Nächstes erscheint ein vorausgefüllter Assistent mit einem Button „Publish“, den wir klicken.

clip_image007

Geschafft! Das Projekt ist in der Azure-Cloud veröffentlicht! Aber die Arbeit ist damit noch nicht vollständig erledigt.

WebSockets bei Azure-Websites aktivieren

Um sicherzustellen, dass WebSockets auf unserer Website aktiviert ist, müssen wir ein paar weitere Dinge erledigen. Wer sich das Ganze gern etwas detaillierter ansehen oder die FAQ dazu durchstöbern will, sollte sich diese Seite nicht entgehen lassen.

Als erstes aktivieren wir WebSockets von der Azure-Befehlszeile oder dem Konfigurations-Tab aus:

clip_image008

Dann ändern wir unsere web.config Datei und die folgende Zeile zum system.webServer XML-Element.

<webSocket enabled="false" />

Das klingt erstmal unlogisch, ist aber genau richtig so. Denn dieser Schritt deaktiviert das IIS-WebSockets-Modul, das seine eigene WebSockets-Implementierung enthält und mit Node.js-spezifischen WebSockets Modulen wie Socket.IO kollidiert.

Das Debugging von Remote Node Apps

Node Tools für Visual Studio (NTVS) hat etliche fortgeschrittene Debug-Funktionen dabei, wie zum Beispiel bedingte Programmstopps, “Hit Count“- Programmstopps, Tracepoints und Remote Debugging Support für Windows, Linux und OS X. Mehr dazu gibt es hier.

Mit Remote Node-Instanzen verbinden

NTVS unterstützt Remote Debugging Code, der auf Azure-Websites läuft. Im Gegensatz zu gewöhnlichem Remote Debugging ist hier der Zielrechner nicht direkt über TCP zu erreichen. NTVS besitzt dafür einen WebSocket-Proxy für das Debugging-Protokoll, der das Protokoll via HTTP zeigt.

Wenn man ein Windows-Azure-Projekt aufsetzt, ist der Proxy bereits vollständig konfiguriert in Web.Debug.config. Um ihn auf der Azure-Website zu aktivieren, muss man das Projekt in der Debug-Konfiguration veröffentlichen. Das tun wir mit den nun folgenden Schritten.

1. Rechtsklick auf dem Projekt und Publish auswählen.

clip_image001[1]

2. Links den Tab Settings auswählen und im Dropdown-Menü die Konfiguration “Debug” wählen.

clip_image010

3. Auf Publish klicken.

Wenn unser Projekt ordnungsgemäß bereitgestellt und WebSockets aktiviert wurde, können wir die Website vom Server-Explorer aus einfügen. Wer das Server-Explorer-Fenster noch nicht geöffnet hat, kann das über View > Server Explorer tun. Unter Windows Azure > Web Sites können wir dann unsere Website finden. Dort führen wir dann einen Rechtsklick aus. Wenn die Website läuft und das Projekt mithilfe der Debug-Konfiguration bereitgestellt wurde, sollte im Kontextmenü der Attach Debugger (Node.js)-Befehl sichtbar sein.

clip_image011

Protokolle lesen und streamen

Das Streaming der aktuellen Protokolle ist nicht schwierig. Wir müssen einfach im Server-Explorer auf unsere Webseite rechtsklicken und View Streaming Logs auswählen.

clip_image012

Fazit

Glückwunsch! Wir haben es vollbracht! Der anonyme Echtzeit-Chatroom läuft in der Cloud. In dieser Tutorial-Serie haben wir nicht nur gelernt, wie man Node aufsetzt, ein Web-Frontend mit Express entwickelt und die App in die Cloud bringt, sondern auch wie man socket.io nutzt, um einen Echtzeit-Layer einzufügen. Zu guter Letzt wissen wir nun auch, wie man das Ganze am Ende bereitstellt.

clip_image013

Wer will, kann die einzelnen Teile noch mal auf meinem Blog nachlesen (in englischer Sprache). Hin und wieder stelle ich dort auch Updates zu diesem Tutorial bereit. Wer mehr Neuigkeiten dazu erfahren will, kann mir einfach auf Twitter folgen @ramisayar.

P.S. Ja, auch für noch mehr „Hurra-GIFs“ habe ich einen Link-Tipp.

Alle Teile der Node.js-Serie hier bei Dr. Web

#1: Einführung in Node.js

#2: Express mit Node.js und Azure

#3: Ein Chatroom-Backend mit Node.js, Socket.IO und Mongo aufsetzen

#4: Eine Chatroom-UI mit Bootstrap erstellen

#5: Den Chatroom mit WebSockets verbinden

#6: Das Finale: Debugging Remote-Node-Apps (dieser Beitrag)

Noch mehr Lernmaterial zu Node.js 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.