[MUSIC]
Dans cet exercice, nous allons explorer certains des modules de code Node.
En particulier, nous allons examiner le module HTTP qui est intégré dans Node et
utiliser le module HTTP pour configurer et démarrer un serveur Web simple.
Nous allons également examiner comment nous pouvons servir des fichiers statiques à partir de notre serveur HTTP Node.
Nous allons également examiner ce module de système de fichiers et le module de chemin et
comment ils peuvent nous aider à servir des fichiers statiques dans notre serveur HTTP basé sur des nœuds.
Examinons donc certains des modules Node de code dans cet exercice.
Pour commencer cet exercice, accédez à un emplacement pratique sur votre ordinateur.
Nous allons donc aller dans le dossier NodeJS que nous avons déjà créé dans l'un
des exercices précédents.
Et dans le dossier NodeJS, je vais créer un nouveau dossier nommé node-http.
Et puis, nous allons configurer cela comme une application Node.
En outre, en se déplaçant dans le dossier node-http,
créons un sous-dossier nommé public qui continuera
certains des fichiers html que nous allons serveur à partir de notre application HTTP Node.
Maintenant, passez à un terminal, naviguez jusqu'au nœud,
dossier -http.
Et nous allons initialiser ce dossier pour être dans notre application.
Donc, nous allons commencer par npm init et
initialiser ce paquet dans notre fichier JSON ici.
Et puis nous donnerons le nom du paquet comme node-http et
accepterons la version standard, et
la description est Node HTTP Module Exemple.
Et le point de départ est index.js, pas de commande de test,
pas de dépôt git pour le moment, et auteur,
tapez votre nom, et acceptez le reste tel quel.
Et cela devrait créer le paquet pour un fichier manifeste JSON.
Maintenant, ouvrons ce projet dans notre éditeur préféré.
Alors laissez-moi démarrer mon code Visual Studio dans ce dossier.
Et dans le code Visual Studio, passons au package dans notre fichier JSON.
Et puis nous allons ajouter un autre script au paquet,
à notre fichier JSON appelé start et
qui exécuterait l'index de noeud.
Et n'oubliez pas de mettre une virgule après l'attelage de test.
Et enregistrez les modifications apportées au fichier package.json.
Maintenant, où Project,
créez un nouveau fichier appelé index.js.
Nous allons configurer ce index.js pour utiliser le module HTTP Node.
Donc, dans ce fichier, tapez const
http = require (« http »).
Donc, vous pouvez voir que nous utilisons le module de code HTTP, et
nous l'exigeons simplement en spécifiant le nom du module de code HTTP là.
En outre, déclarons,
Un couple de constantes ici et puis,
Nous appellerons hostname et
le numéro de port comme 3000 par défaut.
Maintenant, nous allons configurer le serveur.
Pour configurer le serveur, nous dirons const server = http.
Le module HTTP prend en charge une méthode appelée CreateServer,
donc ils vont utiliser la méthode CreateServer sur cela.
Cette méthode CreateServer prendra une fonction comme paramètre et
cette fonction prend deux
valeurs comme paramètres, requête et réponse.
Et comme vous pouvez le voir, j'écris une fonction de flèche ici.
Donc, la requête et la réponse sont les deux paramètres de la fonction que nous fournissons en
tant que paramètre à la méthode CreateServer ici.
Et à l'intérieur de cela, nous dirons
console.log (req.headers).
Donc ici, les req et res sont la requête HTTP entrante au serveur.
Et ils ont une sorte d'objet de réponse qui va
être construit par ce serveur et retourné au client
qui se connecte à ce serveur HTTP que nous créons ici.
Donc, la requête est la requête entrante de n'importe quel navigateur ou
de n'importe où qui essaie d'accéder à ce serveur que nous allons démarrer
en utilisant cette application HTTP Node que nous développons ici.
Donc, à partir de
la requête, l'objet de requête nous donne accès aux en-têtes dans la requête HTTP entrante.
Donc, je vais enregistrer les
en-têtes entrants de la requête HTTP entrant en utilisant ce console.log.
Juste pour mon information, juste pour savoir d'où vient cette demande.
Par la suite, nous pouvons construire la réponse en utilisant la res et
cela nous fournira une méthode appelée StatusCode.
Le StatusCode nous permettra de configurer le StatusCode pour le message de réponse.
Donc, dans ce cas, je vais configurer le StatusCode comme 200.
Si vous vous souvenez de la discussion précédente sur l'essentiel de la mise en réseau,
vous saurez que StatusCode de 200 signifie que tout va bien.
Et donc, nous avons configuré le code d'état ici pour le message de réponse
, puis nous allons également configurer l'en-tête pour le message de réponse.
Et l'une des craintes d'en-tête que nous allons
mettre en place est appelée Content-Type.
Et le Content-Type,
nous allons spécifier ceci pour être 'text/html'.
Ainsi, le corps de la réponse contiendra les données sous la forme de html ici.
Ainsi, l'en-tête est configuré pour informer le client que vous envoyez
la réponse et le corps est formaté au format html.
Et puis, enfin, nous dirons res.end (').
Donc, cela met fin à la réponse ici, et lorsque cela est fait,
cette information sera renvoyée au client.
Donc ici, laissez-moi juste construire une page html en ligne ici,
donc je vais dire <Bonjour,
Monde ! .
Et fermez la balise h1, la balise body,
et la balise html, juste là.
Et c'est une réponse HTML valide qui peut
être renvoyée de notre serveur ici.
Donc, ce serveur, comme vous vous attendez à aller simplement envoyer un monde bonjour au client.
Maintenant que nous avons configuré le serveur, nous devons démarrer ce serveur.
Pour démarrer ce serveur en note,
nous devons dire server.listen.
Et cela va démarrer le port d'écoute sur lequel le serveur va écouter les
demandes entrantes.
Et cela commencerait au numéro de port donné à mon port,
que nous avons déjà mis en place ici dans le port const.
Et le deuxième paramètre est le nom d'hôte que nous avons déjà configuré plus tôt.
Et le troisième paramètre est une fonction qui sera
exécutée lorsque le serveur démarre.
Dans cette fonction, nous allons juste imprimer les informations sur le serveur.
Donc ici, je vais juste dire console.log.
Et dans le console.log,
je vais imprimer les informations afin d'utiliser une citation arrière.
Donc, notez l'utilisation de la citation arrière pas la citation normale.
La raison pour laquelle nous utilisons cela est parce que nous allons utiliser
quelques variables à l'intérieur de la chaîne que nous allons construire ici.
Donc, nous dirons le serveur fonctionnant à http ://.
Et puis nous dirons $
, puis le nom de l'hôte.
Rappelons que ce nom d'hôte, vous avez déjà déclaré plus tôt.
Et puis la deuxième partie,
nous dirons : $ et port.
Ces deux valeurs seront donc remplacées par les valeurs correspondantes.
Et puisque nous l'enfermons dans les guillemets arrière.
Et si vous incluez quelque chose à l'intérieur des augmentations de dollar,
qui sera remplacé par sa valeur dans cette chaîne ici.
C' est ça.
Nous avons un serveur HTTP simple en marche.
Donc, sauvegardons les changements à cela.
Et nous allons lancer notre application et voir ce qu'elle sert.
Aller au terminal, tapez npm start, et
cela devrait démarrer notre application.
Et nous remarquons qu'il imprime notre disant que le serveur fonctionnant
à http://localhost:3000.
Vous pouvez maintenant accéder à cette URL en la tapant dans la barre d'adresse de n'importe quel navigateur.
Alors laissez-moi commencer une fenêtre de navigateur Chrome, puis tapez ceci et
voir ce que le serveur va retourner.
Démarrage d'une nouvelle fenêtre.
Laissez-moi simplement taper http ://
localhost:3000.
Et cela devrait rendre un Hello World comme nous l'attendons.
Maintenant, lorsque nous allons à la console, vous voyez que sur la console il y a
des détails de l'en-tête des requêtes entrantes est imprimé ici.
Certaines choses sont très faciles à localiser ici.
Donc, c'est l'hôte, localhost:3000, et vous voyez aussi que le « user-agent »
est réglé sur « Chrome » ici, la version Chrome que j'utilise ici.
C' est donc une illustration intéressante du message de requête HTTP.
Et ce qui est contenu dans l'en-tête du message de requête qui est venu ici.
Tellement intéressant d'observer ce que votre sever est
en train d'imprimer sur l'écran ici.
Avec cela, nous terminons la première moitié de cet exercice.
Maintenant, nous pouvons initialiser cette application dans un dépôt Git,
puis enregistrer les modifications dans le dépôt Git.
Alors allons-y et faisons-le ensuite.
Au type d'invite, obtenez init, et qui a initialisé le référentiel.
Et puis nous dirons git status et vous verrez que ces deux fichiers sont nouveaux.
Donc, nous allons dire git add.
Et faites git commit
-m « Node HTTP Exemple 1".
Et puis vérifiez ceci dans notre dépôt Git.
Maintenant encore un autre outil qui est très utile
lorsque nous regardons des applications côté serveur est appelé Postman.
Maintenant Postman se présente sous la forme d'une extension de navigateur Chrome ou
d'un outil autonome que vous pouvez télécharger et installer sur votre ordinateur.
Donc, pour ce faire, dans notre navigateur, tapez http.
getpostman.com.
Et puis c'est là que vous pouvez obtenir l'
outil Postman pour votre système d'exploitation spécifique et l'installer.
L' outil Postman vous permet de créer des requêtes HTTP, puis de les envoyer.
Et cela vous donne également la flexibilité de configurer les en-têtes de
votre requête HTTP avant de l'envoyer.
Et puis, lorsque la réponse revient, vous pouvez examiner la réponse,
y compris les en-têtes de la réponse qui revient du côté serveur.
Donc, je trouve Postman très utile.
Il y a quelques autres outils comme celui-ci,
mais Postman semble être le meilleur sur le marché en ce moment.
Donc je vais utiliser Facteur pendant le reste de ce cours.
Si vous ne voulez pas l'installer,
vous pouvez également installer l'extension de navigateur Chrome de Postman, puis l'utiliser.
Je vais télécharger la version macOS de Postman
, puis l'installer sur ma machine, puis en faire usage.
Une fois que vous avez le Postman, soit la version autonome ou
l'extension de navigateur Chrome installé, vous pouvez le démarrer.
Et vous verrez que l'interface utilisateur est plus ou moins la même pour
la version standard et aussi pour l'extension du navigateur Chrome.
Et une fois que vous avez le Facteur opérationnel,
tapez dans la zone URL de requête,
localhost:3000.
Et envoyez la demande à vous-même.
Assurez-vous que votre serveur HTTP Node est opérationnel.
Ainsi, lorsque vous envoyez la requête,
vous obtiendrez immédiatement une réponse du serveur avec le code HTML ici.
Maintenant, l'avantage, comme vous le voyez,
avec l'utilisation de Postman est que vous pouvez voir le corps réel du message.
Vous pouvez également regarder les en-têtes pour voir ce qui a été renvoyé par le serveur.
Vous pouvez également configurer beaucoup de détails dans Postman lorsque vous envoyez.
Demande du serveur.
Maintenant, beaucoup d'entre eux peuvent ne pas être très facile à faire en utilisant une fenêtre de navigateur standard.
C' est donc la raison pour laquelle je préfère utiliser [INAUDIBLE] pour
générer les requêtes HTTP sur mon serveur.
Et puis en observant la réponse qui revient du côté serveur.
Notez également qu'il affiche le code d'état ici et d'autres informations sur
la requête et le temps de réponse du côté serveur.
Maintenant que nous avons créé son serveur HTTP basé sur un nœud simple,
étendons-le plus loin, créons quelques fichiers HTML dans le dossier public.
Nous l'appellerons comme index.html.
Et puis aussi aboutus.html,
puis incluez simplement quelques informations sur les os nus ici.
Donc, nous allons dire html, et
le titre comme Ceci est index.html.
Et puis nous allons taper le corps de la page html.
Dites h1 Index.html et
le corps, puis c'est
le contenu de ce fichier.
Un peu de code html de base ici, laissez-moi copier ceci et
puis coller également dans la page aboutus.html.
Et le contenu du fichier aboutus.html, c'est tout.
Nous venons de créer deux pages HTML, et ce
sont des pages HTML statiques que nous avons créées dans le dossier public.
Maintenant, pouvons-nous configurer notre serveur HTTP nœud pour pouvoir servir des pages statiques ?
C' est donc ce que nous allons configurer dans la deuxième partie de cet exercice.
Donc, en revenant au fichier index.js,
en plus du module de code HTTP,
je vais également importer le module de code du système de fichiers.
Et ce module de code de chemin.
Le chemin d'accès vous permet de spécifier la partie d'un fichier dans votre système de fichiers local.
Le module système de fichiers vous permet de lire et d'
écrire des fichiers à partir de votre système de fichiers local.
Donc, avec cela, ils diront serveur constant, http.CreateServer.
Pour le journal de la console, au lieu de taper des en-têtes de requête entiers,
je vais simplement taper des informations suffisantes, donc
je dirai, Request for,
Juste l'URL de cette requête.
Par méthode.
Donc, la méthode serait soit obtenir le port post ou supprimer les méthodes.
Donc, cela va enregistrer cette information.
Maintenant, ce que nous allons faire, c'est au lieu d'envoyer
cette réponse, la réponse standard « hello world ».
Ici, nous allons examiner la méthode et
ensuite nous dirons si req.method est égal à GET.
Nous ne servirons donc que les requêtes GET dans cet exemple.
Sinon, nous dirons qu'il y a un if.
Donc, s'il y a une requête GET qui entre,
alors nous allons examiner,
L'URL qui entre,
donc nous dirons si req.url est/,
nous dirons FileURL égal à html.
Donc, si vous n'obtenez pas un nom de fichier spécifique mais
vous envoyez simplement la requête au code hôte local 3000.
Il sera par défaut index.html,
sinon il dira FileURL est égal à req.url.
Donc, de cette façon, vous avez construit quel fichier au serveur.
Maintenant, nous allons dire que nous allons trouver le chemin du fichier,
nous allons dire chemin, Resolve,
donc le module de chemin prend en charge cette méthode de résolution, donc cela va
traduire cela dans le fichier de dossiers de chemin à part entière,
le fichier que nous venons de construire,
le FileURL que nous venons de construire.
Donc, cela nous donnera le chemin complet pour le fichier,
puis nous dirons FileExtension constante.
Donc, si vous voulez vous assurer que
l'extension de nom de fichier est HTML.
Donc, à partir du FilePath,
nous allons examiner l'extension de nom de fichier et
ensuite nous dirons si FileExt ==.
Donc, si c'est un fichier HTML, alors nous savons comment le servir à partir de cette
relation particulière du serveur HTTP nœud.
Donc, nous dirons si l'extension de fichier est HTML, alors nous savons que
le fichier est un fichier HTML et nous avons les deux fichiers, index et aboutus.html.
Donc, nous allons vérifier si ce fichier existe, donc
nous allons dire si le fichier existe, FilePath.
Donc, la méthode exists vérifiera si le fichier existe,
donc nous dirons fs.exists (FilePath),
et celui-ci prendra
comme deuxième paramètre, une fonction de rappel.
Notez donc l'utilisation de la première fonction de rappel dans notre exemple.
Donc, cette fonction de rappel sera appelée avec ce paramètre existe dedans.
Donc, à l'intérieur de ce paramètre de rappel, cela existe sera soit vrai, soit faux.
C' est donc le paramètre de retour pour cette fonction de rappel.
Donc ici, Nous allons vérifier, et
nous dirons si ( ! existe), ce
qui signifie que le fichier n'existe pas,
alors nous dirons RES.statusCode = 404.
Rappelez-vous que si le fichier n'existe pas, vous enverrez un code d'état 404 indiquant que
vous ne pouvez pas trouver le fichier.
Et puis nous dirons res.setHeader,
et nous allons définir l'en-tête sur 'Content-Type',
'text/html'.
Et puis nous devons envoyer le fichier HTML ici, ou le code HTML.
Donc, je vais faire le code HTML de base, corps html h1.
Erreur 404,
nous dirons, + FileURL +
'non trouvé'.
Et fermez, La page HTML.
Donc, ici, comme vous le remarquez, vous utilisez la fonction existe
du module de système de fichiers pour vérifier si le fichier existe.
Donc, vous donnez le chemin du fichier comme premier paramètre, et
le second est la fonction de rappel.
Dans cette fonction de rappel, si elle dit que l'existe est faux, alors vous allez
renvoyer le message d'erreur 404 standard, en disant que vous ne pouvez pas trouver le fichier.
Et après avoir fait cela, nous allons simplement,
retourner, sinon,
Nous allons dire res.statusCode
= 200, RES.setHeader,
('Content-Type', 'text/html').
Maintenant, nous devons lire dans le fichier et ensuite envoyer le fichier.
C' est donc là que, à partir du module de système de fichiers,
nous allons utiliser CreateReadStream,
qui prendra le FilePath comme paramètre.
Donc, cette méthode CreateReadStream va lire dans le fichier à partir de ce FilePath.
Et puis convertissez cela en flux d'octets,
puis ils conduiront cela jusqu'à la réponse.
Cela sera donc inclus dans la réponse, dans le corps de la réponse.
De cette façon, nous venons de prendre le fichier et de
le construire dans la réponse ici.
Et c'est tout, le dossier est prêt à être envoyé, ok ?
Donc, c'est si l'extension de fichier est html,
nous vérifions pour nous assurer que vous gérez cela correctement.
C' est donc là que vous allez lire dans le fichier, puis l'envoyer.
Si l'extension de fichier n'est pas html, alors bien sûr, nous devons envoyer un message d'erreur.
Donc juste là, nous allons voir, nous allons copier ce
particulier, Code d'ici.
Et puis collez-le là-dedans.
Nous dirons, sinon StatusCode = 404, texte/html,
et le message d'erreur dit, Erreur 404, FileURL.
Il n'est pas trouvé, mais
ce n'est pas un fichier HTML.
C' est donc l'erreur que nous allons renvoyer dans ce cas.
Et enfin, pour le dernier cas,
donc ici nous disons la méthode.
Donc, ceci correspond à la méthode de requête.
Donc, si la méthode de requête n'est pas GET, mais une autre méthode de requête,
alors nous ne gérerons pas cela dans cette version notre application Node.
Donc, nous allons renvoyer StatusCode 404,
Content html, et nous dirons Erreur 404.
Et nous dirons, méthode req,
Non, pris en charge,
pas pris en charge par ce serveur Node HTML ici, c'est tout.
Avec ces changements, nous sommes maintenant prêts à redémarrer notre navigateur.
Et puis laissez-le servir les fichiers HTML ici.
Donc, sauvegardons les changements, Et puis redémarrez notre serveur,
puis examinons ce qu'il envoie lorsque nous envoyons diverses demandes au serveur.
Aller au terminal, si votre serveur est en cours d'exécution,
arrêtez-le en tapant Ctrl+C, puis redémarrez le serveur.
Et lorsque le serveur est opérationnel, envoyons des requêtes à lui. Tout d'
abord, à partir d'un navigateur, puis de Postman.
Allez dans la fenêtre de votre navigateur, tapez localhost:3000, et
voyons que cela renvoie le fichier index.html comme nous l'attendons.
Et puis nous dirons localhost:3000/index.html,
et cela retournera également le fichier index.html.
Maintenant, si nous envoyons aboutus.html, il dit Aboutus.html, et il le renvoie correctement.
Envoyez-nous maintenant une demande pour aboutus.txt, et voyons ce qu'il fait.
Donc, il dit /aboutus.txt n'est pas un fichier HTML.
Ensuite, envoyons une requête à test.html.
Et nous savons que test.html n'existe pas, donc il dit /test.html introuvable.
Donc, nous voyons qu'en utilisant le navigateur, nous sommes capables de récupérer
les fichiers qui existent, et le serveur est capable d'envoyer les fichiers au navigateur.
Allons maintenant à Postman et essayons de générer les mêmes requêtes,
et voir la réponse du serveur.
Ensuite, allez à Postman, envoyons une requête GET à localhost:3000/.
Et vous voyez que cela renvoie le fichier index.html.
Envoyez-nous une demande à aboutus.html.
Et puis vous voyez qu'il renvoie le fichier aboutus.html.
Et puis nous allons envoyer une demande au fichier texte,
puis il dit erreur 404, pas un fichier HTML.
Et vous verrez que le statut ici dit, 404 pas trouvé.
Et puis nous allons, au lieu d'envoyer une requête GET,
voir que c'est l'avantage d'utiliser Postman, je vais envoyer une requête PUT.
Et vous remarquerez que cela dit, Erreur : PUT pas pris en charge, et
ainsi de suite avec le statut 404 ici, et ainsi de suite.
C' est ainsi que vous pouvez configurer un serveur HTTP Node
pour pouvoir servir des fichiers, des fichiers HTTP dans ce cas particulier.
Maintenant, vous pouvez facilement imaginer étendre
ce serveur HTTP pour gérer de nombreux types de fichiers différents et ainsi de suite.
Mais bien sûr, en conséquence,
le code sera également plus compliqué que ce que nous avons en ce moment.
Avec cela, nous complétons cet exercice.
Dans cet exercice, nous avons vu comment nous pouvons mettre en place un simple
serveur HTTP basé sur des nœuds qui sert des fichiers à partir de notre site serveur.
[ MUSIQUE]