Node.js-Tutorium: Hello World: HTTP: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) |
||
Zeile 74: | Zeile 74: | ||
Um Benutzerdaten verarbeiten zu können, muss im Server auf das Objekt <code>p_request</code> | Um Benutzerdaten verarbeiten zu können, muss im Server auf das Objekt <code>p_request</code> | ||
zugegriffen werden | zugegriffen werden. | ||
Erstellen Sie eine Datei namens <code>hello-world-http-02</code> und füegen Sie folgenden Code ein. | |||
<source lang=" | <source lang="ecmascript"> | ||
'use strict'; | |||
</ | |||
var v_http = require('http'), // Das HTTP-Server-Paket. | |||
v_querystring = require('querystring'), // Zur Umwandlung von Benutzerdaten in JavaScript-Objekte. | |||
v_documents; // Alle HTML-Templates, die der Server als Antwort schicken kann. | |||
/* Ein HTML-Template ist ein Array, gefüllt mit HTML-Template-Strings. | |||
* Ein HTML-Template-String ist ein normaler String bestehend aus | |||
* HTML-Code, der zusätzlich ein oder mehrere Template-Strings | |||
* der Bauart "{{key}}" enthalten darf. Diese Template-Strings werden | |||
* von der Methode "m_template_to_html" durch aktuelle Daten | |||
* ersetzt, bevor der HTML-TExt an den Client (Browser) ausgeliefert | |||
* wird. | |||
*/ | |||
v_documents = | |||
{ '/': | |||
[ '<!DOCTYPE html>', | |||
'<html>', | |||
' <head>', | |||
' <title>Hallo-Server</title>', | |||
' </head>', | |||
' <body>', | |||
' <p>Hallo, Welt!</p>', | |||
' <form action="/hallo" method="post">', | |||
' <label>Ihr Name: </label>' + '<input type="text" name="user"/>', | |||
' <input type="submit" value="Begrüße mich!">', | |||
' </form>', | |||
' </body>', | |||
'</html>' | |||
], | |||
'/hallo': | |||
[ '<!DOCTYPE html>', | |||
'<html>', | |||
' <head>', | |||
' <title>Hallo-{{user}}-Server</title>', | |||
' </head>', | |||
' <body>', | |||
' <p>Hallo, {{user}}!</p>', | |||
' </body>', | |||
'</html>' | |||
], | |||
< | 'error': | ||
[ '<!DOCTYPE html>', | |||
</ | '<html>', | ||
' <head>', | |||
' <title>Hallo-Server</title>', | |||
' </head>', | |||
' <body>', | |||
' <p><strong>Die angeforderte Seite existiert nicht.</strong></p>', | |||
' </body>', | |||
'</html>' | |||
] | |||
}; | |||
/** | |||
<code> | * Extrahiert die Benutzerdaten aus <code>p_request</code> | ||
* und ruft die Callback-Funktion <code>p_callback</code> | |||
* auf, sobald dies erledigt ist. Beim Aufruf wird der | |||
* Funktion <code>p_callback</code> das erzeugte und bereinigte | |||
* Datenobjekt als einziges Argument übergeben. | |||
* | |||
* @private | |||
* @param {Object} p_request Das Request-Objekt der aktuellen HTTP-Anfrage. | |||
* @param {Function} p_callback Die Callback-Funktion, die aufgerufen wird, sobald | |||
* alle im Request-Objekt enthaltenen Daten empfangen | |||
* und extrahiert wurden. | |||
*/ | |||
function m_get_user_data(p_request, p_callback) | |||
{ var l_data_string = ''; | |||
// Nur Post-Requests dürfen Benutzerdaten enthalten. | |||
if (p_request.method === 'POST') | |||
{ p_request | |||
/* Immer, wenn ein Teil der Benutzerdaten angekommen ist, | |||
* wird der Event 'data' ausgelöst. Die neu angekommen Daten | |||
* werden zum Daten-String l_data_string hinzugefügt. | |||
* Wenn der Benutzer mehr als 1000000 Zeichen an Daten schickt, | |||
* wird die Verbindung abgebrochen. | |||
*/ | |||
.on('data', | |||
function (p_data_string) | |||
{ l_data_string += p_data_string; | |||
// Zu viele Daten => Verbindungsabbruch! | |||
if (l_data_string.length > 1000000) | |||
''' | { p_request.connection.destroy(); } | ||
} | |||
) | |||
/* Wenn alle Daten empfangen wurden, werden diese Daten | |||
* bereinigt (Kleiner- und Größerzeichen werden ersetzt), um | |||
* Cross-Site-Scripting zu verhindern. | |||
* Anschließend werden Sie mittels der Callback-Funktion p_callback | |||
* an den Aufrufer weitergeleitet. | |||
*/ | |||
.on('end', | |||
function() | |||
{ var l_data = v_querystring.parse(l_data_string); | |||
for (var k in l_data) | |||
{ if (l_data.hasOwnProperty(k)) | |||
{ l_data[k].replace(/</g, '<'); | |||
l_data[k].replace(/>/g, '>'); | |||
} | |||
} | |||
p_callback(l_data); | |||
} | |||
); | |||
} | |||
// Bei allen übrigen Requests, insbesondere Get-Requests, werden Benutzerdaten ignoriert. | |||
else | |||
{ p_callback(); } | |||
} | |||
/** | |||
* Ersetzt der Reihe nach in jedem HTML-String des HTML-Dokuments | |||
* <code>p_document</code> die Template-Parameter <code>{{KEY}}</code> | |||
* durch <code>p_data['KEY']</code> und reicht danach den modifizierten | |||
* HTML-String via <code>p_response</code> an den Clientweiter. | |||
* | |||
* @private | |||
* @param {Array} p_document Ein Array mit HTML-Template-Strings | |||
* @param {Object} p_data Ein Hasharray (Objekt) mit aktuellen Daten | |||
* @param {Function} p_response Das Response-Objekt des HTTP-Servers, | |||
* über welches der HTML-Code an den Client | |||
* geschickt wird. | |||
*/ | |||
function m_template_to_html(p_document, p_data, p_response) | |||
{ for (var i = 0, n = p_document.length; i < n; i++) | |||
{ var l_line = p_document[i]; | |||
if (p_data) | |||
{ for (var k in p_data) | |||
{ if (p_data.hasOwnProperty(k)) | |||
{ l_line = l_line.replace(new RegExp('{{' + k + '}}', 'g'), p_data[k]); } | |||
} | |||
} | |||
p_response.write(l_line+'\n'); | |||
} | |||
} | |||
* | v_http | ||
/* Der eigentliche HTTP-Server verarbeitet jede Anfrage au dieselbe Art und Weise: | |||
* 1. Ein geeigneter HTTP-Header wird an den Client geschickt. | |||
* 2. Die Benutzerdaten werden mittels m_get_user_data aus dem Request-Objekt p_request extrahiert. | |||
* 3. Sobald das zugehörige Datenobjekt via Callback-Funktion zur Verfügung steht, | |||
* werden im HTML-Template, das der Request-URL zugeordnet ist, die Template-Parameter | |||
* durch die aktuellen (bereinigten) Benutzerdaten ersetzt und das so entstandene | |||
* HTML-Dokument an den Client geschickt. | |||
*/ | |||
.createServer | |||
( function(p_request, p_response) | |||
{ p_response.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'}); | |||
m_get_user_data | |||
(p_request, | |||
function(p_data) | |||
{ m_template_to_html(v_documents[p_request.url] || v_documents.error, p_data, p_response); | |||
p_response.end(); | |||
} | |||
); | |||
} | |||
) | |||
/* Der Server lauscht auf Port 7778 auf Benutzeranfragen. */ | |||
.listen(7778); | |||
console.log("Der Server läuft unter http://localhost:7778/."); | |||
</source> | |||
==Fortsetzung des Tutoriums== | ==Fortsetzung des Tutoriums== |
Version vom 29. Oktober 2014, 15:23 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
Korrektheit: 4 (großteils überprüft) |
Umfang: 1 (zu gering) |
Quellenangaben: 5 (vollständig vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 5 (ausgezeichnet) |
Node.js-Tutorium Hello World
Übersicht: Teil 1: Konsole | Teil 2: HTTP | Teil 3: TCP
Use Cases
Es soll ein einfacher Node.js-Web-Server erstellt werden, der
unter der URL http://localhost:7777/
eine HTML-Seite mit dem
Inhalt Hallo, Welt!
als Ergebnis liefert.
Auf der Seite soll sich außerdem ein Eingabefeld und ein Butoon befinden.
Wenn der Benutzer seinen Namen eingibt und auf den Button klickt, wird
er zusätzlich mit seinem Namen begrüßt: Hallo, <BENUTZERNAME>!
.
Ein einfacher HTTP-Server, der Hallo, Welt!
ausgibt
Erstellen Sie eine Datei hello-world-http-01.js
und
fügen Sie folgenden Code ein:
'use strict';
require('http')
.createServer
( function (p_request, p_response)
{ p_response.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
p_response.write
(['<!DOCTYPE html>',
'<html>',
'<head>',
'<title>Hallo-Welt-Server</title>',
'</head>',
'<body>',
'<p>Hallo, Welt!</p>',
'</body>',
'</html>'
].join('')
);
p_response.end();
}
)
.listen(7777);
console.log("Der Server läuft und lauscht auf Port 7777.");
Führen Sie diese Datei in WebStorm oder in der Bash-Konsole auf und öffnen Sie dann
in Ihrem Browser die URL http://localhost:7777/
.
Analyse des Codes
Die Node-Bibliothek http
stellt die Methode
createServer
zur verfügung, mit der ein neuer HTTP-Server erstellt werden kann.
Ein neu erstellter Server wird gestartet, indem ihm die Nachricht listen(<POTNUMMER>)
geschickt wird.
Sobald dies geschen ist, horcht der Webserver auf Port <POTNUMMER>
(in unserem Fall 7777
)
auf HHTP-Requests. Sobald ein Browser oder sonst irgend ein Client eine derartige Anfrage schickt, wird die
Callback-Funktion aufgerufen, die bei der Definition des Servers angegeben wurde. Diese Funktion
muss zwei Parameter haben: p_request
und p_response
.
Das Objekt p_request
enthält alle Daten, die der Client an den Server schickt,
in das Objekt p_response
schreibt der Server seine antwort.
Eine Server-Antwort besteht immer aus zwei Teilen: einem HTTP-Header und einem HTTP-Content. Der HTTP-Header enthält Metainformationen:
- Den HTTP-Status-Code (z.B. 200 für „OK“ = „Die Anfrage konnte erfolgreich bearbeitet werden und das Anfrage-Ergebnis steh im Contetn-Bereich.“)
- Den
Content-Type
(z.B.text/html; charset=utf-8
) - Die
Content-Length
(die Länge der Antwort im Content-Bereich) - etc.
Der eigentliche Content ist dann eine beliebige Folge von Zeichen, in userem Fall ein HTML-Code.
Der Browser liest davon so viele Zeichen, wie im Header unter dem Attribut Content-Length
angegeben wurden.
Diese Attribut wird vom Node-HTTP-Server automatisch ermittelt.
Verarbeitung von Benutzerdaten
Um Benutzerdaten verarbeiten zu können, muss im Server auf das Objekt p_request
zugegriffen werden.
Erstellen Sie eine Datei namens hello-world-http-02
und füegen Sie folgenden Code ein.
'use strict';
var v_http = require('http'), // Das HTTP-Server-Paket.
v_querystring = require('querystring'), // Zur Umwandlung von Benutzerdaten in JavaScript-Objekte.
v_documents; // Alle HTML-Templates, die der Server als Antwort schicken kann.
/* Ein HTML-Template ist ein Array, gefüllt mit HTML-Template-Strings.
* Ein HTML-Template-String ist ein normaler String bestehend aus
* HTML-Code, der zusätzlich ein oder mehrere Template-Strings
* der Bauart "{{key}}" enthalten darf. Diese Template-Strings werden
* von der Methode "m_template_to_html" durch aktuelle Daten
* ersetzt, bevor der HTML-TExt an den Client (Browser) ausgeliefert
* wird.
*/
v_documents =
{ '/':
[ '<!DOCTYPE html>',
'<html>',
' <head>',
' <title>Hallo-Server</title>',
' </head>',
' <body>',
' <p>Hallo, Welt!</p>',
' <form action="/hallo" method="post">',
' <label>Ihr Name: </label>' + '<input type="text" name="user"/>',
' <input type="submit" value="Begrüße mich!">',
' </form>',
' </body>',
'</html>'
],
'/hallo':
[ '<!DOCTYPE html>',
'<html>',
' <head>',
' <title>Hallo-{{user}}-Server</title>',
' </head>',
' <body>',
' <p>Hallo, {{user}}!</p>',
' </body>',
'</html>'
],
'error':
[ '<!DOCTYPE html>',
'<html>',
' <head>',
' <title>Hallo-Server</title>',
' </head>',
' <body>',
' <p><strong>Die angeforderte Seite existiert nicht.</strong></p>',
' </body>',
'</html>'
]
};
/**
* Extrahiert die Benutzerdaten aus <code>p_request</code>
* und ruft die Callback-Funktion <code>p_callback</code>
* auf, sobald dies erledigt ist. Beim Aufruf wird der
* Funktion <code>p_callback</code> das erzeugte und bereinigte
* Datenobjekt als einziges Argument übergeben.
*
* @private
* @param {Object} p_request Das Request-Objekt der aktuellen HTTP-Anfrage.
* @param {Function} p_callback Die Callback-Funktion, die aufgerufen wird, sobald
* alle im Request-Objekt enthaltenen Daten empfangen
* und extrahiert wurden.
*/
function m_get_user_data(p_request, p_callback)
{ var l_data_string = '';
// Nur Post-Requests dürfen Benutzerdaten enthalten.
if (p_request.method === 'POST')
{ p_request
/* Immer, wenn ein Teil der Benutzerdaten angekommen ist,
* wird der Event 'data' ausgelöst. Die neu angekommen Daten
* werden zum Daten-String l_data_string hinzugefügt.
* Wenn der Benutzer mehr als 1000000 Zeichen an Daten schickt,
* wird die Verbindung abgebrochen.
*/
.on('data',
function (p_data_string)
{ l_data_string += p_data_string;
// Zu viele Daten => Verbindungsabbruch!
if (l_data_string.length > 1000000)
{ p_request.connection.destroy(); }
}
)
/* Wenn alle Daten empfangen wurden, werden diese Daten
* bereinigt (Kleiner- und Größerzeichen werden ersetzt), um
* Cross-Site-Scripting zu verhindern.
* Anschließend werden Sie mittels der Callback-Funktion p_callback
* an den Aufrufer weitergeleitet.
*/
.on('end',
function()
{ var l_data = v_querystring.parse(l_data_string);
for (var k in l_data)
{ if (l_data.hasOwnProperty(k))
{ l_data[k].replace(/</g, '<');
l_data[k].replace(/>/g, '>');
}
}
p_callback(l_data);
}
);
}
// Bei allen übrigen Requests, insbesondere Get-Requests, werden Benutzerdaten ignoriert.
else
{ p_callback(); }
}
/**
* Ersetzt der Reihe nach in jedem HTML-String des HTML-Dokuments
* <code>p_document</code> die Template-Parameter <code>{{KEY}}</code>
* durch <code>p_data['KEY']</code> und reicht danach den modifizierten
* HTML-String via <code>p_response</code> an den Clientweiter.
*
* @private
* @param {Array} p_document Ein Array mit HTML-Template-Strings
* @param {Object} p_data Ein Hasharray (Objekt) mit aktuellen Daten
* @param {Function} p_response Das Response-Objekt des HTTP-Servers,
* über welches der HTML-Code an den Client
* geschickt wird.
*/
function m_template_to_html(p_document, p_data, p_response)
{ for (var i = 0, n = p_document.length; i < n; i++)
{ var l_line = p_document[i];
if (p_data)
{ for (var k in p_data)
{ if (p_data.hasOwnProperty(k))
{ l_line = l_line.replace(new RegExp('{{' + k + '}}', 'g'), p_data[k]); }
}
}
p_response.write(l_line+'\n');
}
}
v_http
/* Der eigentliche HTTP-Server verarbeitet jede Anfrage au dieselbe Art und Weise:
* 1. Ein geeigneter HTTP-Header wird an den Client geschickt.
* 2. Die Benutzerdaten werden mittels m_get_user_data aus dem Request-Objekt p_request extrahiert.
* 3. Sobald das zugehörige Datenobjekt via Callback-Funktion zur Verfügung steht,
* werden im HTML-Template, das der Request-URL zugeordnet ist, die Template-Parameter
* durch die aktuellen (bereinigten) Benutzerdaten ersetzt und das so entstandene
* HTML-Dokument an den Client geschickt.
*/
.createServer
( function(p_request, p_response)
{ p_response.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
m_get_user_data
(p_request,
function(p_data)
{ m_template_to_html(v_documents[p_request.url] || v_documents.error, p_data, p_response);
p_response.end();
}
);
}
)
/* Der Server lauscht auf Port 7778 auf Benutzeranfragen. */
.listen(7778);
console.log("Der Server läuft unter http://localhost:7778/.");
Fortsetzung des Tutoriums
Sie sollten nun Teil 3 des Tutoriums bearbeiten.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)