Metainformationen zur Seite
  •  

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
computer:basteln:nodejs [2014/09/21 17:29]
gaubes [Einbinden von HTML-Dateien]
computer:basteln:nodejs [2018/03/16 21:11] (aktuell)
Zeile 23: Zeile 23:
  
 Bei zukünftigen Downloades kann die Versionsnummer natürlich abweichen. Bei zukünftigen Downloades kann die Versionsnummer natürlich abweichen.
-<br>+
 Kompilieren lässt sich das ganze folgendermaßen:​ Kompilieren lässt sich das ganze folgendermaßen:​
 <​code>​./​configure <​code>​./​configure
Zeile 35: Zeile 35:
 <​code>/​usr/​local/​bin/​node <​code>/​usr/​local/​bin/​node
 </​code>​ </​code>​
-Für npm analog dazu:+Für npm (node package manager) ​analog dazu:
 <​code>/​usr/​local/​bin/​npm <​code>/​usr/​local/​bin/​npm
 </​code>​ </​code>​
 +Der npm dient dazu, Module von node.js zu installieren.
  
-Eine Hello-World-Seite lässt sich folgendermaßen auf den Localhost bringen: +Eine Hello-World-Seite lässt sich folgendermaßen auf den Localhost bringen ​(bis zum Neustart)
-<​code>​+<​code ​javascript>
  
 var http = require('​http'​);​ var http = require('​http'​);​
Zeile 60: Zeile 61:
 // Gibt einen Text nach Ausführung in der Konsole aus. // Gibt einen Text nach Ausführung in der Konsole aus.
 </​code>​ </​code>​
 +Alternativ zu den Konsolen, lässt sich der Code auch in einer .js-Datei speichern und mit node aufrufen:
 +<​code>​node testdatei.js </​code>​
 +Hierbei befindet sich die Testdatei im rootverzeichnis von nodejs oder es wird der relative Dateipfad benötigt.
 ===== Einbinden von HTML-Dateien ===== ===== Einbinden von HTML-Dateien =====
 Node.js bringt von sich aus das Template Jade mit, welches Html-Dateien erzeugen soll, jedoch eine etwas andere, weil verkürzte, Syntax hat als "​normales"​ HTML. Node.js bringt von sich aus das Template Jade mit, welches Html-Dateien erzeugen soll, jedoch eine etwas andere, weil verkürzte, Syntax hat als "​normales"​ HTML.
Zeile 94: Zeile 98:
 Dabei wird klar, dass sich in Jade beispielsweise Variablen, Schleifen einfügen lassen, ohne eine zusätzliche Sprache benutzen zu müssen, im Gegensatz zu Html und, dass der Code insgesamt etwas kürzer ist (Im Beispiel bedingt durch Arrays und Schleifen und der generellen Syntax, da kein </​head>​ bzw. kein </​body>​ benötigt wird). Dabei wird klar, dass sich in Jade beispielsweise Variablen, Schleifen einfügen lassen, ohne eine zusätzliche Sprache benutzen zu müssen, im Gegensatz zu Html und, dass der Code insgesamt etwas kürzer ist (Im Beispiel bedingt durch Arrays und Schleifen und der generellen Syntax, da kein </​head>​ bzw. kein </​body>​ benötigt wird).
 Wer jedoch bereits eine Html-Datei hat und diese nicht extra umschreiben möchte, oder einfach keine Zeit hat eine neue Syntax zu lernen, der kann seine Html-Datei problemlos in Node.js einbinden: Wer jedoch bereits eine Html-Datei hat und diese nicht extra umschreiben möchte, oder einfach keine Zeit hat eine neue Syntax zu lernen, der kann seine Html-Datei problemlos in Node.js einbinden:
-<​code>​+<​code ​javascript>
  
 var fs         = require('​fs'​);​ // objekttyp bspw. '​http'​ oder '​net'​ var fs         = require('​fs'​);​ // objekttyp bspw. '​http'​ oder '​net'​
