Guide Node.js, partie 8: protocoles HTTP et WebSocket

Node.js est une plate-forme serveur. La tâche principale du serveur est de traiter les demandes des clients, en particulier des navigateurs, aussi rapidement et efficacement que possible. Le huitième de la traduction du didacticiel Node.js que nous publions aujourd'hui concerne HTTP et WebSocket.

Que se passe-t-il lors des requêtes HTTP?

Parlons de la façon dont les navigateurs font des requêtes aux serveurs en utilisant le protocole HTTP / 1.1.

Si vous avez déjà eu une interview dans le domaine informatique, il se peut que l'on vous demande ce qui se passe lorsque vous tapez quelque chose dans la barre d'adresse de votre navigateur et appuyez sur Entrée. C'est peut-être l'une des questions les plus populaires qui se posent lors de ces entretiens. Quiconque pose de telles questions veut savoir si vous pouvez expliquer des concepts assez simples et savoir si vous comprenez les principes d'Internet.

Cette question touche à de nombreuses technologies, pour comprendre les principes généraux de ce qui signifie comprendre comment est construit l'un des systèmes les plus complexes jamais construits par l'humanité, qui couvre le monde entier.

▍ Protocole HTTP

Les navigateurs modernes sont capables de distinguer les URL réelles entrées dans leur barre d'adresse des requêtes de recherche, pour le traitement desquelles le moteur de recherche par défaut est généralement utilisé. Nous parlerons des URL. Si vous entrez une adresse de site Web, telle que flaviocopes.com , dans la ligne du navigateur, le navigateur convertit cette adresse au flaviocopes.com http://flaviocopes.com , en supposant que le protocole HTTP sera utilisé pour échanger des données avec la ressource spécifiée. Veuillez noter que sous Windows, ce dont nous allons parler ici peut sembler un peu différent de celui sous macOS et Linux.

▍ Phase de recherche DNS

Ainsi, le navigateur, en commençant à télécharger des données à partir de l'adresse demandée par les utilisateurs, effectue l'opération de recherche DNS (DNS Lookup) afin de trouver l'adresse IP du serveur correspondant. Les noms symboliques des ressources saisies dans la barre d'adresse conviennent aux utilisateurs, mais le périphérique Internet implique la possibilité d'échanger des données entre des ordinateurs à l'aide d'adresses IP, qui sont des ensembles de nombres comme 222.324.3.1 (pour IPv4).

Tout d'abord, en découvrant l'adresse IP du serveur, le navigateur examine le cache DNS local pour voir si une procédure similaire a été effectuée récemment. Dans le navigateur Chrome, par exemple, il existe un moyen pratique de consulter le cache DNS en entrant l'adresse suivante dans la barre d'adresse: chrome://net-internals/#dns .

Si rien ne se trouve dans le cache, le navigateur utilise l'appel système POSIX gethostbyname pour connaître l'adresse IP du serveur.

▍ fonction gethostbyname

La fonction gethostbyname vérifie d'abord le hosts , qui, sur macOS ou Linux, peut être trouvé dans /etc/hosts afin de savoir si des informations locales peuvent être trouvées en recherchant l'adresse du serveur.

Si des moyens locaux pour résoudre la demande de découverte de l'adresse IP du serveur échouent, le système effectue une demande au serveur DNS. Les adresses de ces serveurs sont stockées dans les paramètres système.

Voici quelques serveurs DNS populaires:

• 8.8.8.8: serveur DNS Google.
• 1.1.1.1: Serveur DNS CloudFlare.

La plupart des gens utilisent les serveurs DNS fournis par leurs fournisseurs. Le navigateur effectue des requêtes DNS à l'aide du protocole UDP.

TCP et UDP sont deux protocoles de base utilisés dans les réseaux informatiques. Ils sont situés au même niveau conceptuel, mais TCP est un protocole orienté connexion, et pour l'échange de messages UDP, dont le traitement crée une petite charge supplémentaire sur le système, une procédure d'établissement de connexion n'est pas nécessaire. Nous ne parlerons pas exactement de la façon dont les données sont échangées via UDP.

