Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Moderne Webanwendungen mit Node.js und Express.js

Der erste Webserver

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Sehen Sie hier, wie Sie mit einfachen Bordmitteln ohne externe Bibliotheken auf Basis von Node den ersten Webserver aufbauen.

Transkript

Aller Anfang ist schwer, aber nicht unbedingt mit Node.js. Mit meiner Hilfe entwickeln Sie innerhalb der nächsten Minuten Ihren ersten Webserver. Dabei werden Sie statische Dateien auf Ihrer Festplatte ausliefern und über verschiedene Routen entsprechend unterschiedlichen Inhalt bereit stellen. Ich befinde mich nun in meiner Entwicklungsumgebung. Hier liegt mir mein Web-Projekt vor, das bereits aus statischen Dateien definiert ist: Einer "index.html", die die Hauptseite ausliefert, zwei Bildern und einer "404.html", die antwortet, falls der entsprechende Inhalt nicht vorliegt. Meinen Code für die Anwendung schreibe ich nun in die "index.js"-Datei. In WebStorm empfiehlt es sich, für das Schreiben von Anwendungen mit Node.js entsprechend hier die vordefinierten Node.js-Globals zu aktivieren, sodass am Ende die Node.js-Coremodule geladen sind. Jede JavaScript-Datei in Node.js beginnt damit, die Abhängigkeiten zu definieren. In diesem Fall benennt man die Abhängigkeiten im Regelfall immer so wie auch die Bibliothek, die man lädt, heißt. Das bedeutet, wenn ich die Abhängigkeit "http" über den Befehl "require" lade, nenne ich auch entsprechend die Variable, die HTTP repräsentiert, "http". Das Gleiche für "fs", für File System. Beide werde ich gleich benötigen, um einerseits Dateien von der Festplatte zu laden, diese Inhalte, und über HTTP für den Browser bereit zu stellen. Als nächstes muss ich mir nun eine Hilfsfunktion definieren, die mir dabei hilft, Daten von der Festplatte zu lesen. Innerhalb dieser Hilfsfunktion nehme ich entgegen zum einen die Antwort, die ich später vom Server aus schicken möchte, zum anderen den Pfad als auch den Content-Typ, der dem Browser letztendlich dargestellt wird. Als nächstes benötige ich nun eine Antwortnummer, das bedeutet: Der Response Code, der dem Browser sagt, ob die Anfrage erfolgreich war oder nicht. Anhand des Pfades möchte ich nun von der Festplatte entsprechend meine Dateien laden. Hierfür verwende ich den Befehl "fs.readFile", eine Methode, die für das Dateisystem von Node.js bereitgestellt wird. Als nächstes muss ich nun den Pfad bestimmen, an dem sich die Dateien befinden. Diese befinden sich zum einen in der Variable "Pfad" und zum anderen der Pfad, der zum Hauptordner dieses Projektes führt. In Node.js gibt es eine globale Konstante, die sich als "_dirname" bezeichnet. Diese zeigt auf den aktuellen Ordner, in dem die JavaScript-Datei ausgeführt wird. Als nächstes muss ich nun eine Funktion bestimmen, die entsprechend mit dem Inhalt umgeht. Anhand dieser Funktion werde ich nun den Inhalt der Seite entsprechend zurückgeben und aus dem Dateisystem auslesen. Zum einen gehe ich nun mit einem Fehler um. Sollte quasi ein Fehler aufgetreten sein beim Lesen der Datei, so melde ich dem Browser die Meldung "500" und "Internal server error". Als nächstes, sollte der Teil korrekt gelesen worden sein, nehme ich den "Response Code 200", also eine korrekte Antwort, den Content Type, der entsprechend als Variable übergeben worden ist, und zu guter Letzt die Daten, die aus der Datei gelesen wurden, und übertrage sie an den Web-Browser. Als nächstes muss ich nun den HTTP-Server erstellen. Mit "http.createServer" und einer Funktion, die entsprechend eine Antwort entgegennimmt, definiere ich nun den Eingang, also die Anfrage, als auch die Rückgabe, die Response. Um als nächstes festzustellen, wo der Nutzer tatsächlich hinwollte, empfiehlt es sich, die entsprechende Anfrage-URL auszulesen mithilfe eines sogenannten regulären Ausdrucks. Dieser reguläre Ausdruck an dieser Stelle sorgt dafür, dass die gesamte URL entfernt wird und nur noch der Pfad zum Schluss stehen bleibt. Wenn ich also beispielsweise eine URL habe wie "http.//www.google.de/test", so erhalte ich nach diesem "replace" lediglich nur noch den Hinweis auf "test". Mit dieser Angabe kann ich nun weiter prüfen, welche Dateien zu laden sind. Mithilfe von "switch" gehe ich nun verschiedene Fälle durch, die der Pfad enthalten kann. Beispielsweise, wenn kein Pfad gegeben ist, nutze ich nun die vorher definierte Funktion um auf dem Ordner "app" die Datei "index.html" auszulesen und als "text/html" an den Browser zurückzuspielen. Analog funktioniert das für die restlichen Fälle. Beispielsweise wenn ich die "logo.jpg" abfrage, lade ich entsprechend die "logo.jpg" aus dem "IMG"-Ordner und gebe den Content-Typ "image/jpeg" zurück. Für alle anderen Fälle, das bedeutet, es wurde kein Pfad gefunden, wird die "404.html" zurückgegeben. Als nächstes schließe ich noch den "Switch" und teile dem Server mit, dass er auf dem Port 80 entsprechend diese Website bereitstellen soll. Mit der Operation "console.log" teile ich mir selbst noch mit, dass der Server gestartet wurde und bereit ist zu arbeiten. Wenn ich diese Anwendung nun starte, erhalte ich die Rückmeldung "Server started" und im Browser kann ich nun entsprechend die Seite aufrufen. Auf "localhost" erhalte ich die "index.html" samt Bild. Rufe ich nun einen beliebigen Pfad darunter auf, wie beispielsweise "test", so erhalte ich die 404-Seite. Was hier noch auffällt: Im Falle von 404 gebe ich nicht den Fehler-Code 404 an den Browser zurück. Um das zu beheben, begebe ich mich zurück in die Entwicklungsumgebung und betrachte nun meine "readStaticFileToRes"-Funktion. Ich kann hier einen zusätzlichen Parameter entgegennehmen, beispielsweise den Response Code. Ich tausche entsprechend auf dem Response-Objekt den Response Code aus und nur im Falle, dass der Response Code nicht definiert ist, wie er bis jetzt in den meisten Fällen meiner Funktionen ist, setze ich den Response Code auf den Wert 200. Jetzt habe ich die Möglichkeit, lediglich im Falle der "404.html" zusätzlich den Parameter "404" zu spezifizieren um den Response Code entsprechend anzupassen. In den letzten Minuten haben Sie also gesehen, wie Sie statische Dateien von der Festplatte lesen können. Dabei hat Ihnen "_dirname" als globale Konstante geholfen, um den Pfad der Anwendung zu bestimmen und entsprechende Dateien zu finden. Mithilfe von Routing haben Sie den Pfad über einen regulären Ausdruck bestimmt und konnten so diverse Content-Typen an Dateien, beispielsweise JPEGs oder auch HTML an den Nutzer Ihrer Website senden. Mithilfe von Response Codes konnten Sie weiterhin ausdrücken, ob eine Anfrage korrekt oder inkorrekt war.

Moderne Webanwendungen mit Node.js und Express.js

Entwickeln Sie auf der Open-Source-Plattform Node.js kompakte und performante Webapplikationen und lernen Sie weiterführende Konzepte professioneller Webentwicklung kennen.

2 Std. 20 min (24 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.03.2015

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!