👩‍🏫 Express 102 : without Express

Objectifs

• Découvrir le module node:http.
• Créer une application serveur sans Express.

Pré-requis

1. 1

   Valider la quête suivante

   Quêtes liées

   • Quête 2933
2. 2

   Être à l'aise avec l'architecture client-serveur du web

   

3. 3

   Identifier les 3 étapes pour créer une application serveur avec Express

   javascript

   // Création de l'application Express
   
   const express = require('express');
   const app = express();
   
   // Déclaration des routes
   
   const sayHello = (req, res) => {
     res.send("Hello World!");
   };
   
   app.get("/", sayHello);
   
   // Écoute du port
   
   const port = 3310;
   
   app.listen(port, () => {
     console.log(`Example app listening on port ${port}`);
   });
   

Introduction

Tu penses de plus en plus à ce qui se passe en coulisses lorsque tu navigues sur le Web ? Découvrons ensemble le fonctionnement des serveurs web et comment en créer un sans utiliser Express.

Lorsque tu navigues sur le web, chaque fois que tu accèdes à une page web, ton navigateur envoie une requête à un serveur, puis le serveur renvoie une réponse avec le contenu de la page que tu souhaites voir. C'est ainsi que fonctionne l'architecture client-serveur du web.

Un serveur sans Express

Commence par créer un nouveau répertoire pour ton projet et accède-y dans ton terminal :

mkdir hello-http
cd hello-http

Créé un fichier package.json pour ton application :

npm init

Crée un fichier index.js (vide pour l'instant) :

touch index.js

Création de l'application serveur

Dans ton fichier index.js, importe le module node:http pour créer un serveur HTTP :

const http = require("node:http");
const app = http.createServer();

Nous importons le module node:http qui nous permet de créer un serveur HTTP. Ensuite, nous initialisons notre serveur avec la fonction createServer().

Cette étape est très similaire à la création d'une application Express :

const express = require("express");
const app = express();

Rien de très intéressant pour l'instant.

Déclaration des routes

Chaque fois que notre serveur reçoit une requête HTTP, il doit exécuter une fonction spécifique pour produire la réponse. Cette fonction, appelée gestionnaire de requêtes, est définie à l'aide de la méthode on() :

const handleRequest = (req, res) => {
  res.end("Hello World!");
};

app.on("request", handleRequest);

Là encore, le code ressemble à ce que tu as pu voir avec Express :

const sayHello = (req, res) => {
  res.send("Hello World!");
};

app.get("/", sayHello);

Nous reviendrons sur cette partie un peu plus tard.

Écoute du port

Le code est cette fois complètement identique dans les 2 cas :

const port = 3310;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

Sauvegarde ton fichier index.js, et lance ton application avec la commande suivante dans ton terminal :

node --watch index.js

Tu peux ensuite ouvrir ton navigateur à l'adresse http://localhost:3310/ pour voir le message "Hello World!" s'afficher.

Afficher le code complet|||js|||Besoin d'aide ?|||0|||Masquer
// Création de l'application serveur

const http = require("node:http");
const app = http.createServer();

// Déclaration des routes

const handleRequest = (req, res) => {
  res.end("Hello World!");
};

app.on("request", handleRequest);

// Écoute du port

const port = 3310;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

Plusieurs requêtes, une seule réponse

Actuellement, notre serveur renvoie la même réponse pour toutes les requêtes. Tu peux t'en rendre compte en affichant l'URL demandée dans la console :

const handleRequest = (req, res) => {
  console.log(req.url);

  res.end("Hello World!");
};

Après avoir sauvegardé ton fichier index.js, ouvre ces liens dans ton navigateur (en adaptant le port au besoin) :

• http://localhost:3310/
• http://localhost:3310/about
• http://localhost:3310/the-world-is-mine

Si le message dans ta console affiche des URLs différentes pour chaque requête, la réponse est toujours la même : Hello World!.

Adapter la réponse à la requête

Lorsque nous créons un serveur HTTP avec le module node:http, nous avons la flexibilité de définir notre propre logique pour répondre aux différentes requêtes. Dans l'exemple ci-dessous, nous utilisons une structure conditionnelle pour router les requêtes vers différentes réponses en fonction de l'URL demandée :

const http = require("node:http");
const app = http.createServer();

const handleRequest = (req, res) => {
  console.log(req.url);

  if (req.url === "/") {
    res.end("Hello World!");
  } else if (req.url === "/about") {
    res.end("About World!");
  } else {
    res.end("Not Found");
  }
};

app.on("request", handleRequest);

const port = 3310;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

Dans cet exemple, chaque requête est dirigée vers la fonction handleRequest, qui vérifie l'URL de la requête et envoie une réponse appropriée : plus l'application comptera de routes, plus cette fonction va devenir complexe.

En revanche, avec Express, la gestion des routes est simplifiée à l'aide de méthodes spécifiques comme app.get(), app.post(), etc. pour déclarer les routes et spécifier les gestionnaires de requête associés. Voici comment l'exemple précédent serait implémenté avec Express :

const express = require("express");
const app = express();

// Gestionnaire de requête pour la route "/"
app.get("/", (req, res) => {
  res.send("Hello World!");
});

// Gestionnaire de requête pour la route "/about"
app.get("/about", (req, res) => {
  res.send("About World!");
});

// Gestionnaire de requête pour toutes les autres routes
app.use((req, res) => {
  res.sendStatus(404);
});

const port = 3310;

app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

Avec Express, nous pouvons définir des gestionnaires de requête spécifiques pour chaque route. Cette approche simplifie la gestion des routes et rend le code plus lisible et modulaire.