Créer un backend en Javascript (partie 4) : Créer un serveur HTTP avec NodeJS
Eric Le Codeur
Posted on October 7, 2021
Voici une série d'articles qui vous permettra créer des applications backend en Javascript.
Node.js est aujourd'hui un incontournable, il est donc essentiel pour un développeur de le maitriser.
Je vais donc publier un nouvel article environ au deux jours et petit à petit vous apprendrez tout ce qu'il y a à savoir sur Node.js
Pour ne rien manquer suivez moi sur twitter : https://twitter.com/EricLeCodeur
Le module HTTP
Le module HTTP est un ensemble de fonctions qui permettent de créer et gérer votre propre serveur web.
Rappel: Qu'est-ce qu'un serveur web ?
Un serveur web est un ensemble matériel et logiciel qui permettent l'accès aux fichiers hébergés, page web et base de données stocké sur un ordinateur.
Le serveur web est constitué en autre d'un serveur HTTP. Le serveur HTTP est un logiciel qui comprend/reçoit les URL et les requêtes via le protocole HTTP (le protocole utilisé par le navigateur pour afficher les pages web).
Au niveau le plus simple, à chaque fois qu'un navigateur a besoin d'un fichier ou autre hébergé sur un serveur web, le navigateur fait la demande au serveur (on dit qu'il envoie une requête HTTP). Quand la requête atteint le serveur, le serveur HTTP la traite et renvoie le réponse.
En résumé, ce qu'il faut retenir c'est que bien que un serveur HTTP peut semblé compliqué, en faite ce n'est qu'un succession de requêtes et réponses. Vous verrez ici bas que NodeJS vous permet très facilement de créer un serveur HTTP et qu'il est très facile d'y lire une requête et d'envoyer une réponse
Création d'un serveur HTTP avec NodeJS
Voici un exemple de création d'un serveur HTTP
const http = require('http')
const server = http.createServer((req, res) => {
// envoi la réponse au client
res.end('Hello World from the server')
})
server.listen(5000, 'localhost', () => {
console.log('Server is listening at localhost on port 5000')
})
Voyons ligne par ligne les différentes étapes pour la création d'un serveur
Chargement du module HTTP
const http = require('http')
Création du serveur avec une fonction callback. À noter qu'il y a deux paramètres qui sont passé à la fonction: req et res.
- req : contiendra des info sur la requête entrante
- res : servira à définir la réponse sortante
const server = http.createServer((req, res) => {
// envoi la réponse au client
res.end('Hello World from the server')
})
res.end() indique au serveur que la réponse est complète et peut maintenant être envoyé
Démarrage du serveur. Le serveur va attendre et lire les requêtes qui arriveront sur le port 5000.
server.listen(5000, 'localhost', () => {
console.log('Server is listening at localhost on port 5000')
})
Il s'agit ici d'une boucle sans fin. Chaque fois qu'une requête sera envoyé sur notre serveur au port 5000 (ex: localhost:5000), le serveur va exécuter le callback (voir bloc de code précédant) et donc dans ce cas ci envoyer la réponse 'Hello World from the server'
Si vous désirez tester ce serveur, lancer l'application
$ node app.js
Server is listening at localhost on port 5000
Ouvrez votre navigateur et visitez localhost:5000
Le message 'Hello World from the server' devrait afficher dans votre navigateur
En faite si vous visitez n'importe quelle page ex: localhost:5000/about le même message sera toujours affiché.
Il est possible de lire le chemin url de la requête ex: /about ou /home etc. et renvoyer une réponse différente selon le chemin.
L'information sur le chemin est inclut dans la requête.
Pour lire des infos sur la requête nous allons utiliser l'objet 'req'. qui comme vous savez contient toutes les informations de la requête.
Plus précisément, le chemin url se trouve dans la propriété 'req.url'
Voici un exemple d'un petit serveur HTTP qui, selon le url reçu, affiche une page différent
const http = require('http')
const server = http.createServer((req, res) => {
if (req.url === '/') {
res.end('<h1>Home page</h1>')
} else if (req.url === '/about') {
res.end('<h1>About page</h1>')
} else {
res.end('page not found')
}
})
server.listen(5000, 'localhost', () => {
console.log('Server is listening at localhost on port 5000')
})
HTTP Headers
Les HTTP Headers permettent au client et au serveur de transmettre des informations supplémentaires avec la requête ou la réponse.
Par exemple, le Header d'une requête pourrait contenir le format de son contenue ex. HTML ou JSON et/ou les informations relative pour l'authentification de l'utilisateur.
Exemple de Response Header
Pour ajouter un header à la réponse, nous devons ajouter une fonction avant la fonction res.end()
res.writeHead(404, {
'Content-type': 'text/html'
})
res.end('<h1>Page not found</h1>')
La fonction writeHead permet de spécifier le type de contenu du message soit 'text/html'
Lors de l'exécution de la fonction res.end() NodeJS inclura le Header à la réponse.
Votre premier serveur HTTP
Voila, vous avez créé votre premier serveur HTTP. Bien qu'il s'agit pour le moment d'un serveur très basique, n'oubliez pas qu'un serveur HTTP c'est simplement une succession de requêtes et de réponses.
Donc, dans sa plus simple expression, votre application web, ne fera que cela. C'est à dire traiter des requêtes et renvoyer des réponses.
Introduction à ExpressJS
Bien que NodeJS nous permet de créer notre propre serveur HTTP, pour créer une vraie application web il faudrait coder des centaines voir des milliers de lignes de code afin de gérer toutes les possibilités et toutes les exceptions.
Heureusement pour nous il existe plusieurs librairie/framework NodeJS qui font ce travail pour nous.
Le plus populaire d'entre tous est ExpressJS. ExpressJS est un framework (ensemble de librairies) conçu avec NodeJS afin de simplifier énormément le développement d'application web.
Nous verrons donc en détail plus tard comment utiliser ExpressJS dans nos applications NodeJS.
Conclusion
C'est tout pour aujourd'hui, suivez moi sur twitter : https://twitter.com/EricLeCodeur afin d'être avisé de la parution du prochain article (d'ici deux jours).
Posted on October 7, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.