L'adresse IP correspondant au nom de domaine qui nous intéresse peut être dans le cache du serveur DNS. Si ce n'est pas le cas, il contactera le serveur DNS racine. Le système de serveur DNS racine se compose de 13 serveurs, dont dépend le fonctionnement de l'ensemble de l'Internet.

Il convient de noter que le serveur DNS racine ne connaît pas la correspondance entre tous les noms de domaine et adresses IP existants dans le monde. Mais des serveurs similaires connaissent les adresses des serveurs DNS de niveau supérieur pour des domaines tels que .com, .it, .pizza, etc.

Dès réception de la demande, le serveur DNS racine la redirige vers le serveur DNS du domaine de premier niveau, vers le serveur dit TLD (à partir du domaine de premier niveau).

Supposons que le navigateur recherche l'adresse IP du serveur flaviocopes.com . En ce qui concerne le serveur DNS racine, le navigateur recevra de celui-ci l'adresse du serveur TLD pour la zone .com. Maintenant, cette adresse sera stockée dans le cache, par conséquent, si vous avez besoin de trouver l'adresse IP d'une autre URL à partir de la zone .com, vous n'aurez plus à accéder au serveur DNS racine.

Les serveurs TLD ont des adresses IP de serveurs de noms (Name Server, NS), à l'aide desquels vous pouvez trouver l'adresse IP à partir de l'URL que nous avons. Où le serveur NS obtient-il ces informations? Le fait est que si vous achetez un domaine, le registraire de domaine envoie des données à ce sujet aux serveurs de noms. Une procédure similaire est effectuée, par exemple, lors du changement d'hébergement.

Les serveurs en question appartiennent généralement à des hébergeurs. En règle générale, pour se protéger contre les pannes, plusieurs de ces serveurs sont créés. Par exemple, ils peuvent avoir ces adresses:

• ns1.dreamhost.com
• ns2.dreamhost.com
• ns3.dreamhost.com

Pour connaître l'adresse IP par URL, ils se tournent finalement vers ces serveurs. Ils stockent les données réelles sur les adresses IP.

Maintenant, après avoir réussi à trouver l'adresse IP derrière l'URL entrée dans la barre d'adresse du navigateur, nous passons à l'étape suivante de notre travail.

▍ Etablissement d'une connexion TCP

Après avoir appris l'adresse IP du serveur, le client peut établir une connexion TCP avec lui. Lors de l'établissement d'une connexion TCP, le client et le serveur se transmettent mutuellement des données de service, après quoi ils peuvent échanger des informations. Cela signifie qu'une fois la connexion établie, le client pourra envoyer une demande au serveur.

▍Envoyer une demande

Une demande est un fragment de texte structuré conformément aux règles du protocole utilisé. Il se compose de trois parties:

• Chaîne de requête
• En-tête de demande.
• Demander le corps.

Chaîne de requête

La chaîne de requête est une chaîne de texte unique qui contient les informations suivantes:

• Méthode HTTP.
• Adresse de la ressource
• Version du protocole.

Cela peut ressembler, par exemple, à ceci:

 GET / HTTP/1.1 

En-tête de demande

L'en-tête de demande est représenté par un ensemble de : . Il y a 2 champs d'en-tête obligatoires, dont l'un est Host et le second est Connection . Les champs restants sont facultatifs.

Le titre peut ressembler à ceci:

 Host: flaviocopes.com Connection: close 

Le champ Host indique le nom de domaine qui intéresse le navigateur. Le champ Connection , défini sur close , signifie que la connexion entre le client et le serveur n'a pas besoin d'être maintenue ouverte.

Les autres en-têtes de demande couramment utilisés sont les suivants:

• Origin
• Accept
• Accept-Encoding
• Cookie
• Cache-Control
• Dnt

En fait, il y en a beaucoup plus.

L'en-tête de demande se termine par une chaîne vide.

Organe de demande

