Node.js - Créer un serveur HTTP et écouter les requêtes

Bonjour à tous et bienvenue dans cette nouvelle leçon qui porte sur la plateforme Node.js. Dans cette séance, nous allons voir comment créer un serveur HTTP, comment écouter les requêtes des clients et comment envoyer une réponse créée à la volée en spécifiant les en-têtes appropriés. Je rappelle que les techniques que nous allons voir durant cette séance, et probablement la séance suivante, constituent une étape importante qui permet de comprendre le fonctionnement de Node.js en implémentant les modules et méthodes fournis directement par cet environnement. Cependant, monter une application web complète ou une API fonctionnelle en utilisant ces méthodes-là risque de prendre un temps considérable. C'est pour cette raison que nous allons invoquer plus loin dans cette série un framework nommé Express qui permet d'aller plus vite en faisant abstraction d'un nombre important de fonctionnalités de fond. Créons un document JavaScript nommé server.js. C'est ce document qui sera exécutable dans l'environnement Node.js. La première opération consiste à importer le module HTTP. C'est un module disponible par défaut dans l'environnement Node.js et qui permet de monter un serveur HTTP. Maintenant on crée le serveur à l'aide de la méthode createServer de l'objet HTTP et qu'on en stocke dans l'objet server. Notez que les points-virgules sont facultatifs dans l'environnement Node.js. La prochaine opération, c'est écouter les requêtes des clients et on spécifie le port d'écoute, par exemple le port 80, qui est d'ailleurs le port par défaut utilisé par le protocole HTTP. Sinon, on peut changer, on peut mettre par exemple 8080. Comme ça, on évite tout conflit si jamais il y a le port 80 qui est déjà activé sur notre machine. Maintenant, on exécute ce code à travers la ligne de commande comme on a vu la séance dernière. Maintenant le serveur est fonctionnel, c'est-à-dire qu'on est en train d'attendre l'arrivée des requêtes. Vérifions d'abord si le port 8080 est activé. Il y a beaucoup de services fonctionnels, donc on va appliquer un filtre comme ça. On a bien le port 8080 qui est en écoute. Maintenant on exécute une première requête à travers le navigateur. On met localhost, le serveur local, et on spécifie le port parce que c'est différent du port 80 qui est supporté par défaut. On spécifie 8080 comme ça. On constate bien que le navigateur attend toujours la réponse du serveur et c'est normal parce qu'on n'a pas mis fin au processus de réponse, mais c'est une étape que l'on va voir après. Améliorons un petit peu le code. Au moment du lancement du serveur, je voudrais bien afficher un message à la console qui indique que le serveur est en écoute. Alors comme deuxième argument de la méthode listen, on passe une fonction de callback qui va écrire à la console par exemple serveur en écoute comme ça. Maintenant on redémarre le serveur. On arrête puis on lance le fichier server.js. On voit bien que le message est affiché: Serveur en écoute. Ce qu'on doit faire maintenant c'est récupérer la requête du client. On va mettre ici server.on. En fait server.on c'est un gestionnaire d'événements. Ça nous rappelle la méthode addEventListener de JavaScript. C'est pratiquement la même fonctionnalité qu'a sur server.on. C'est un gestionnaire d'événements qui accepte comme argument l'événement, dans ce cas-ci request, et comme deuxième argument c'est la fonction de callback à exécuter. Vous constatez que la structure générale de server.on est similaire à celle de addEventListener. La fonction de rappel accepte par défaut 2 arguments: la requête qu'on appellera req et la réponse qu'on appellera response comme ça. Bien sûr, vous pouvez renommer ces deux objets, mais par convention, on les nomme ainsi: request et response. À la réception d'une requête, on va afficher un message. On mettra par exemple console.log requête reçue. Alors réexécutons, on arrête encore le serveur et on redémarre. Maintenant, j'exécute une requête et là, ça m'affiche requête reçue sur la console. Notez bien que la console dans ce cas, c'est celle du serveur et non pas celle du navigateur. Au lieu d'afficher le message à la console, on va plutôt l'afficher sur le navigateur. On mettra donc ici l'objet res, c'est une réponse, .write. write est la méthode qui permet d'afficher quelque chose au navigateur, c'est-à-dire sur le client qui a envoyé la requête. On mettra ici Bonjour de la part de Node.js par exemple. Alors réexécutons. On redémarre toujours. On réexécute. On voit rien qui est affiché parce que c'est normal, le processus de réponse doit s'arrêter et c'est justement le rôle de la méthode end. On redémarre. Vous avez constaté que c'est un peu frustrant de redémarrer le serveur après chaque modification. Mais ne vous inquiétez pas, dans les prochaines séances on va voir comment automatiser cette opération. Maintenant quand on exécute, on a bien le message qui est affiché et le navigateur ne tourne plus, c'est-à-dire qu'on a mis fin au processus de réponse. Notez que l'on peut afficher le message à l'aide de la méthode end, c'est-à-dire on prendra ça, on le mettra ici, on enlève carrément cette instruction. On redémarre et on obtient le même résultat, mais je préfère séparer les opérations. Notez qu'on peut abréger cette écriture de cette manière, c'est-à-dire au lieu de créer l'instance server, on peut faire directement http.createServer et on va enlever la méthode on et on passera directement la fonction de rappel à travers la méthode createServer. Alors on enlève tout ça et on enchaîne directement listen à cette méthode. On enlève cette parenthèse qui est supplémentaire. Alors là, le code devient beaucoup plus abrégé et c'est désormais comme ça que l'on va travailler. Alors exécutons et on obtient le même résultat. Maintenant, imaginez que je veux afficher un contenu HTML, c'est-à-dire que ce message Ou bien juste le bonjour, je vais l'écrire en gras comme ça. Réexécutons. Là, ça a bien marché, c'est-à-dire que le code HTML a bien été implémenté. Mais c'est un comportement qui n'est pas toujours certain, c'est-à-dire que parfois on peut exécuter et le code HTML ne sera pas reconnu par le navigateur. Il va l'afficher tel qu'il est, c'est-à-dire on va voir les balises ici qui seront affichées en guise de texte. Et ça sera forcément dû à un problème d'encodage. Alors même si ça marche dans mon cas, on va quand même appliquer l'encodage. Pour appliquer l'encodage, toujours à travers l'objet res, on appelle la méthode writeHead qui accueille 2 arguments. Le premier c'est le code HTTP envoyé, dans ce cas c'est le code 200 pour dire que la réponse est OK. Le deuxième argument c'est un objet JavaScript qui contiendra l'ensemble des en-têtes que l'on souhaite envoyer. Dans ce cas, je mettrai l'en-tête Content-Type avec la valeur text/html et le jeu de caractères UTF-8. Réexécutons. C'est bien. Analysons le résultat de plus près. On va mettre Réseau, on actualise. On clique sur la réponse et on a bien l'encodage correspondant. Comme je l'ai mentionné dans la vidéo précédente, les en-têtes qui sont normalement envoyées par les serveurs de manière automatique comme le serveur Apache ou bien Nginx, dans le cas de Node.js, il faut les expliciter de manière manuelle comme c'est le cas ici. On peut changer de code, mettre par exemple 500 qui signifie erreur interne du serveur ou Réexécutons, on redémarre toujours le serveur. On a bien l'erreur 500 qui signifie erreur interne du serveur, mais bien sûr le message affiché c'est celui que j'ai explicité. C'est-à-dire que vous avez la main d'expédier le code d'erreur que vous souhaitez avec Node.js. On peut aussi envoyer une réponse JSON, on mettra le code 200 et le type MIME dans ce cas ça sera Maintenant on va spécifier un objet JavaScript ou bien une réponse JSON. On mettra par exemple le nom et le prénom, de préférence sans accent. On redémarre le serveur. On exécute. Alors on a bien une réponse JSON, une réponse JSON valide. C'est comme ça que l'on peut construire une API personnalisée. Comme vous le savez, la plupart des API envoient des réponses sous forme JSON. Alors on s'arrête là pour cette séance. Lors de la séance qui va suivre, nous allons voir comment récupérer les paramètres d'une requête et comment envoyer un document HTML complet en guise de réponse. Merci pour votre attention et à la vidéo prochaine.