Node.js - Envoyer une réponse HTML et analyser les URL

Bonjour à tous et bienvenue dans cette nouvelle leçon qui porte sur l'environnement d'exécution Node.js. Aujourd'hui, nous allons voir comment envoyer un document HTML en guise de réponse et comment analyser les URL afin d'en extraire les valeurs passées. Lors de la dernière vidéo, nous avons écrit cette base de code qui permet d'afficher un message à la volée sur le navigateur. Il s'agit en fait d'une réponse HTML, d'où le résultat suivant. Ce que nous allons faire maintenant, c'est préparer un document HTML intégral que l'on va renvoyer en guise de réponse. Alors créons le document HTML que l'on va placer juste à côté du fichier server.js et on y placera du code HTML classique. On affichera par exemple le message Bonjour en guise de titre H1 et un autre message juste en dessous dans la balise div. On ajoutera aussi la balise meta pour le jeu de caractères. Voilà, maintenant que notre document HTML est prêt, on va l'envoyer en guise de réponse à travers Node.js. La première opération à faire, c'est importer la librairie filesystem. Qu'on va mettre dans l'objet fs. D'ailleurs, la librairie s'appelle aussi fs. Dans la fonction de rappel passée en guise d'argument à la méthode createServer, nous allons tenter d'ouvrir le fichier index.html à l'aide de la méthode readFile. Cette méthode peut contenir 3 arguments. Le premier, c'est le nom du fichier. Veillez à spécifier le chemin complet du fichier. Dans ce cas, puisqu'il se trouve à côté du fichier server.js, alors il suffit d'indiquer son nom. Deuxième argument, c'est l'encodage d'ouverture. On mettra par exemple UTF-8. Et le dernier argument, c'est une fonction de rappel. Bon, généralement, on aura toujours besoin de fonctions de rappel qui vont s'exécuter une fois la tâche courante sera achevée. Cette fonction de rappel contient 2 arguments. Dans l'ordre, c'est l'erreur, Et par exemple data. L'erreur peut survenir en cas de problème lié à l'ouverture du fichier, comme par exemple l'inexistence de celui-ci. Et data, c'est rien d'autre que le contenu du fichier qui sera ouvert. Le traitement que l'on va placer dans cette fonction de rappel consiste à vérifier si on a reçu error ou pas. Alors on va mettre ici if, c'est-à-dire s'il y a une erreur, alors la réponse à envoyer au navigateur doit indiquer bien qu'il y a une erreur. On va donc spécifier un entier de type 404 par exemple. On va aussi expliciter un message qui indique clairement qu'il y a un problème. Par exemple, document introuvable. Bien sûr, ce n'est pas l'unique raison qui peut conduire à l'erreur. Il se peut bien que le document existe à l'emplacement souhaité mais tout simplement on n'y a pas accès en raison de privilèges limités. Sinon, c'est-à-dire s'il n'y a pas erreur, dans ce cas on va procéder au traitement normal, c'est-à-dire on va prendre le contenu du fichier, on va l'envoyer au navigateur pour l'afficher. C'est-à-dire que finalement on va copier ce code, on va le mettre ici. Pour la méthode end, il est préférable de la mettre à l'extérieur. Comme ça, c'est-à-dire il va s'exécuter dans tous les cas, qu'il y ait une erreur ou pas. Et dans la méthode write, on va pas spécifier un texte statique, mais on va plutôt mettre data. Je rappelle que data, c'est le contenu du fichier qui est ouvert. Alors exécutons, on arrête le serveur puis on le relance. Et on a bien la réponse du serveur. Il s'agit du document HTML que nous avons édité. Et si jamais il y a une erreur, par exemple on va renommer le fichier, on mettra par exemple index.html. Dans ce cas, le fichier que l'on cherche c'est index.html, du coup c'est un fichier qui n'existe pas. Le navigateur nous affiche document introuvable et le code d'erreur envoyé c'est 404. On va rétablir le nom et là c'est bon. Maintenant imaginons que nous avons passé des paramètres à travers l'URL comme ça par exemple. On mettra nom, par exemple je mettrai mon nom comme ça. L'idée maintenant c'est de récupérer les paramètres que j'ai passés en guise d'URL. N'oublie pas que dans la méthode createServer, nous avons passé une fonction de rappel qui accepte 2 autres arguments qui sont la requête et la réponse. Jusqu'ici, nous n'avons pas exploité la requête et c'est le moment de le faire. Imaginons que j'ai mis console.log req, c'est-à-dire que dans ce cas, j'affiche à la console le contenu de la requête entière. Je redémarre le serveur. Ici nous avons plein d'informations qui sont affichées à la console, vraiment plein d'informations. Moi ce que je veux afficher c'est juste les paramètres que j'ai passés à l'URL. Je mettrai ici req.url. On redémarre, on réexécute et voilà ça m'affiche les paramètres comme ceci. C'est une chaîne de caractères qui contient la propriété et sa valeur. Si je veux juste récupérer la valeur, c'est facile à faire juste avec les méthodes de traitement de chaînes de caractères ou bien de tableaux. D'ailleurs, on va le faire. Je mettrai par exemple le tableau égal req.url, c'est-à-dire ce que j'ai affiché. Je vais la diviser au niveau du symbole égal à l'aide de la méthode split que nous avons déjà vu avant, et ça va générer un tableau qui contient 2 index, c'est-à-dire 2 éléments. L'élément qu'il y a à gauche et l'élément qu'il y a à droite. Moi ce que je veux afficher c'est celui de droite, c'est-à-dire la valeur Chine. Alors je mettrai ici console.log tab et cette valeur elle a l'index 1 parce que le tableau contient 2 index dans ce cas. Alors on réexécute et il a bien affiché la valeur souhaitée. Jusqu'ici c'est bien, mais imaginez que vous avez une chaîne d'URL qui est trop longue, par exemple comme ça. Je vais ajouter le prénom, etc. Alors maintenant quand j'exécute, vous constatez que la valeur n'est pas la bonne, c'est-à-dire qu'il faudra modifier le code afin de tomber sur la bonne valeur. Mais l'idée proposée par Node.js est toute simple, il s'agit d'utiliser la librairie URL que l'on va invoquer. Dans ce cas, au lieu d'afficher ceci, je vais appeler l'objet URL avec la méthode parse qui permet d'analyser l'URL de la requête. Là, je vais passer la requête elle-même avec le paramètre URL comme tout à l'heure. Alors exécutons pour voir ce que ça va donner. Alors ça donne aussi plein d'informations mais nous on va s'intéresser à la propriété query. On va l'ajouter ici. Réexécutons. Ça nous affiche cette chaîne, c'est-à-dire c'est pas trop différent de ce que nous avons obtenu tout à l'heure mais la particularité de parse c'est qu'elle permet de transformer cette chaîne de caractères en objet JavaScript. Il suffit d'ajouter ici un attribut booléen avec la valeur true. Alors exécutons. Maintenant on a obtenu un objet plutôt qu'une chaîne de caractères. Alors là vous avez deviné l'astuce, il suffit de spécifier la propriété que je souhaite afficher, dans ce cas c'est nom. Voilà. Et voilà, ça marche. De la même manière, je peux spécifier les autres clés afin d'afficher les autres valeurs. Maintenant, on va aller un peu plus loin. Imaginez que dans le message qui est affiché au navigateur, on va afficher bonjour le nom qui est passé, c'est-à-dire le nom Chini dans ce cas. Alors, ce que je vais faire, c'est aller dans le document HTML. Après bonjour, je vais ajouter des symboles n'importe comment. Je mettrai par exemple 4 astérisques. Rien qu'avec ça, bien sûr, j'aurai ce message tel qu'il est, comme ceci. Mais l'idée, c'est d'identifier ces astérisques dans le code et les remplacer par le nom. On va le faire ici. Au lieu de mettre data, on mettra la méthode replace. C'est une méthode JavaScript classique qui permet de remplacer une occurrence dans une chaîne de caractères. Et là, ce que je veux remplacer, c'est les 4 astérisques. Et je vais les remplacer par ça. Je vais commenter ce code comme ça. Je redémarre, je réexécute. Il y a une erreur de syntaxe. Bon, c'est la parenthèse qui est ici qu'il faudra retirer. Voilà, comme ça. On réexécute. Et voilà, ça m'affiche maintenant le nom de manière dynamique. C'est-à-dire si je passe un nom différent, par exemple ABCD comme ça, et que j'exécute, ça va donner ceci. Alors j'espère maintenant que vous avez compris comment envoyer un document HTML complet en guise de réponse et comment analyser la requête, en l'occurrence l'URL, afin d'en extraire les valeurs souhaitées. Je rappelle que la méthode de travail que nous avons utilisée durant les 2 dernières vidéos n'est pas du tout adéquate si on veut monter des grands projets, mais ça sert juste à comprendre le fonctionnement interne de Node.js. C'est pour cette raison qu'à partir de la séance prochaine, on va utiliser un framework nommé Express qui permet de faciliter la tâche. Merci pour votre attention et à la vidéo prochaine.