Kategorien
JavaScript & jQuery Programmierung

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

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 (oder, für alle Mac-User, zumindest die Konzepte dahinter zu verstehen), ein Web-Frontend mit Express zu entwickeln, eine Node-Express-App auf Azure zu bringen, wie man Socket.IO nutzt um einen Echtzeit-Layer hinzuzufügen und wie man das Ganze zum Schluss einsetzt. Als Entwicklungsumgebung verwendet das Tutorial das optionale Visual Studio und das Node.js Tools für Visual Studio Plugin — die Links für den kostenlosen Download beider Tools folgen weiter unten.

nodejs-partone-teaser_DE

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

Teil 1 – Einführung in Node.js

Hier nun also der Teil 1 der Praxis-Tutorialserie über Node.js: Wir programmieren eine Node.js-getriebene Chatroom Web App. In diesem Teil erkläre ich was Node.js überhaupt ist, warum man sich unbedingt mit Node.js beschäftigen sollte und wie man es auf dem Rechner einrichtet.

Was ist Node.js… und wofür brauche ich das?

Node.js ist eine Laufzeitumgebung und Bibliothek um JavaScript Applikationen außerhalb des Browsers laufen zu lassen. Node.js wird vor allem dafür benutzt um Server-Applikationen in Echtzeit laufen zu lassen und glänzt in seiner Leistungsfähigkeit durch die Nutzung nicht-blockierender I/O und asynchroner Events. Rund um Node.js ist ein komplettes Web-Ökosystem entstanden, mit mehreren nutzbaren Web App Frameworks und Protokollimplementierungen. Kurz: Es gehört zweifellos zu den einfachsten und schnellsten Tools, um heutzutage Echtzeit-Anwendungen für das Web zu schreiben.

Warum man mit Node.js arbeiten sollte? Ganz einfach: JavaScript. JavaScript ist unglaublich populär und weitverbreitet. Dass das Web zum heutigen dynamischen Wunderland wurde, dazu hat diese Sprache als eine der Hauptantriebskräfte sicher ganz wesentlich beigetragen. Was inzwischen alles innerhalb eines Browsers möglich ist schlägt alles Andere!

JavaScript entstand eigentlich am Frontend — aber dank der V8 JavaScript Engine und der Arbeit von Ryan Dahl kann man heute vernetzte JavaScript Anwendungen außerhalb des Browsers laufen lassen, eben mit dem Ziel Web Apps zu bauen. Node.js hilft die Programmiersprachen die von deiner App genutzt werden, zusammen zu bringen. Es ist keine weitere Sprache für das Backend nötig, JavaScript kann überall genutzt werden. Wer Erfahrungen mit der Programmierung und dem Design von Webseiten hat sowie mit Web App Frontends in HTML, CSS und JavaScript, der braucht keine andere Sprache zu lernen um komplexe, daten-getriebene Backends für Apps zu schreiben.

Node.js spielt zudem eine wesentliche Rolle bei der Weiterentwicklung von WebSockets als eine Methode für die Echtzeit-Kommunikation zwischen Frontend und Backend. Die Nutzung von WebSockets und von Bibliotheken wie Socket I/O, die auf diesem Protokoll aufbauen, haben die Erwartungen daran, was Web-Anwendungen heute leisten sollen nach oben geschraubt. Und uns Entwicklern die Chance gegeben, das Web neu zu denken und zu gestalten.

Node.js in Windows 8 aufsetzen

Wir brauchen zuallererst einen halbwegs aktuellen und frisch konfigurierten Rechner. Und dann kann es losgehen mit der Installation von Node.js auf Windows 8.1.

1. Node.js installieren

Als erstes die Node.js Runtime herunterladen und installieren. Mit dem Windows Installer geht das kinderleicht.

Wer dagegen ein Fan von Chocolatey ist, dem Paketmanager für Windows, kann Node.js folgendermaßen installieren:

choco install nodejs.install

2. Set-up bestätigen

Dann genau hinschauen, ob das Node.js Installationsprogramm zur PATH Systemumgebungsvariable hinzugefügt wurde. Wer wissen will, wie man die Umgebungsvariable in Windows 8 und WIndows 8.1 verändern kann, schaut am besten dieses Video. Der folgende Ordner muss unbedingt zur PATH Variable hinzugefügt worden sein:

C:\Program Files (x86)\nodejs\

Wer bei der Befehlseingabe node –h eingibt, dem sollte die Hilfe-Dokumentation für das Node.js Installationsprogramm angezeigt werden.

Neben Node.js sollte auch NPM, das System welches die Node.js Pakete verwaltet, installiert und über die Befehlseingabe erreichbar sein. Einfach npm –h eingeben, und dann sollte die Hilfe-Dokumenation von NPM angezeigt werden.

Wenn was schiefläuft…

Wenn ein Fehler wie dieser auftreten sollte…:

Error: ENOENT, stat 'C:\Users\someuser\AppData\Roaming\npm'

…sollte man einen Ordner erstellen auf dem oben angegebenen Pfad, siehe auch diese StackOverflow Frage. Dieses Problem tritt nur im aktuellen Node.js Installer auf und sollte mit der nächsten Version beseitigt sein. Der Ordner wird so erstellt:

mkdir -r C:\Users\someuser\AppData\Roaming\npm

Ein Entwicklungswerkzeug auswählen

Nachdem Node.js installiert ist, ist es jetzt an der Zeit ein Entwicklungswerkzeug auszuwählen. Es gibt da kaum Einschränkungen. In den Tutorials werde ich jedoch sowohl Visual Studio nutzen, um die Chat Engine zu entwickeln, zu debuggen und aufzusetzen als auch Node.js Tools for Visual Studio (NTVS) – ein kostenloses Open Source Plugin für Visual Studio, das die Entwicklung von Node.js Anwendungen unterstützt.

