Logo Polytech

Introduction

  • Dans cette page, on va s'éloigner du front pour étudier un autre pan du Web : les serveurs.
  • Un serveur n'est rien de plus qu'un ordinateur distant capable de recevoir des requêtes.
  • Il existe de nombreux types de serveurs :
    • Des APIs (Application Programming Interface) qui sont des serveurs spécialisés dans le traitement de certains types de requêtes. Ils ne réalisent pas de traitements mais s'occupent de lire les requêtes et d'appeler les bons serveurs pour répondre à la demande
    • Des serveurs de fichiers, capables de renvoyer un fichier demandé.
      Par exemple, quand vous tapez http://webtuto.ps8.academy dans votre navigateur, une requête est effectuée vers le serveur correspondant, qui va traîter la requête et renvoyer le fichier html correspondant.
    • Des Back-ends, qui ont pour vocation de réaliser des tâches précises. Ils ne sont généralement pas accessibles directement pour les utilisateurs, c'est une API qui va les appeler et renvoyer le résultat.
  • Il est possible d'avoir un seul bloc de code qui fait tout (techniquement, rien n'oblige une API à appeler un back-end, elle peut traîter la requête directement), auquel cas on parle de monolithe ; au contraire, il est possible de séparer toutes les fonctionnalités, auquel cas chaque fonctionnalité individuelle est un micro-service.

Communication

  • Un serveur permet de recevoir des requêtes.
  • Il existe de nombreux types de requêtes différents, répartis sur plusieurs couches réseaux.
  • On ne détaillera pas la pile, mais dans cette page on ne traîtera que les requêtes HTTP REST (on parlera peut-être des WebSockets dans les bonus).
  • Pour effectuer une requête HTTP, il faut l'URL de la ressource ciblée (une API généralement), le port ouvert sur le serveur pour recevoir les requêtes (80 par défaut pour HTTP, 443 pour HTTPS)
  • Le protocole REST permet d'ajouter des méthodes (GET, POST, PUT, DELETE, OPTIONS, ...), permettant de cibler des ressources différentes à partir de la même URL
  • Par exemple, une requête GET à l'adresse monserveur.com/user/1234 pourrait permettre de récupérer les informations de l'utilisateur 1234 alors qu'une requête PUT à la même URL pourrait servir à modifier l'utilisateur.

Fetch (1/2)

  • Pour envoyer des requêtes depuis une page web vers un serveur, il faut utiliser la fonction fetch()
  • Cette fonction prend 2 arguments :
    • L'URL : protocole://sous-domaine.domaine.extension:port/chemin/vers/la/ressource. Par exemple : http://webtuto.ps8.academy:80/serveurs
    • Un dictionnaire contenant la configuration. Ce dictionnaire peut contenir les clés suivantes :
      • method --> GET, POST, PUT, DELETE, ...
      • headers --> un dictionnaire de clés-valeurs contenant ce que vous souhaitez. En général vous n'aurez à le remplir que si le serveur demande une clé/valeur particulière
      • body --> un string contenant le corps de la requête
      • Note : pour transformer un objet JS en string (afin de transférer n'importe quelle donnée) on peut utiliser JSON.stringify(objetJs) ; au contraire, quand on reçoit une string JSON, on peut la convertir en objet JS en utilisant JSON.parse(jsonString).

Fetch (2/2)

  • La fonction fetch() renvoie une Promise de Response
  • Une promise est un type asynchrone : on suppose que la promise contiendra une donnée à un moment, mais on ne sait pas quand.
  • Si l'on souhaite attendre que la Promise soit résolue avant de continuer le code, il faut utiliser le mot-clé await ; si l'on ne veut pas bloquer le code, on peut indiquer le code qui devra être exécuté le jour où la requête sera résolue grâce à la méthode Promise.then(function(data){...})
  • Dans les cas de fetch(), la donnée récupérée une fois la Promise résolue est un objet de type Response
  • Pour récupérer le contenu de la réponse, il faudra utiliser Response.text() ou Response.json(), qui sont aussi des promises.

Node.js

  • Un serveur peut être créé dans n'importe quel langage, tant que le langage permet de recevoir des requêtes (ce qui est le cas de la plupart)
  • On se concentrera sur le langage JavaScript, d'une part car c'est très rapide à configurer et parce qu'il facilite les communications avec les pages web dont les requêtes sont aussi réalisées en JS
  • JavaScript n'a pas d'interpréteur public permettant de l'exécuter directement sur la machine, ni de code permettant d'écouter des requêtes
  • Une entité s'est chargé de créer cet interpréteur en se basant sur le moteur JS de Google Chrome et a ajouté les fonctionnalités nécessaires au bon fonctionnement d'un serveur : c'est Node.js
  • c.f. Ancien cours sur l'utilisation de Node.js

Exercice 0 : Mise en place

  • Installez Node.js
  • Une fois l'installation terminée, créez un dossier où vous le souhaitez
  • Ouvrez un terminal, naviguez jusqu'au dossier que vous venez de créer, lancez la commande npm init, et répondez aux questions
    • npm est Node Package Manager, c'est l'interface permettant de gérer les projets node.js
    • npm init permet d'initialiser un projet vide en créant un fichier package.json contenant les informations du projet
    • Si vous ne savez pas répondre à une question, vous pouvez juste appuyer sur la touche Entrée pour utiliser la valeur par défaut
  • Une fois le projet initialisé, créez un fichier index.js, dans lequel vous écrirez simplement console.log("Bienvenue sur Node.js");
  • Retournez sur votre terminal et lancez la commande node index.js. Si "Bienvenue sur Node.js" apparaît sur le terminal, votre projet node fonctionne et vous pouvez passer à la suite !

Exercice 1 : Serveur REST

  • Dans le fichier index.js de votre projet Node.js, rédigez le code pour :
    • Créer un serveur qui reçoit des requêtes HTTP sur le port 8000
    • Quand une requête est reçue, le serveur doit récupérer le chemin et la méthode, puis :
      • Si la requête a été faite vers un autre chemin que "/user", renvoie une erreur 404
      • Sinon, si la méthode est GET, renvoie un succès 200 avec le message "utilisateur renvoyé"
      • Si la méthode est POST, renvoie un succès 201 avec le message "utilisateur créé"
      • Si la méthode est PUT, renvoie un succès 201 avec le message "utilisateur modifié"
      • Si la méthode est DELETE, renvoie un succès 202 avec le message "utilisateur supprimé"
  • Créez une page web (en dehors du projet Node.js) et ajoutez-y 5 boutons + 1 paragraphe.
  • Chaque bouton devra, lorsqu'on clique dessus, envoyer une requête à votre serveur permettant de tester un des cas. La réponse du serveur devra être inscrite dans le paragraphe.