PQP Atelier 5 du 26/01/2019

PQP CREPP Atelier N°5 :

WebServer/ Serveur Internet

présentation Yvon

IntroductionServeur Web
1. Interface graphique

Celle-ci doit être accessible depuis n’importe quel type de terminal
  • PC
  • Mac
  • Linux
  • Tablette
  • Téléphone
Disposer d’un ensemble de pages
  • Configuration
  • Affichage des dernières mesures
  • Affichage des courbes sur une période donnée

2. Client–serveur

L’environnement client–serveur désigne un mode de communication à travers un réseau entre plusieurs programmes : l’un, qualifié de client, envoie des requêtes ; l’autre ou les autres, qualifiés de serveurs, attendent les requêtes des clients et y répondent.

3. Internet / HTTP / URL

Suite des protocoles Internet :
La suite TCP/IP est l’ensemble des protocoles utilisés pour le transfert des données sur Internet. En 7 couches.

 3.1 HTTP

L’Hypertext Transfer Protocol (HTTP, littéralement « protocole de transfert hypertexte ») est un protocole de communication client-serveur développé pour le World Wide Web.

On s’en sert tous les jours. Exemple avec le navigateurs Web :

http://www.crepp.org

Une requête HTTP présente le format suivant :

 Ligne de commande (Commande, URL, Version de protocole)
 En-tête de requête
 [Ligne vide]
 Corps de requête

Les réponses du Serveur HTTP présentent le format suivant :

 Ligne de statut (Version, Code-réponse, Texte-réponse)
 En-tête de réponse
 [Ligne vide]
 Corps de réponse

Requête :

GET /page.html HTTP/1.0
    Host: example.com
    Referer: http://example.com/
    User-Agent: CERN-LineMode/2.15 libwww/2.17b3

Réponse :

    HTTP/1.0 200 OK
    Date: Fri, 31 Dec 1999 23:59:59 GMT
    Server: Apache/0.8.4
    Content-Type: text/html
    Content-Length: 59
    Expires: Sat, 01 Jan 2000 00:59:59 GMT
    Last-modified: Fri, 09 Aug 1996 14:21:40 GMT
    <TITLE>Exemple</TITLE>
    <P>Ceci est une page d'exemple.</P>

3.2 URL (Uniform Resource Locator)

http://www.crepp.org:80
  • http – protocole de communication, en l’occurrence ici HTTP pour accéder à un serveur web.
  • : – caractère de séparation obligatoire si le protocole est précisé.
  • // – chaîne de caractères pour les protocoles dont la requête comprend un chemin d’accès, permettant de préciser et localiser le service avant ce chemin.
  • www.crepp.org – nom de domaine du service
  • : – caractère indiquant qu’un numéro de port est précisé en suffixe
  • 80 – numéro de port TCP/IP du serveur HTTP

4. Le langage HTML

L’HyperText Markup Language, généralement abrégé HTML, est le langage de balisage conçu pour représenter les pages web.

Exemple du principe des balises ouvrantes et fermantes :

<TITLE>Exemple de HTML</TITLE>

Exemple d’une page HTML

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
 <head>
  <title>
   Exemple de HTML
  </title>
 </head>
 <body>
  Ceci est une phrase avec un <a href="cible.html">hyperlien</a>.
  <p>
   Ceci est un paragraphe où il n’y a pas d’hyperlien.
  </p>
 </body>
</html>

5. Serveur Web avec Micropython sur l’ESP8266

Code Micropython :

 

import usocket as socket
def web_page():
    html = """
    <html><head><title>CREPP PQP</title></head>
    <body>Vive le CREPP</body></html>"""
    return html
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)
while True:
    conn, addr = s.accept()
    print('Got a connection from %s' % str(addr))
    request = conn.recv(1024)
    request = str(request)
    print('Content = %s' % request)
    response = web_page()
    conn.send(response)
    conn.close()

URL à saisir dans le navigateur Web pour afficher la page :

http://192.168.4.1:80/  
ou http://192.168.4.1 car le navigateur envoie une demande de type htttp et le serveur sait qu'il faut répondre sur le port 80

 



présentation Patrick

généralité

 

La communication entre une application mobile et un serveur est généralement réalisée via le protocole HTTP, où le client (= application mobile, page Internet) envoie une requête HTTP à un serveur (sur ESP8266) via Internet par le protocole TCP/IP. Une fois que le serveur a traité la demande, il renvoie la réponse au client et ferme la connexion.

 

Les (Web)Sockets permettent une communication en temps réel entre l’application mobile, la page Internet et le serveur.