Ein neues Node.js Projekt in Visual Studio starten

Hinweis: Die Screenshots zeigen Visual Studio 2013 Ultimate.

Ein neues Node.js Projekt zu starten ist keine große Sache.

1. Visual Studio starten. Im Datei-Menü erst Neu klicken und dann Projekt.

http://blogs.msdn.com/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-60-29/0741.BLOG-POST-_2D00_-Part-1-_2D00_-Screenshot-1.png

2. Im Fenster „Neues Projekt“ erst die Menüauswahl Installiert vergrößern, dann Vorlagen, und schließlich JavaScript auswählen. Im Hauptfenster Blank Node.js Web Application wählen. Dann einen Speicherort und einen Namen für das Projekt wählen und OK klicken.

http://blogs.msdn.com/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-60-29/3414.BLOG-POST-_2D00_-Part-1-_2D00_-Screenshot-2.png

3. Angezeigt wird der folgende Bildschirminhalt. An dieser Stelle kann man Visual Studio auch erstmal ganz zwanglos ausprobieren und entdecken. Jetzt kann man die erstellte server.js Datei im Solution Explorer öffnen (normalerweise rechts auf dem Bildschirm sichtbar, aber sie kann auch an anderer Stelle auftauchen.)

http://blogs.msdn.com/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-60-29/0211.BLOG-POST-_2D00_-Part-1-_2D00_-Screenshot-3.png

4. Jetzt die Node.js Web-Anwendung im favorisierten Browser debuggen.

http://blogs.msdn.com/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-60-29/2235.BLOG-POST-_2D00_-Part-1-_2D00_-Screenshot-4.png

“Hello World” in Node.js

Wie in anderen Sprachen auch, zeigt der generierte Beispiel-Code, wie man “Hello World” im Browser anzeigen lassen kann. Nun werde ich erklären wie der erstellte Code in server.js Zeile für Zeile funktioniert.

*Hinweis: Wie oben schon erwähnt, geht diese Serie davon aus, dass Kenntnisse über JavaScript und HTML5 vorhanden sind und man weiß wie HTTP/das Internet funktionieren.

Zeile 1

  var http = require('http');

Node.js besitzt ein einfaches System um Modul und Abhängigkeiten zu laden. Dazu einfach die Funktion “require” mit dem Dateipfad oder dem Verzeichnis, welches das Modul enthält, aufrufen. Daraufhin wird eine Variable zurückgegeben, die alle exportierten Funktionen dieses Moduls enthält.

Zeile 2

var port = process.env.port || 1337;

In dieser Zeile bestimmen wir an welchem Port der HTTP Server, der das HTML ausgibt, laufen soll. Falls eine Portnummer in den Umgebungsvariablen angegeben ist, nehmen wir diese. Ansonsten benutzen wir einfach die 1337.

Zeile 3

http.createServer(function (req, res) {

Wir brauchen einen Server der die HTTP-Anfragen (Requests) bearbeitet. Wir übergeben auch die createServer Funktion, eine Callback-Funktion mit zwei Parametern um jede einzelne Anfrage zu bearbeiten und eine Antwort (Response) zu senden. Wer noch nicht mit Callback-Funktionen in JavaScript gearbeitet hat, dem empfehle ich Michael Vollmers Artikel. Die erhaltene Anfrage wird im req parameter übermittelt und die Antwort solllte an den res parameter gehen.

Zeile 4

res.writeHead(200, { 'Content-Type': 'text/plain' });

Jede HTTP-Response benötigt eine Statuszeile und Headers. Mehr über HTTP Header und wie sie funktionieren gibt es in diesem Artikel. Im vorliegenden Beispiel wollen wir zu 200 OK als Status-Reponse zurück und den Content-Type als einfachen Text festlegen. Dazu rufen wir die writeHead function auf dem Response-Objekt auf.

Zeile 5

res.end('Hello World\n');

Nach dem Schreiben der Response wollen wir die Ende Funktion aufrufen. Wir können auch den endgültigen Inhalt mit der Ende Funktion durchlaufen lassen. In diesem Fall senden wir den String “Hello World” in normalem Text.

Zeile 6

}).listen(port);

Wir sperren den Callback und rufen die listen Funktion am anfangs definierten Port auf. Dadurch wird der Server gestartet, der nun beginnt Requests am festgelegten Port anzunehmen.

Um das Resultat zu sehen, beginnt man nun mit dem Debuggen: Dazu einfach den Button klicken, der im vorigen Screenshot zu sehen war. Nun ist “Hello World” im Browser zu sehen.

http://blogs.msdn.com/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-60-29/7652.BLOG-POST-_2D00_-Part-1-_2D00_-Screenshot-5.png

Voilà! Und schon ist eine Node.js App auf Windows 8.1 mithilfe von Visual Studio 2013 zum Laufen gebracht.

Dranbleiben für Teil 2!

Teil 2 — Wie man das “Hello World”-Projekt in die Cloud bringt — ist hier in meinem Blog zu finden. Wer mehr Neuigkeiten dazu und zu anderen Artikeln will, kann mir einfach auf Twitter folgen: @ramisayar.

Weiteres Wissenswerte zu Node auf Azure

Ausführlichere Lehrinhalte zu Node gibt es in meinem Kurs an der Microsoft Virtual Academy.
Sehr hilfreich auch diese Kurzvideos über ähnliche Node-Themen:

Dieser Artikel ist Teil der Web Dev Tech Series von Microsoft. Wir freuen uns, das Projekt Spartan 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: http:// modern.IE.

Weitere Teile dieser Serie bei MSDN

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

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.