Zeile 111: Zeile 115:
  
 Hierbei ist jedoch zu beachten, dass '​test.html'​ im Rootverzeichnis des Nodeservers liegt oder man einen relativen Pfad angeben muss. Hierbei ist jedoch zu beachten, dass '​test.html'​ im Rootverzeichnis des Nodeservers liegt oder man einen relativen Pfad angeben muss.
 +
 +===== Synchronisationsfunktion =====
 +Manchmal möchte man an einer Seite mit anderen Zusammenarbeiten. Das ganze am besten von zu Hause aus und jeder an seinem eigenen Rechner. Dazu gibt es bei node.js eine Synchronisationsfunktion.
 +Dazu ein kleines Beispiel:
 +<code javascript>​
 +// Asynchrones Lesen
 +var filesystem = require("​fs"​);​
 +filesystem.readFile("​text.txt",​ "​utf8",​ function(error,​ data) {
 +    console.log(data);​
 +});
 +
 +// Synchrones Lesen
 +var filesystem ​ = require("​fs"​);​
 +var data = filesystem.readFileSync("​text.txt",​ "​utf8"​);​
 +console.log(data);​
 +
 +</​code>​
 +Bei der ersten Version wird das ganze Dokument geladen und schließlich am Ende der Textinhalt in der Konsole ausgegeben.
 +Bei der zweiten Variante hingegen wird der Text synchronisierend geladen, so dass die Reihenfolge wie im Script ausgegeben wird.
 +
 +==== Socket.io ====
 +
 +Um eine Aktualisierung eines Dokumentes, wie dieses etwa beim [[https://​www.ratsgymnasium-pe.de/​intern/​etherpad/​|Etherpad]] der Fall ist, so benötigt man [[http://​socket.io| Socket.io]]. Socket.io aktualisiert eine Seite automatisch,​ aber nur, wenn eine Aktualisation notwendig ist.
 +
 +Installieren lässt sich dies über den **N**ode **P**ackage **M**anager (npm):
 +<​code>​npm install socket.io </​code>​
 +
 +=== Hello World ===
 +<code javascript>​
 +// HTTP-Server auf Port 8080
 +var app = require('​http'​).createServer(serveStaticIndex).listen(8080);​
 + 
 +// Laden von Socket.io:
 +//(Gibt für die Demo nur Fehler/​Warnungen auf der Konsole aus)
 +var io = require('​socket.io'​).listen(app).set('​log level',​ 1);
 + 
 +// Zugriff auf das Dateisystem (zum Ausliefern der index.html)
 +var fs = require('​fs'​);​
 + 
 +// Liefert die Startseite aus
 +function serveStaticIndex(req,​ res) {
 +  var fileStream = fs.createReadStream(__dirname + '/​index.html'​);​
 +      res.writeHead(200);​
 +      fileStream.pipe(res);​
 +}
 + 
 +// Socket.io-Events
 +io.sockets.on('​connection',​ function (socket) { // wartet und reagiert auf Event
 +  console.log('​[socket.io] Ein neuer Client (Browser) hat sich verbunden.\n'​);​
 + 
 +  console.log('​[socket.io] SENDE "​welcome"​-Event an den Client.\n'​);​
 +  socket.emit('​welcome',​ "Hello world"​); ​       //löst einen Event aus
 +                                                // soll Nachricht an alle Clients gesendet werden so muss 
 +                                                //​io.socket.emit() ausgeführt werden
 +                                            ​
 +  socket.on('​user agent',​ function (data) {
 +    console.log('​[socket.io] EMPFANGE "user agent"​-Event vom Client:'​);​
 +    console.log(data,​ '​\n'​);​
 +  });
 +});
 +
 +</​code>​
 +Die Konsole des Browsers und der Kommandozeilenausgabe im Terminal zeigen daraufhin die Nachrichten an, die zwischen Client und Server übermittelt werden. ​
 +Sobald die Seite im Browser aufgerufen wird, erhält der Server darüber eine Benachrichtigung und sendet seinerseits eine Nachricht zurück an den Client, der daraufhin seinen User Agent-String als Beispiel wieder an den Server zurückschickt.
 +
 +Möchte man also Kommunizieren via Chat (auch Gruppenchat),​ Online-Spiele (Position der Spieler) oder andere Sachen, die zeitgleich aktualisierte Informationen an mehrere Endnutzer benötigen, programmieren,​ so bietet sich Socket.io an.
 +
 +===== Eigene Module =====
 +Natürlich kann man sich Module, die man gerne benutzen möchte auch selbst schreiben und einbinden. ​
 +Dazu werden in einer .js-Datei, die Dinge gespeichert,​ die übergeben werden sollen, also bpsw. Funktionen und/oder Variablen. Wichtig dabei ist es allerdings, dass man, was man übergeben will, auch exportiert. Dabei gibt es folgende Möglichkeiten:​
 +<code javascript>​
 +var hobby = '​sport';​
 +var multiplyBy2= function(n){
 +    return n*2;
 +};
 +
 +var multiplyBy10 = function (n){
 +    return n*10;
 +};
 +
 +exports.hobby = hobby;
 +exports.malZehn = multiplyBy10;​
 +</​code>​
 +
 +Würde man dieses nun einbinden, so wird die Funktion, die hier als ''​multiplyBy10''​ benannt wurde als ''​malZehn''​ importiert und die Funktion ''​multiplyBy2''​ wird nicht importiert.
 +Eine Datei namens multiplier.js lässt sich (abhängig vom Dateipfad) folgendermaßen einbinden_
 +<code javascript>​
 +var m = require('​./​multiplier.js'​);​
 +</​code>​
 +Mit dem erzeugten ''​m''​ lassen sich nun der Exportierte Inhalt der multiplier.js-Datei benutzen.
 +Dies lässt sich in der Node-Konsole ganz einfach testen:
 +<code javascript>​
 +m // Enter drücken
 +
 +<hobby : '​sport', ​          //​Ausgabe
 + ​malZehn:​ [Function]>​
 +//​--------------------
 +
 +m.multiplyBy2 ​              // Enter drücken
 +undefined ​                  //​Ausgabe
 +//​--------------------
 +
 +m.hobby ​                    // Enter drücken
 +'​sport' ​                    //​Ausgabe
 +
 +</​code>​
 +Hierbei sieht man, dass wirklich nur die Exporte auf m anwendbar sind. Weiter fällt auf, dass sich damit auch Assoziative Felder erstellen lassen.
 +Führt man mehrmals hintereinander den require-Befehl auf die gleiche Variable, so fällt auf bspw. mit nem ''​console.log()''​),​ dass diese Variable nur einmal und nicht jedesmal überschrieben wird.
 +Eine weitere Möglichkeit,​ die das Export von oben überschreibt ist Folgende:
 +<code javascript>​
 +module.exports = {
 +    hobby : hobby,
 +    malZehn : multiplyBy10,​
 +    test : function(){
 +        console.log('​test'​);​
 +    }
 +}
 +</​code>​
 +
 +Wäre vorher im Code etwas anderes Exporttiert werden, wie etwa die ''​multiplyBy2''​-Funktion,​ so würde ''​module.exports''​ dieses überschreiben,​ so dass es schließlich nicht mehr, da nicht enthalten, exportiert wird.
 +Dieses lässt sich ebenfalls wie oben mittels Node-Kosole analog testen.