Interaction client-serveur

Interactions entre l'homme et la machine sur le Web

Plan

Définition client et serveur

Il est très important lorsque l'on conçoit un site web, de savoir ce qui s'execute sur votre ordinateur et ce qui est fait par le serveur. Pour prendre un exemple à la mode: le game streaming. Dans les années à venir les jeux ne seront pas executés par vos consoles, mais par un ordinateur distant qui effectura les calculs à distance pour vous envoyer les images du jeux. Votre machine ne va gérer que l'affichage de l'image et l'interrogation de votre manette, souris, capteurs de réalité virtuelle. Votre machine capte donc ces événements et les transmet au serveur qui vous renvoie l'image du jeu qui convient suite à votre action. L'avantage ici, c'est que vous n'avez plus besoin d'avoir une machine puissante et que vous pourrez jouer sur tous les supports, mais par contre il faudra une connexion internet de très bonne qualité.

ce qui s'execute côté client est ce qui est exectuté sur votre machine, le css et le plus souvent le javascript.

ce qui s'execute côté serveur est ce qui est exectuté sur le serveur réseau, le plus souvent c'est le php et les formulaires qui sollicitent le serveur. Cela implique qu'une requête est faite au serveur et que l'on attend sa réponse.

Un exemple

Nous allons voir un exemple qui permet de bien voir la différence entre une action réalisée côté client et l'autre côté serveur. Nous allons afficher l'heure sur notre site.

Première méthode en javascript(à copier-coller et tester)

<!DOCTYPE html>
<html>
<head>
	<script >
   function heure() {
     var start = Date.now();
     function actualiser() {
       var millis = Date.now() - start;
       var date = new Date();
       var str = date.getHours();
       str += ':'+(date.getMinutes()<10?'0':'')+date.getMinutes();
       str += ':'+(date.getSeconds()<10?'0':'')+date.getSeconds();
       document.getElementById('id_heure').innerHTML =  str;
     }
     actualiser();
     setInterval(actualiser,1000);
   }
 </script>
</head>
<body>
 <p>Voici une hologe réalisée en javascript.</p>
  <p id="id_heure">
  <script>
    heure();
    </script>
 <p>
</body>

Cela fonctionne bien. Tout s'execute sur votre ordinateur donc côté client, puisque l'on ne recharge jamais la page.

Voyons le même exemple en php: (à copier-coller et tester, attention à enregistrer au format php et à publier en ligne ou avec un serveur virtuel wamp par exemple.)

<!DOCTYPE html>
 <html>
  <head>
  </head>
  <body>
     <p>Voici une hologe réalisée en php.</p>
     <?php
       // 11 October 2012
       echo  date("H:i:s");       // 11/10/12
  ?>
  <p>Mais? L'heure est bloquée? Actualisez la page pour voir ce qu'il se passe...</p>
  <p>Et oui, c'est le serveur qui fournit l'heure, donc une fois la page chargée, il ne se
    passe rien, à moins de redemander la page au serveur.</p>
  </body>
  </html>

En ajoutant la ligne META avec refresh on peut forcer le navigateur à recharger la page !(à copier-coller et tester)

<!DOCTYPE html>
<html>
 <head>
   <META HTTP-EQUIV="Refresh" CONTENT="2; URL=http://isnclemenceau.free.fr/testphpTime2.php">
 </head>
 <body>
    <p>Voici une hologe réalisée en php.</p>
    <?php
      // 11 October 2012
      echo  date("H:i:s");
 ?>
 <p>L'heure n'est plus bloquée. La ligne meta, ordonne le rafraichissement de la page toutes les
 2 secondes. Vous le voyez par le clignotement du titre dans l'onglet et l'image de rafraichissement.
Heureusement que ma page est légère! Cette solution est bien évidement mauvaise.</p>

 </body>
 </html>

Android

De la programmation pour pc à la programmation pour téléphone.

A finir

Pas eu le temps de tout faire.....