C’est une communication à sens unique, où la communication doit toujours être initiée par le client et consiste en un seul échange (envoi -> réception -> réponse -> fermeture). Le serveur n’a aucune possibilité d’envoyer quoi que ce soit au client sans que le client ne lui ait demandé de le faire.

Le socket peut avoir plusieurs significations :

  • Physiquement un socket est aussi matériellement une prise, un réceptacle pour les processeurs sur les cartes mères  
  • Pour faire communiquer des flux de données, on utilise un connecteur réseau ou interface réseau appelé socket, issus à l’orgine du système d’exploitation UNIX dans les années 1980.

on peut voir un socket comme une prise logicielle par laquelle une application (programme) peut envoyer er recevoir des données en fonction des protocoles réseaux qui ont bien évolué depuis les années 1990 jusqu’à la quasi hégémonie actuelle de du rptocole TCP/IP. La prise la plus connue est maintenant les sockets TCP/IP

Pour le micropython de l’ESP8266, il suffira d’importer la bibliothèque socket par

import socket 

 

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(( », 80))
s.listen(5)

 

la nouveauté est qu’il faudra inclure du code HTML dans le programme pyton, afin de construire la page Internet qui sera accessible à l’adresse IP de l’ESP8266 _ au port 80 _

langage HTML

HTML HyperTextMarkedLangage, le langage de balisage d’hypertexte des pages d’Internet est apparu vers 1990 sur les base du langages SGML Standard Generalized Markup Langage qui permettait de séparer la structure logique d’un document (titre, chapitres, paragraphes,..) , la mise en page qui dépend du support de présentation et les données du texte.

structure d’un fichier html

le premier exemple est la partie html inclus dans web_test.py

<html>
 <head> 
   <title>CREPP PQP</title>
 </head>
 <body>
    HAHAHA
 </body>
</html>"""

 

fichier web_test.py

web_test.py

import usocket as socket


def web_page():
 html = """
 <html>
   <head> 
     <title>CREPP PQP</title>
   </head>
 <body>
     HAHAHA
 </body>
 </html>"""
 return html


s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)

while True:
 conn, addr = s.accept()
 print('Got a connection from %s' % str(addr))
 request = conn.recv(1024)
 request = str(request)
 print('Content = %s' % request)
 response = web_page()
 conn.send(response)
 conn.close()

action sur Led par bouton

le langage HTML est suffisamment riche pour permettre des interfaces hommes machines de qualité répondant à 90% des besoins.

Ainsi une balise <button> associée à une balise d’ancrage <a> permet l’affichage d’un bouton action sur le navigateur Internet.

Quelques codes python  permettent de récupérer la commande désirée et la traiter.

webserverLed01.py

# #CREPP2019 ppr
try:
 import usocket as socket
except:
 import socket

from machine import Pin

led = Pin(2, Pin.OUT)


def web_page():
 if led.value() == 1:
 gpio_state="ON"
 else:
 gpio_state="OFF"
 
 html = """
 <html>
  <head> 
   <title>CREPP PQP</title>
 
  </head>
  <body>
   <h1>CREPP PQP</h1> 
   <p>GPIO state: 
     <strong>""" + gpio_state + """</strong>
   </p>
   <p>
    <a href="/?led=on">
     <button class="button">
       led ON - OFF
     </button>
    </a>
   </p>
 
 </body>
 </html>"""
 return html

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)

while True:
 conn, addr = s.accept()
 print('donnees emises depuis %s' % str(addr))
 request = conn.recv(1024)
 request = str(request)
 print('Contenu = %s' % request)
 led_on = request.find('/?led=on')
 if led_on == 6:
    print('LED ON OFF')
    led.value( not led.value())
 response = web_page()
 conn.send(response)
 conn.close()

 

CSS amélioration de la présentation

CSS Cascading Style Sheets, Feuilles de Style en Cascade permettent depuis les années 1990 d’améliorer la présentation des documents HTML.

par exemple pour les boutons:

<style>
 html{
  font-family: Helvetica; 
  display:inline-block; 
  margin: 0px auto; 
  text-align: center;}
 h1{
    color: #0F3376; padding: 2vh;}
 p{
    font-size: 1.5rem;}
 .button{
   display:
   inline-block; 
   background-color: #e7bd3b; 
   border: none; 
   border-radius: 4px; 
   color: white; 
   padding: 16px 40px; 
   text-decoration: none; 
   font-size: 30px; 
   margin: 2px; cursor: pointer;}
 .button2{
   background-color: #4286f4;
 .button3{
   background-color: #4286f4;}
 </style>

et

<a href="/?led=on">
   <button class="button">
      led ON - OFF
   </button>
</a>

 

https://www.w3schools.com/css/css3_buttons.asp

webserverLed02.py