Le corps de la demande est facultatif; il n'est pas utilisé dans les demandes GET. Le corps de la requête est utilisé dans les requêtes POST, ainsi que dans d'autres requêtes. Il peut contenir, par exemple, des données au format JSON.

Puisque nous parlons maintenant d'une requête GET, le corps de la requête sera vide, nous ne travaillerons pas avec.

▍ Répondre

Une fois que le serveur a reçu la demande envoyée par le client, il la traite et envoie une réponse au client.

La réponse commence par un code d'état et un message correspondant. Si la demande aboutit, le début de la réponse ressemblera à ceci:

 200 OK 

En cas de problème, il peut y avoir d'autres codes. Par exemple, les éléments suivants:

• 404 Not Found
• 403 Forbidden
• 301 Moved Permanently
• 500 Internal Server Error
• 304 Not Modified
• 401 Unauthorized

De plus, la réponse contient une liste d'en-têtes HTTP et le corps de la réponse (qui, puisque la demande est exécutée par le navigateur, sera du code HTML).

Analyse HTML

Une fois que le navigateur a reçu la réponse du serveur, dont le corps contient du code HTML, il commence à l'analyser, en répétant le processus ci-dessus pour chaque ressource nécessaire pour former la page. Ces ressources comprennent, par exemple, les éléments suivants:

• Fichiers CSS.
• Les images
• Icône de page Web (favicon).
• Fichiers JavaScript.

La façon exacte dont le navigateur affiche la page ne s'applique pas à notre conversation. La principale chose qui nous intéresse ici est que le processus de demande et de réception de données ci-dessus est utilisé non seulement pour le code HTML, mais aussi pour tout autre objet transféré du serveur au navigateur à l'aide du protocole HTTP.

À propos de la création d'un serveur simple à l'aide de Node.js

Maintenant, après avoir examiné le processus d'interaction entre le navigateur et le serveur, vous pouvez jeter un nouveau regard sur la section d'application First Node.js de la première partie de cette série de documents, dans laquelle nous avons décrit le code d'un serveur simple.

Faire des requêtes HTTP avec Node.js

Pour effectuer des requêtes HTTP à l'aide de Node.js, le module approprié est utilisé . Les exemples ci-dessous utilisent le module https . Le fait est que dans les conditions modernes, dans la mesure du possible, il est nécessaire d'utiliser le protocole HTTPS.

▍ Exécution des requêtes GET

Voici un exemple d'exécution d'une demande GET à l'aide de Node.js:

 const https = require('https') const options = { hostname: 'flaviocopes.com', port: 443, path: '/todos', method: 'GET' } const req = https.request(options, (res) => { console.log(`statusCode: ${res.statusCode}`) res.on('data', (d) => {   process.stdout.write(d) }) }) req.on('error', (error) => { console.error(error) }) req.end() 

ExecutionExécution de la requête POST

Voici comment effectuer une demande POST à ​​partir de Node.js:

 const https = require('https') const data = JSON.stringify({ todo: 'Buy the milk' }) const options = { hostname: 'flaviocopes.com', port: 443, path: '/todos', method: 'POST', headers: {   'Content-Type': 'application/json',   'Content-Length': data.length } } const req = https.request(options, (res) => { console.log(`statusCode: ${res.statusCode}`) res.on('data', (d) => {   process.stdout.write(d) }) }) req.on('error', (error) => { console.error(error) }) req.write(data) req.end() 

UTPUT et DELETE requêtes

L'exécution de ces requêtes ressemble à celle des requêtes POST. La principale différence, outre le contenu sémantique de ces opérations, est la valeur de la propriété method de l'objet options .

▍ Exécution de requêtes HTTP dans Node.js à l'aide de la bibliothèque Axios

Axios est une bibliothèque JavaScript très populaire qui fonctionne à la fois dans le navigateur (cela inclut tous les navigateurs modernes et IE, à commencer par IE8), et dans l'environnement Node.js, qui peut être utilisé pour effectuer des requêtes HTTP.

Cette bibliothèque est basée sur des promesses, elle présente certains avantages par rapport aux mécanismes standard, en particulier par rapport à l'API Fetch. Ses avantages sont les suivants:

