top of page
ESP32 COM A SERVIDOR WEB

Construïm un servidor que retorna una pàgina web amb informació

S11.png

Per fer treballar l'ESP32 com a servidor web cal:​

  • ​Importar el mòdul socket de MicroPython, que permet crear i gestionar servidors

  • Crear un objecte socket i associar-lo amb l'adreça IP del servidor i al port de comunicació HTTP 

  • Connectar a la xarxa

  • Escoltar sol·licituds i enviar respostes en forma de pàgina web, definida amb llenguatge HTML

​​

Proposta de codi  👀 👉

(copia, enganxa, executa i analitza)

El resultat, en accedir a la IP de l'ESP32 des del navegador:

S12.png

Amb la pàgina web oberta, si cliqueu amb el botó dret del ratolí i escolliu l'opció "Visualitza l'origen de la pàgina", el que veureu és el seu codi HTML. 

DEFINCIÓ DE LA PÀGINA WEB

La resposta del servidor serà una pàgina web, creada amb HTML.

HTML no és un llenguatge de programació sinó d’estructura de continguts. 

Funciona amb etiquetes (tags) que en general s'obren < > i es tanquen </ >

def pag_web( ):

    html = """<html>

    <head>

    <title>ESP32 Servidor Web</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body>

    <p>Mi Servidor</p>

    <p>Hola, """ + addr + """</p>

    <p>Servidor web en marxa!</p>

    </body>

    </html>"""

    return html

S13.png

Eines per makejar:

Utilitzeu l'editor de codi HTML en línia de w3schools

Investigueu diferents tipus de fonts en HTML

MILLOREM LA VISUALITZACIÓ DE LA RESPOSTA
S01.png

Pel que veig a la pàgina de resposta, la variable addr retorna dos valors: la IP del client i el núm de petició (aquest va canviant cada cop que carrego la pàgina).

Per fer que només apareixi la IP (identificador del client):

Com que la variable addr retorna una llista de 2 elements, per recuperar només el primer el que he fet ha estat modificar el que es recupera des de la pàgina web: l'element 0 de la llista addr:

""" +addr[0]+ """

S13.png

# importa llibreries:

import socket               # la llibreria socket de MicroPython permet crear i gestionar servidors web

import miwifi               # la nostra definició de la connexió a WiFi, desada a la carpeta lib del dispositiu

 

# configuració del servidor:

servidor = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

servidor.bind(('', 80))

servidor.listen(5)

# socket.socket: crea un objecte socket que he anomenat servidor

# bind: enllaça el sòcol amb l'adreça IP de l'ESP32 ('') i el port 80 (port per defecte per al protocol HTTP)

# listen:permet que el servidor accepti peticions. 5 és el nombre màxim de connexions permeses

# definició de la resposta del servidor a les peticions dels clients, que serà en format pàgina web:

# funció que conté una variable que anomenaré html. El seu valor serà el codi HTML de la pàgina web de resposta

def pag_web( ):  

    html = """   """          # el contingut de la variable serà text, dividit en diferents línies ("""     """)

    return html               # per poder utilitzar la variable fora de la funció en que està definida

# execució de la connexió a WiFi, definida en la funció connecta_wifi a l'arxiu miwifi.py:

miwifi.connecta_wifi( )

# escolta les sol·licituds i envia respostes:

while True:

    conn, addr = servidor.accept( )            # quan un client es connecti, accepta la connexió

    addr = str(addr)                           # cal convertir el format a cadena de caracters (string)

    print ('Nova connexió des de', addr)       # imprimeix l'adreça del client, desada com str en la variable addr

    # conn: nou sòcol per escoltar les sol·licituds entrants i enviar el text HTML com a resposta

    # addr: variable on es desa l'adreça del client que es vol connectar al servidor

 

    peticio = conn.recv(1024)                  # desa la sol·licitud rebuda al sòcol en la variable peticio

    # l'argument 1024 especifica el màxim de dades que es poden rebre alhora

    peticio = str (peticio)                    # cal transformar el format a string perquè s'entingui després

    print (peticio)                            # imprimeix el contingut de la sol·licitud

    print ('==========')                       # separador per llegir millor a la consola

    

    # envia la resposta al client:

    conn.send ('HTTP/1.1 200 OK\n')     # codi de resposta HTTP (200: estat satisfactori) \n indica salt de línia

    conn.send ('Content-Type: text/html\n')

    conn.send ('Connection: close\n\n')

    conn.sendall (pag_web())                   # envia com a resposta el text html retornat per la funció pag_web 

    conn.close( )                              # tanca el sòcol creat

bottom of page