II. Le modèle client-serveur¶

Cours¶

A. Définitions¶

Pour obtenir une page Web, votre navigateur va faire une demande, une requête au serveur Web sur lequel elle est stockée.

Qu'est-ce qu'un serveur Web ?

C'est une machine capable de répondre à des requêtes de l'application Web. Elle stocke les pages Web d'un ou de plusieurs sites au(x)quel(s) des navigateurs peuvent se connecter.

La page est localisée, on sait où elle se trouve et sur quel serveur. Notre navigateur va entrer en connexion avec le serveur, selon le modèle client-serveur :

Définitions

Le client demande l'accès aux pages par une requête. Le serveur répond à cette requête : si tout se passe bien il envoie le contenu des pages, sinon un message d'erreur.

C'est une relation asymétrique, qui est la plus courante sur le Web.

B. Exemples d'interactions entre client et serveur¶

Il faut plusieurs échanges de requêtes pour obtenir l'ensemble d'une page Web :

sequenceDiagram
  participant c as Client
  participant s as Serveur

  c->>s: Puis-je avoir la ressource index.html ?
  s->>c: Oui, la voilà
  c->>s: Il me faudrait aussi les images qui sont sur la page, svp
  s->>c: Ca arrive !

Ces échanges peuvent être visualisés grâce à l'inspecteur de propriétés du navigateur (F12 sous Windows).

C. Scripts côté client et côté serveur¶

Un script côté client sert à rendre la page dynamique. Elle est exécutée par le navigateur, pour ne pas surcharger de calculs le serveur. Le Javascript est le langage couramment utilisé.

Un script côté serveur est généralement utilisé pour collecter ou modifier des données qu'ils stocke dans une base. Le langage de programmation PHP est couramment utilisé.

Les données peuvent être récupérées par un formulaire, qui se déclare en HTML avec la balise form, et contient des composants graphiques, comme par exemple :

Voici un exemple de code PHP qui affiche les données récoltées avec ce formulaire :

<?php
 $login_connexion = $_GET['login'];
 $mot_de_passe = $_GET['password'];
 echo 'Les informations transmises au serveur sont :<br/>';
 echo $login_connexion;
 echo '<br/>';
 echo $mot_de_passe;
?>

TP : Simulation d'un serveur Web¶

En utilisant le simulateur de réseau Filius, nous allons voir le fonctionnement d'un serveur Web dans un réseau simple.

Télécharger le fichier nsi_sim_http.fls.

Ouvrir Filius, puis cliquer sur l'icône "Ouvrir" et rechercher le fichier.

Voici le réseau que vous devez voir s'afficher :

A. Le réseau¶

a. Indiquer, parmi les différents types de machines citées ci-dessous, si elles sont présentes ou non sur notre réseau :
Ordinateur :
Portable :
Switch :
Routeur :
Modem :
b. A quel type de machine correspond le serveur Web ? ......................................

Les configurations nécessaires ont été faites pour que l’ordinateur "Serveur Web" soit connecté aux autres réseaux locaux.

Obtenir l'adresse IP qui lui a été attribuée, en double-cliquant sur la machine : ......................................

Rappel SNT : L'adresse IP d'une machine sert à l'identifier de manière unique sur un réseau. Au format IPv4, elle est constituée de 4 nombres de 0 à 255.

B. Mise en place du serveur¶

Passer en mode simulation en cliquant sur la flèche verte puis cliquer sur un des ordinateurs portables.
Aller sur "Installation des logiciels", puis faire passer "Ligne de commande" dans la liste des logiciels installés. Appliquer les modifications, puis cliquer sur ce logiciel "Ligne de commande".
Tester la connexion entre cette machine et le serveur en tapant ping suivi de l'adresse IP du serveur Web relevée dans la partie A.
Cliquer sur "Serveur Web", puis sur Installation des logiciels. Dans la liste de droite, double-cliquer sur "Explorateur de fichiers", "Editeur de textes" et "Serveur web", puis sur "Appliquer les modifications".
Double-cliquer sur l’explorateur de fichiers, aller dans le dossier webserver. C’est ici que sont stockés les fichiers codant la(les) page(s) web hébergée(s) sur le serveur. Noter le chemin d'accès à index.html : .............................................................................. Quel autre fichier trouvez-vous ? ........................................................
Fermer l’explorateur de fichiers et ouvrir l’éditeur de texte. Cliquer sur Fichier > Ouvrir et sélectionner le fichier index.html dans le dossier webserver. La structure du contenu du fichier doit vous être familière. Modifier le contenu de la page Web pour que s’affiche :
- Dans le titre principal (balise <h2>): "La requête HTTP"
- Dans le premier paragraphe : "Voici la page Web contenue sur le serveur. Nous allons y accéder à partir d'un client : un navigateur Web."
- Dans le deuxième paragraphe : "Il faudra pour cela taper une URL commençant par le protocole utilisé : http, puis indiquer l’adresse IP du serveur".
- Le reste peut rester inchangé.
Cliquer sur Fichier > Enregistrer puis fermer l’éditeur de texte. Double-cliquer sur le serveur web, puis sur Démarrer. La page Web sera alors accessible pour aux clients (les navigateurs). Fermer le logiciel.
Double-cliquer sur un ordinateur portable puis sur "Installation des logiciels". Double-cliquer sur "Navigateur Web" dans la colonne à droite, puis sur Appliquer les modifications.
Double-cliquer sur le navigateur web, et entrer l’adresse IP du serveur web à la suite du HTTP. Vous verrez interprétée la page web dont le code se trouve dans le fichier index.html sur le serveur web.

C. Visualisation des échanges¶

En faisant un clic droit sur l’ordinateur portable d’où vous avez fait la requête HTTP, cliquer sur "Afficher les échanges de données".
Vous accédez à une grande liste. Identifier une requête HTTP : elle correspond à la couche « Application ». Celles commençant par « GET /HTTP/» correspondent aux requêtes du client, celles commençant par « HTTP » à la réponse du serveur. Double-cliquer dessus pour voir le contenu des échanges.