Comment on communique sur le web? - le protocole http

💡 Cet article est le premier de la mini-série: "Comment fonctionne une application web ?".

Sur le web on ne fait sans cesse que communiquer. Ton laptop communique avec chaque site sur lequel tu te connectes 🌐 !

Sur le web on communique par un système informatisé qu'est internet. Donc on ne fait pas de la communication humain - humain, mais plutôt de la communication humain - machine et machine - machine.

Quand deux humains communiquent ils établissent un protocole pour se comprendre, c'est le langage. Si tu as déjà rencontré quelqu'un qui ne parle pas ta langue tu as dû vite t'en rendre compte, la motivation ne fait pas tout ! 😂

Pour communiquer il faut établir un protocole commun.

Et sur le web le protocole le plus courant c'est ce qu'on appelle HTTP ( Hypertext Transfer Protocol - soit en cocorico -  Protocole de transfert hypertexte ).

Et HTTP c'eeeeest ...

... Un système de requête - réponse !

Ce protocole de communication est basé sur un système de requête - réponse entre deux partis.

1. Le client envoie une requête au serveur
2. Le serveur envoie une réponse au client

On parle alors de requête HTTP et de réponse HTTP.

Les clients HTTP on en a tous·tes un sur notre laptop, ce sont par exemple les navigateurs web tels que Chrome, Brave, Safari, Opera, Edge etc...

Les serveurs HTTP on tape dessus toute la journée, ce sont tous les sites qu'on visite ( je vous fais pas une liste 🤭 )

Donc,

Quand tu ouvres Safari et que tu vas sur un site, ton navigateur envoie une requête au serveur du site "donne moi le contenu de cette page stp" et le serveur te réponds "OK bb, voici la page : [ contenu de la page en html ] ".

techniquement, ton navigateur envoie au serveur du site la requête:

GET site.com/page

Et le serveur te répond:

OK
[contenu de la page en html]

Et ton navigateur peut t'afficher la page !

Oui le serveur te renvoie vraiment OK. 😎

En fait il te répond 200 OK quand il a trouvé ta page, mais il peut te répondre d'autres choses si des erreurs se produisent.

Merci Tanki mais pourquoi 200 ?

on y viens ;)

Une communication très normée

Ouai ça rigole pas dans le HTTP...

En même temps le truc s'appelle un protocole donc c'est plutôt logique que ça soit plutôt ...

... protocolaire !

Le protocole HTTP contient pleins de règles universelles pour que tout le monde se comprenne.

Les réponses ont donc un code de statut ( status code ) qui te permet de savoir si tout s'est bien passé, ou alors te préciser le type d'erreur rencontré.

200 c'est le code quand tout s'est bien passé.

Parfois tu tombes sur une page avec écrit Error 404 , et la page te dit qu'elle n'a pas trouvé l'article que tu voulais lire.

404 c'est un code d'erreur http. Il signifie que la page que tu lui demande n'existe pas.

Donc quand tu lui envoie la requête:

GET linkedin.com/post-inspirant

Et que le serveur ne trouve pas le post parce qu'il a été supprimé par exemple, il te répond:

404
Not Found

Petite parenthèse sur l'URL

L'URL c'est un Uniform Resource Locator sur le web, en frenchie: un localisateur uniforme de ressource.

Encore une fois c'est lié à des normes pour que tout le monde se comprenne sur le web.

C'est composé du protocole de communication, ici: http://

D'un nom de domaine, pour identifier le serveur à qui sera envoyé la requête: linkedin.com

Et d'un chemin pour identifier la ressource de manière unique.

Par exemple sur Linkedin j'ai un URL unique: linkedin.com/tancredesimonin. Comme ça quand on visite cet URL, Linkedin te renvoie mon profil et pas celui de Jean-Michel.

Et des URL il y en a de pleins de sortes différentes, par exemple mailto:contact@google.com c'est un URL pour un protocole de communication qui n'est pas HTTP mais le mail.

On a aussi le téléphone avec tel:+331122334455  et pleins d'autres.

Point précision terminé, on continue!

Envoyer des données avec une requête HTTP

C'est bien sympa de venir GET des pages web mais on veut pouvoir envoyer des données aussi, pour mettre un commentaire sous un article, faire un post etc...

Notre capacité à envoyer des données et pas seulement lire des pages est le point de rupture entre le web 1.0 et le web 2.0 !

Et bien pour envoyer de la donnée le protocole HTTP a prévu des verbes dédiés. L'action GET signifie que tu souhaites récupérer la ressource définie par l'URL.

Et si tu veux créer une ressource, tu peux utiliser l'action POST.

Dans ce cas ton navigateur va envoyer des données au serveur dans sa requête.

Par exemple, si tu veux créer un post Linkedin tu vas devoir:

• envoyer du texte au serveur de Linkedin
• définir l'URL de cette nouvelle ressource

DONC pour créer un post linkedin tu vas envoyer une requête comme ça:

POST linkedin.com/jeanmichel/nouveau-post

{	
	text: "cher réseau, blabla" 
}

Et comme pour un GET, le serveur va t'envoyer une réponse adaptée à ton action. Par exemple si tu crées une nouvelle ressource et que tout va bien, le serveur va te renvoyer 201 Created pour t'informer que le nouveau post a bien été créé.

Et ainsi de suite, tu vas pouvoir faire d'autres actions sur les ressources:

• PUT pour mettre à jour une ressource, par exemple rajouter un #frenchtech en bas de ton post
• DELETE pour supprimer une ressource

VOILAAAAA

J'espère que ça n'aura pas été trop relou ou basique, mais c'est hyper important de commencer par là parce que TOUT le web repose sur ce concept et donc ta web-app aussi !

Dans le prochain article on voit le frontend! avec pleins de trucs cools genre de quoi est constitué une page web, la notion d'interface utilisateur et comment on échange des données avec un serveur, bref, le passage au web 2.0!

Si tu as des questions / remarques / suggestions tu peux me MP ou te créer un compte pour commenter en dessous.

Article suivant:

C’est quoi le frontend ?

Cet article est l’épisode 2 de la mini-série “Comment fonctionne une web-application”. Tu n’as lu le premier épisode “comment on communique sur le web” ? Si tu n’es pas à l’aise avec les concepts, je te conseille de lire les épisodes dans l’ordre 😊. Et sinon, let’s goooo ! 💥 On a vu précéd…

Decode - by TancrèdeTancrède Simonin