Servidor Web con ESP32

Servidor Web con ESP32 en Python

Explicaremos cómo se crea un Servidor Web utilizando un ESP32 en Python

Ejemplo del proyecto una vez acabado

Un servidor web es simplemente un sistema encargado de almacenar y mostrar el contenido de una página web. En este caso, el servidor funcionará de manera local. Este contenido se entrega al cliente que lo solicita y puede ser tanto en forma de texto, imágenes, vídeo o datos.

Una página web está alojada en un servidor ubicado en algún lugar, el cual es básicamente una computadora que proporciona espacio de datos para el sitio. Por su parte, el navegador web actúa como cliente, solicitando los datos del sitio web cuando introduce la URL en la barra de búsqueda. Esta comunicación se realiza a través del protocolo HTTP.

Ejemplo de comunicación entre la página web y el ESP32

En este caso, alojaremos una página web en un microcontrolador ESP32. Cuando se ingresa una URL única en un navegador web, envía una solicitud HTTP al ESP32 para manejar esta solicitud. Cuando el ESP32 lee esta solicitud, sabe que tiene que mostrar el contenido de la página web. A continuación se detallarán los pasos a seguir.

Con el siguiente código conectaremos la ESP32 a nuestra red e imprimiremos la IP que usaremos:

import network                             //Importamos librerías
try:
  import usocket as socket
except:
  import socket

from machine import Pin
import dht

import esp
esp.osdebug(None)

import gc
gc.collect()

ssid = ‘SSID del WiFi’                      //Rellenamos las credenciales de nuestra red WiFi
password = ‘Contraseña del WiFi’

station = network.WLAN(network.STA_IF)      //Creamos instancia del objeto WLAN que se configurará como cliente (ESP32)

station.active(True)                        //Activamos módulo WiFi en ESP32, para que se conecté a una red
station.connect(ssid, password)

while station.isconnected() == False:
  pass

print(‘Conexión exitosa’)
print(station.ifconfig())                   //Nos imprimé la dirección IP asignada

Una vez que hayamos ejecutado ese código obtendremos en la consola el valor de la IP que usaremos para conectarnos desde nuestro dispositivo. En este caso será 192.168.1.198.

Ejemplo de la consola al ejecutar el código

Una vez que hayamos ejecutado ese código obtendremos en la consola el valor de la IP que usaremos para conectarnos desde nuestro dispositivo. En este caso será 192.168.1.198. Una vez obtenida esta IP, ejecutaremos el siguiente código que será el encargado de crear el socket y de crear la página web en HTML y CSS. Resumido gráficamente a continuación:

Resumen de la comunicación entre el servidor y el cliente

import socket                                                  //Importamos librerías

def web_page():                                                //Definimos función para crear la página
  html = “””<!DOCTYPE HTML><html>
<head>
  <meta name=”viewport” content=”width=device-width, initial-scale=1“>        
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .dht-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 15px;
    }
  </style>
</head>
<body>
  <h2>Conexión establecida</h2>
</body>
</html>”””
  return html

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)           //Creamos SOCKET para manejar conexiones TCP/IP
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)         //Permitir la reutilización del puerto
s.bind((”, 80))                                                //Asociamos el SOCKET al puerto 80 (Puerto HTTP estándar)
s.listen(5)                                                     //5 conexiones máximas para estar en la cola de espera

print(“Servidor escuchando en el puerto 80”)

while True:                                                     //Bucle para permitir continuar aceptando conexiones
  conn, addr = s.accept()                                       //Acepta la conexión entrante y devuelve un nuevo socket (conn)
  print(‘Conexión recibida desde %s‘ % str(addr))               // y la dirección del cliente (addr)
  request = conn.recv(1024)
  print(‘Contenido = %s‘ % str(request))
  response = web_page()
  conn.send(‘HTTP/1.1 200 OK\r\n‘)                              //Envía respuesta indicando solicitud exitosa
  conn.send(‘Content-Type: text/html\r\n‘)                      //Indica el contenido de la respuesta
  conn.send(‘Connection: close\r\n‘)                                          
  conn.send(‘\r\n‘)
  conn.sendall(response)                                        //Envía todo el contenido HTML al cliente
  conn.close()

Una vez se han ejecutado ambos códigos y nos hemos conectado a la IP indicada, nos aparecerá por consola algo parecido a la siguiente imagen.

Ejemplo de la consola al ejecutar ambos códigos

Ejemplo una vez nos hemos conectado al servidor web

Esperemos que os haya servido de ayuda en vuestros proyectos o que al menos hayáis aprendido algo que desconocíais. Si tenéis algún tipo de problema o duda, no dudéis en dejarlo en comentarios.