• Prise en charge des anciens navigateurs (vous avez besoin d'un polyfill pour utiliser Fetch).
• Possibilité d'interrompre les demandes.
• Prise en charge de la définition des délais d'expiration des demandes.
• Protection intégrée contre les attaques CSRF.
• Prise en charge du téléchargement de données avec la fourniture d'informations sur l'avancement de ce processus.
• Prise en charge de la conversion de données JSON.
• Emplois chez Node.js

L'installation

Vous pouvez utiliser npm pour installer Axios:

 npm install axios 

Le même effet peut être obtenu avec du fil:

 yarn add axios 

Vous pouvez connecter la bibliothèque à la page en utilisant unpkg.com :

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 

API Axios

Vous pouvez faire une requête HTTP en utilisant l'objet axios :

 axios({ url: 'https://dog.ceo/api/breeds/list/all', method: 'get', data: {   foo: 'bar' } }) 

Mais il est généralement plus pratique d'utiliser des méthodes spéciales:

• axios.get()
• axios.post()

Ceci est similaire à la façon dont jQuery utilise $.get() et $.post() au lieu de $.ajax() $.post() .

Axios propose des méthodes distinctes pour exécuter d'autres types de requêtes HTTP, qui ne sont pas aussi populaires que GET et POST, mais sont toujours utilisées:

• axios.delete()
• axios.put()
• axios.patch()
• axios.options()

La bibliothèque dispose d'une méthode pour exécuter une demande conçue pour recevoir uniquement des en-têtes HTTP, sans le corps de la réponse:

• axios.head()

GET demandes

Axios est pratique à utiliser en utilisant la syntaxe asynchrone / attente moderne. L'exemple de code suivant, conçu pour Node.js, utilise la bibliothèque pour charger une liste de races de chiens à partir de l'API Dog . Ici, la méthode axios.get() est appliquée et les roches sont comptées:

 const axios = require('axios') const getBreeds = async () => { try {   return await axios.get('https://dog.ceo/api/breeds/list/all') } catch (error) {   console.error(error) } } const countBreeds = async () => { const breeds = await getBreeds() if (breeds.data.message) {   console.log(`Got ${Object.entries(breeds.data.message).length} breeds`) } } countBreeds() 

Le même peut être réécrit sans utiliser async / wait, en appliquant des promesses:

 const axios = require('axios') const getBreeds = () => { try {   return axios.get('https://dog.ceo/api/breeds/list/all') } catch (error) {   console.error(error) } } const countBreeds = async () => { const breeds = getBreeds()   .then(response => {     if (response.data.message) {       console.log(         `Got ${Object.entries(response.data.message).length} breeds`       )     }   })   .catch(error => {     console.log(error)   }) } countBreeds() 

Utilisation de paramètres dans les requêtes GET

Une requête GET peut contenir des paramètres qui ressemblent à ceci dans une URL:

 https://site.com/?foo=bar 

Lorsque vous utilisez Axios, une requête de ce type peut être effectuée comme suit:

 axios.get('https://site.com/?foo=bar') 

Le même effet peut être obtenu en définissant la propriété params dans un objet avec des paramètres:

 axios.get('https://site.com/', { params: {   foo: 'bar' } }) 

Demandes POST

L'exécution des requêtes POST est très similaire à l'exécution des requêtes GET, mais ici, au lieu de la méthode axios.get() , la méthode axios.post() est utilisée:

 axios.post('https://site.com/') 

Comme deuxième argument, la méthode post accepte un objet avec des paramètres de requête:

 axios.post('https://site.com/', { foo: 'bar' }) 

Utilisation du protocole WebSocket dans Node.js

WebSocket est une alternative à HTTP, il peut être utilisé pour organiser l'échange de données dans des applications Web. Ce protocole vous permet de créer des canaux de communication bidirectionnels de longue durée entre le client et le serveur. Une fois la connexion établie, le canal de communication reste ouvert, ce qui met l'application à la disposition d'une connexion très rapide, caractérisée par de faibles latences et une faible charge supplémentaire sur le système.

Le protocole WebSocket est pris en charge par tous les navigateurs modernes.

▍ Différences HTTP

HTTP et WebSocket sont des protocoles très différents qui utilisent différentes approches pour l'échange de données. HTTP est basé sur le modèle «request-response»: le serveur envoie des données au client après leur demande. Dans le cas de WebSocket, tout est organisé différemment. À savoir:

• Le serveur peut envoyer des messages au client de sa propre initiative, sans attendre une demande du client.
• Le client et le serveur peuvent échanger des données en même temps.
• Lors de la transmission d'un message, une quantité extrêmement faible de données de service est utilisée. Cela conduit notamment à une faible latence dans la transmission des données.

Le protocole WebSocket est très bien adapté aux communications en temps réel sur des canaux qui restent ouverts pendant longtemps. HTTP, à son tour, est excellent pour organiser des sessions de communication occasionnelles initiées par le client. Dans le même temps, il convient de noter que, d'un point de vue de la programmation, il est beaucoup plus facile de mettre en œuvre l'échange de données en utilisant le protocole HTTP qu'en utilisant le protocole WebSocket.

▍ Version protégée du protocole WebSocket

Il existe une version non sécurisée du protocole WebSocket (schéma ws:// URI), qui ressemble, en termes de sécurité, au protocole http:// . L'utilisation de ws:// doit être évitée, préférant une version sécurisée du protocole - wss:// .

▍Création d'une connexion WebSocket

Pour créer une connexion WebSocket, vous devez utiliser le constructeur approprié:

 const url = 'wss://myserver.com/something' const connection = new WebSocket(url) 

Une fois la connexion établie, l'événement open est déclenché. Vous pouvez organiser cet événement en affectant une fonction de rappel à la propriété onopen de l'objet de connection :

 connection.onopen = () => { //... } 

Pour gérer les erreurs, le onerror événements onerror est utilisé:

 connection.onerror = error => { console.log(`WebSocket error: ${error}`) } 

▍Envoyer des données au serveur

Après avoir ouvert une connexion WebSocket au serveur, vous pouvez lui envoyer des données. Cela peut être fait, par exemple, dans le onopen onopen:

 connection.onopen = () => { connection.send('hey') } 

▍ Obtention des données du serveur

Pour recevoir des données envoyées à l'aide du protocole WebSocket du serveur, vous pouvez affecter le onmessage onmessage, qui sera appelé lorsque l'événement de message est reçu:

 connection.onmessage = e => { console.log(e.data) } 

▍ Implémentation du serveur WebSocket dans l'environnement Node.js

Afin d'implémenter un serveur WebSocket dans l'environnement Node.js, vous pouvez utiliser la bibliothèque ws populaire. Nous l'utilisons pour le développement de serveurs, mais il convient à la création de clients, ainsi qu'à l'organisation de l'interaction entre deux serveurs.

Installez cette bibliothèque en initialisant d'abord le projet:

 yarn init yarn add ws 

Le code du serveur WebSocket que nous devons écrire est assez compact:

 constWebSocket = require('ws') const wss = newWebSocket.Server({ port: 8080 }) wss.on('connection', ws => { ws.on('message', message => {   console.log(`Received message => ${message}`) }) ws.send('ho!') }) 

Ici, nous créons un nouveau serveur qui écoute sur le port standard 8080 pour le protocole WebSocket et décrivons un rappel qui, lorsque la connexion est établie, envoie un message ho! au client ho! et imprime sur la console un message reçu du client.

Voici un exemple de travail d'un serveur WebSocket, et voici un client qui peut interagir avec lui.

Résumé

Aujourd'hui, nous avons parlé des mécanismes de mise en réseau pris en charge par la plateforme Node.js, établissant des parallèles avec des mécanismes similaires utilisés dans les navigateurs. Notre prochain sujet portera sur les fichiers.

Chers lecteurs! Utilisez-vous le protocole WebSocket dans vos applications Web, dont le côté serveur a été créé à l'aide de Node.js?