En este tutorial, aprenderás cómo implementar un servidor web en el microcontrolador ESP32 para controlarlo de forma inalámbrica a través de Wi-Fi. Esto te permitirá usar el servidor web para encender o apagar el LED integrado desde una página web.
El ESP32 es un microcontrolador potente que ofrece capacidades Wi-Fi integradas, lo que lo convierte en una opción ideal para proyectos que requieren comunicación inalámbrica. Al configurar un servidor web en el ESP32, podemos crear una interfaz de usuario accesible desde cualquier ordenador o teléfono conectado a la misma red Wi-Fi.
Controlar dispositivos de forma remota mediante un servidor web abre un amplio abanico de posibilidades para la automatización del hogar, proyectos IoT e incluso robótica. Imagina poder encender o apagar luces, electrodomésticos o un robot desde tu smartphone o tu ordenador.
¡Vamos a empezar!
Componentes necesarios
A continuación encontrarás los componentes necesarios para montar el proyecto. Para este proyecto, estoy usando una placa ESP32 antigua, que ya está descatalogada, pero que aún puedes conseguir a un precio muy bajo. Es la que aparece listada abajo. Existe un modelo sucesor con mejores especificaciones, que puedes encontrar here.
ESP32 lite
Cable de datos USB
Arduino IDE
Makerguides is a participant in affiliate advertising programs designed to provide a means for sites to earn advertising fees by linking to Amazon, AliExpress, Elecrow, and other sites. As an Affiliate we may earn from qualifying purchases.
Me gusta el ESP32 lite por su bajo precio y el conector de batería con capacidad de recarga. Pero prácticamente cualquier otra placa ESP32 debería funcionar con este proyecto. Como vamos a usar el LED integrado del ESP32, no necesitarás ningún otro componente de hardware.
En la siguiente sección, veremos rápidamente los conceptos básicos de la comunicación Wi-Fi.
Cómo funciona el Wi-Fi
Wi-Fi, abreviatura de Wireless Fidelity, es una tecnología que permite a los dispositivos conectarse a Internet o comunicarse entre sí de forma inalámbrica.
Entendiendo lo básico
El Wi-Fi utiliza señales de radiofrecuencia para transmitir y recibir datos entre dispositivos. Estas ondas de radio se transmiten por el aire y pueden atravesar paredes y otros obstáculos, permitiendo la comunicación inalámbrica.
Para establecer una conexión Wi-Fi, necesitas dos componentes principales: un dispositivo con Wi-Fi (como un ESP32) y un Wi-Fi router (ver imagen arriba). El router actúa como un centro que permite que tus dispositivos se comuniquen entre sí en la red.
Ten en cuenta que el router también puede conectar tu dispositivo a Internet, pero en este proyecto no vamos a hacer eso.
El papel de los SSID y contraseñas
Cuando te conectas a una red Wi-Fi, se te pide que introduzcas el SSID (Service Set Identifier) y la contraseña. El SSID es un nombre único que identifica la red Wi-Fi (por ejemplo, «mi_wifi_casa»), mientras que la contraseña garantiza el acceso seguro a la red. Así, nadie sin la contraseña podrá acceder al servidor web del ESP32 que vamos a implementar.
Una vez que introduces el SSID y la contraseña correctos, tu dispositivo envía una solicitud de conexión al router Wi-Fi. El router entonces autentica tu dispositivo y le asigna una IP address, que sirve como identificador único en la red.
Direcciones IP y comunicación
Las direcciones IP juegan un papel crucial en la comunicación Wi-Fi. Una dirección IP es una etiqueta numérica única, por ejemplo 192.0.1.1 o 192.0.1.2, que se asigna a cada dispositivo en una red. Permite que los dispositivos envíen y reciban datos a dispositivos específicos.
Cuando conectas tu ESP32 a una red Wi-Fi, el router le asigna una dirección IP. Esta dirección IP permite que otros dispositivos en la red se comuniquen con el ESP32. Por ejemplo, cuando accedes a una página web alojada en el ESP32, tu dispositivo envía una solicitud a la dirección IP del ESP32, y el ESP32 responde sirviendo la página web solicitada.
Estándares y frecuencias Wi-Fi
La tecnología Wi-Fi tiene diferentes estándares y frecuencias. Los estándares Wi-Fi más comunes son 802.11b, 802.11g, 802.11n y 802.11ac, cada uno ofreciendo diferentes velocidades y capacidades.
El Wi-Fi opera en dos bandas de frecuencia principales: 2,4 GHz y 5 GHz. La banda de 2,4 GHz tiene mayor alcance pero puede ser más susceptible a interferencias de otros dispositivos, como microondas y teléfonos inalámbricos. La banda de 5 GHz ofrece velocidades más rápidas pero tiene un alcance más corto.
Los módulos Wi-Fi actuales del ESP32 suelen usar el estándar 802.11 b/g/n (802.11n hasta 150 Mbps), 2,4 GHz.
En la siguiente sección, aprenderás qué es un servidor web y cómo puede usarse para controlar un ESP32 de forma inalámbrica.
¿Qué es un servidor web?
Un Web Server es una aplicación de software que se ejecuta en un ordenador y se encarga de servir páginas web a clientes/dispositivos. Actúa como intermediario entre el navegador web del cliente y la página web solicitada. Cuando un cliente/dispositivo solicita una página web, el servidor web procesa la solicitud y envía la página web solicitada al cliente.
En el contexto de controlar un ESP32 de forma inalámbrica por Wi-Fi, un servidor web nos permite crear una interfaz de usuario a la que se puede acceder desde un navegador web en un ordenador. Esta interfaz de usuario puede usarse para enviar comandos al ESP32 a través del router, como encender o apagar LEDs.
El servidor web en el ESP32 escucha las solicitudes entrantes de los clientes, como un navegador web, y responde a esas solicitudes enviando la página web adecuada o ejecutando la acción solicitada. En nuestro caso, implementaremos un servidor web en el ESP32 que puede recibir comandos desde una página web y controlar los LEDs en consecuencia.
El servidor web normalmente envía una página web en formato HTML y la siguiente sección te dará una breve introducción a HTML.
¿Qué es HTML?
HTML significa HyperText Markup Language. Es el lenguaje estándar utilizado para crear páginas web y aplicaciones. Utiliza un conjunto de etiquetas para definir los elementos y sus propiedades dentro de una página web.
Las etiquetas HTML se encierran entre corchetes angulares (< >) y constan de una etiqueta de apertura y una de cierre. La etiqueta de apertura indica el inicio de un elemento, mientras que la de cierre señala el final del elemento. El contenido entre la etiqueta de apertura y la de cierre representa la información asociada a ese elemento.
Las etiquetas HTML pueden usarse para definir encabezados, párrafos, listas, imágenes, enlaces, tablas, formularios y mucho más. Estas etiquetas te permiten estructurar y organizar tu contenido, facilitando que los navegadores interpreten y muestren la página web correctamente.
Ejemplo de una página HTML
Aquí tienes un ejemplo de la sencilla página web HTML que usaremos para controlar nuestro ESP32:
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Controller</title>
</head>
<body>
<h1>ESP32 Controller</h1>
<p>LED:
<a href="/led/on"><button>ON</button></a>
<a href="/led/off"><button>OFF</button></a>
</p>
</body>
</html>
En este ejemplo, tenemos un documento HTML encerrado dentro de las etiquetas » html «. La sección » head » contiene metainformación sobre la página web, como el título que se muestra en la barra de título del navegador.
<head> <title>ESP32 Controller</title> </head>
La » body » sección contiene el contenido visible de la página web. Dentro de la sección » body » , vemos varias otras etiquetas HTML. La etiqueta » h1 » representa un encabezado, y la etiqueta » p » un párrafo. Dentro del párrafo tenemos dos etiquetas » a » que crean hipervínculos. En este caso, los hipervínculos están asociados a dos botones que encienden o apagan un LED.
<h1>ESP32 Controller</h1>
<p>LED:
<a href="/led/on"><button>ON</button></a>
<a href="/led/off"><button>OFF</button></a>
</p>
Mostrando la página web
Si escribes este código HTML en un archivo (por ejemplo, test.html) y lo cargas en tu navegador web, verás la siguiente página:
Notarás que, al hacer clic en los botones, no ocurre nada. Esto es porque aún no estamos ejecutando nuestro servidor web, que será el que reaccione a estos botones. Pero eso es lo que vamos a implementar en la siguiente sección.
Implementando el servidor web
El siguiente código muestra la implementación de un servidor web ejecutándose en un ESP32 que te permite encender y apagar el LED integrado del ESP32 mediante un botón en la página web. Échale un vistazo rápido al código completo primero. Explicaré las diferentes partes del código en las siguientes secciones.
// Switch built-in LED of ESP32 via web server. Based on
// https://github.com/espressif/arduino-esp32/blob/master/libraries/WiFi/examples/SimpleWiFiServer/SimpleWiFiServer.ino
#include "WiFi.h"
const char* ssid = "*****";
const char* password = "*****";
const int ledPin = LED_BUILTIN;
const char* html = R""""(
HTTP/1.1 200 OK
Content-type:text/html
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Controller</title>
<style>
body { text-align: center; font-family: Arial, sans-serif; }
button { background-color: slateblue; color: white; border: none; width: 50px; height: 30px; }
button:hover { background-color: darkslateblue; }
button:active { background-color: mediumslateblue; }
</style>
</head>
<body>
<h1>ESP32 Controller</h1>
<p>LED:
<a href="/led/on"><button>ON</button></a>
<a href="/led/off"><button>OFF</button></a>
</p>
</body>
</html>
)"""";
WiFiServer server(80);
void setup() {
Serial.begin(115200);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, HIGH);
delay(10);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop() {
WiFiClient client = server.accept();
if (client) {
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
if (c == '\n') {
if (currentLine.length() == 0) {
client.println(html);
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
// Execute commands
if (currentLine.endsWith("GET /led/on")) {
digitalWrite(ledPin, LOW);
}
if (currentLine.endsWith("GET /led/off")) {
digitalWrite(ledPin, HIGH);
}
}
}
client.stop();
}
}
Ten en cuenta que necesitas tener instalado el core de ESP32 para usar este código en el Arduino IDE. Tenemos el siguiente tutorial sobre eso, si necesitas ayuda: How to Program ESP32 with Arduino IDE.
Librerías y constantes
Para empezar, incluimos la librería necesaria para la comunicación Wi-Fi. Forma parte del core de ESP32 y no requiere ninguna instalación especial.
#include "WiFi.h"
A continuación, definimos el SSID y la contraseña de nuestra red Wi-Fi. Debes reemplazar estos datos por las credenciales de tu red Wi-Fi. El SSID es el nombre de tu Wi-Fi doméstico, por ejemplo «mi_wifi_casa», y la contraseña es la que usas normalmente para conectarte a esa red (con tu móvil o tu ordenador).
const char* ssid = "*****"; const char* password = "*****";
También definimos el número de pin para el LED integrado en el ESP32. Podrías conectar fácilmente un LED externo, o dispositivos como relés. Solo tienes que añadir aquí las definiciones de los pines relevantes y conectar el hardware.
const int ledPin = LED_BUILTIN;
HTML para la página web
A continuación, escribimos el código HTML que se enviará al navegador web. Este código HTML incluye un título, algo de CSS estilo y botones para controlar el LED.
const char* html = R""""(
HTTP/1.1 200 OK
Content-type:text/html
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Controller</title>
<style>
body { text-align: center; font-family: Arial, sans-serif; }
button { background-color: slateblue; color: white; border: none; width: 50px; height: 30px; }
button:hover { background-color: darkslateblue; }
button:active { background-color: mediumslateblue; }
</style>
</head>
<body>
<h1>ESP32 Controller</h1>
<p>LED:
<a href="/led/on"><button>ON</button></a>
<a href="/led/off"><button>OFF</button></a>
</p>
</body>
</html>
)"""";
Es básicamente el mismo código HTML que te mostré en la sección «¿Qué es HTML?». Solo que con algo de CSS estilo adicional para que la página web se vea mejor. Abajo tienes una imagen de lo que verás en un navegador (aquí el navegador Edge):
Después de eso, creamos un objeto servidor Wi-Fi en el puerto 80, en la siguiente línea. El puerto 80 es el puerto que se usa habitualmente para servir páginas web. Puedes leer más sobre ports here.
WiFiServer server(80);
Función setup
En la función setup, inicializamos la comunicación serie para depuración, configuramos el pin del LED como salida y encendemos el LED.
Serial.begin(115200); pinMode(ledPin, OUTPUT); digitalWrite(ledPin, HIGH);
Luego nos conectamos a la red Wi-Fi usando el SSID y la contraseña proporcionados y esperamos a que la conexión sea exitosa. Revisa el Monitor Serie y si solo ves «puntos» aparecer, algo está mal. Asegúrate de tener el SSID y la contraseña correctos.
delay(10);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
Si logramos conectarnos a la red Wi-Fi, mostramos la dirección IP. Haz una copia de ella, ya que la necesitarás más adelante para el navegador web.
Una vez establecida la conexión Wi-Fi, iniciamos el servidor Wi-Fi mediante
server.begin();
Función loop
En la función loop, comprobamos si hay un cliente conectado al servidor. El cliente será el navegador web. Si lo hay, leemos los datos entrantes del cliente y los procesamos.
El siguiente código está basado en gran parte en el SimpleWiFiServer ejemplo proporcionado por el WiFi library. Si necesitas información más detallada o aplicaciones, échale un vistazo allí.
void loop() {
WiFiClient client = server.accept();
if (client) {
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
if (c == '\n') {
if (currentLine.length() == 0) {
client.println(html);
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
// Execute commands
if (currentLine.endsWith("GET /led/on")) {
digitalWrite(ledPin, LOW);
}
if (currentLine.endsWith("GET /led/off")) {
digitalWrite(ledPin, HIGH);
}
}
}
client.stop();
}
}
Dentro del loop, leemos cada carácter del cliente y lo añadimos a la línea actual. Cuando encontramos un carácter de nueva línea, comprobamos si la línea actual está vacía. Si lo está, enviamos el código HTML al cliente. Si no, limpiamos la línea actual.
La parte más importante es donde comprobamos el contenido de la línea actual. Si vemos que la línea termina con «/led/on» o «/led/off», encendemos o apagamos el LED según corresponda llamando a digitalWrite para el ledPin.
Ten en cuenta que la lógica para el LED integrado del ESP32 lite (y algunas otras placas) está invertida. Ponemos el ledPin en LOW si queremos encender el LED y viceversa. Para LEDs externos, hay que poner el ledPin en HIGH para encender el LED.
if (currentLine.endsWith("GET /led/on")) {
digitalWrite(ledPin, LOW);
}
if (currentLine.endsWith("GET /led/off")) {
digitalWrite(ledPin, HIGH);
}
En caso de que quieras añadir comandos adicionales, ¡este es el lugar para hacerlo! Por ejemplo, podríamos encender o apagar un relé, suponiendo que hay un relé conectado a relayPin, añadiendo las siguientes líneas:
if (currentLine.endsWith("GET /relay/on")) {
digitalWrite(relayPin, LOW);
}
if (currentLine.endsWith("GET /relay/off")) {
digitalWrite(relayPin, HIGH);
}
Recuerda añadir una constante relayPin y botones adicionales en la página web también:
<p>Relay:
<a href="/relay/on"><button>ON</button></a>
<a href="/relay/off"><button>OFF</button></a>
</p>
Ten en cuenta que los comandos «led/on», «led/off», … que se usan en la página web y en el código que ejecuta los comandos ¡deben coincidir!
Si pulsas un botón, verás el comando aparecer como un enlace después de la dirección IP en tu navegador web:
También puedes usar estos enlaces para ejecutar comandos en vez de pulsar los botones. Y puedes usar estos enlaces en otras páginas web, por ejemplo, en una web de servidor doméstico IoT que funcione en tu red Wi-Fi.
Ejecutando el servidor web
Si reinicias tu ESP32 y abres el Monitor Serie deberías ver un texto que muestra la dirección IP de tu ESP32. En mi caso, por ejemplo, para mi ESP32 es 192.168.1.165.
Verás una dirección IP diferente; la que se ha asignado a tu placa ESP32. Copia esa dirección en la barra de búsqueda de tu navegador. Deberías ver la página web que crea el servidor web en tu ESP32:
Ahora puedes pulsar los botones para encender o apagar el LED integrado de tu ESP32.
La página web es bastante segura, ya que solo se puede acceder a ella desde tu red Wi-Fi local. ¡No es accesible públicamente desde Internet! Si quieres eso, requerirá más trabajo y medidas de seguridad, ya que es arriesgado abrir tu red Wi-Fi a Internet.
¡Y eso es todo!
El código anterior te da una base que puedes ampliar fácilmente con botones adicionales, deslizadores u otros elementos de interfaz que permitan controlar lights, servos, stepper motors, relays o cualquier otra cosa que puedas conectar a un ESP32.
Conclusión
En este tutorial, hemos aprendido cómo implementar un servidor web en el ESP32 para controlarlo de forma inalámbrica a través de Wi-Fi. Siguiendo los pasos descritos en este post, ahora puedes encender y apagar LEDs desde una página web.
Empezamos entendiendo los conceptos básicos del Wi-Fi y cómo funciona. Después, exploramos el concepto de servidor web y su papel facilitando la comunicación entre el ESP32 y la página web. También hablamos de la importancia de HTML, que nos permite crear la interfaz de usuario para controlar los LEDs. Tras adquirir una base sólida, implementamos el servidor web en el ESP32.
Si has seguido este tutorial, deberías tener un servidor web totalmente funcional ejecutándose en tu ESP32. Ahora puedes acceder a la página web desde cualquier dispositivo con navegador web conectado a la misma red Wi-Fi.
Siéntete libre de ampliar la funcionalidad añadiendo más características a la página web, como controlar otros componentes o sensores conectados al ESP32. Si tienes más preguntas o necesitas ayuda, consulta la sección de Preguntas Frecuentes a continuación.
Preguntas Frecuentes
Aquí tienes algunas preguntas frecuentes sobre cómo implementar un servidor web para controlar tu ESP32 de forma inalámbrica por Wi-Fi:
P: ¿Cuál es la ventaja de controlar el ESP32 de forma inalámbrica?
R: Controlar el ESP32 de forma inalámbrica te permite operar tu dispositivo a distancia sin necesidad de interacción física. Esto aporta comodidad y flexibilidad, especialmente si el ESP32 está en un lugar de difícil acceso.
P: ¿Cuáles son los componentes necesarios para este proyecto?
R: Para el proyecto solo necesitas un ESP32 (con Wi-Fi) y el Arduino IDE con el core de ESP32 instalado.
P: ¿Cómo funciona el Wi-Fi con el ESP32?
R: El ESP32 tiene capacidades Wi-Fi integradas, lo que le permite conectarse a una red inalámbrica. Puede actuar como cliente para conectarse a una red Wi-Fi existente o como punto de acceso para crear su propia red. Al conectarse a una red Wi-Fi, el ESP32 puede comunicarse con otros dispositivos en la red.
P: ¿Puedo usar este código para un ESP8266
R: Sí, puedes. Solo tienes que reemplazar la librería WiFi cambiando #include "WiFi.h" por #include "ESP8266WiFi.h".
P: ¿Qué es un servidor web?
R: Un servidor web es una aplicación de software que sirve páginas web a clientes a través de Internet o una red local. En el contexto de este proyecto, el ESP32 actúa como servidor web, sirviendo una página web que permite a los usuarios controlar los LEDs conectados a él.
P: ¿Qué es HTML?
R: HTML (Hypertext Markup Language) es el lenguaje estándar de marcado usado para crear páginas web. Proporciona la estructura y el formato para el contenido de una página web. En este proyecto, usaremos HTML para crear la página web que controla los LEDs.
P: ¿Cómo puedo conectarme al servidor web desde Internet?
R: Para conectarte al servidor web desde Internet, debes asegurarte de que tu ESP32 esté conectado a una red Wi-Fi con acceso a Internet. Una vez que tu ESP32 esté conectado a Internet, puedes acceder al servidor web introduciendo su dirección IP en un navegador web desde cualquier dispositivo conectado a Internet. Tendrás que configurar tu router para permitir conexiones entrantes a la dirección IP del ESP32, ¡lo cual es un tema de seguridad! ¡Ten cuidado!
P: ¿Cómo creo una pantalla de inicio de sesión para el servidor web?
R: Para crear una pantalla de inicio de sesión para el servidor web, puedes usar HTML y CSS para diseñar el formulario de inicio de sesión. Puedes añadir campos de entrada para usuario y contraseña, y un botón de enviar para enviar las credenciales al servidor. En el lado del servidor, puedes implementar un mecanismo de autenticación. El servidor puede entonces verificar las credenciales y conceder acceso al servidor web si son válidas.
Si tienes más preguntas o encuentras algún problema al implementar el servidor web en tu ESP32, no dudes en preguntar en la sección de comentarios de abajo.
Enlaces
Aquí tienes una colección de enlaces a proyectos similares que implican el control de microcontroladores ESP32 o ESP8266 por Wi-Fi usando un servidor web.
- ESP32_HTTPS_Server – Arduino Reference
- ESP32 Web Server – Arduino IDE
- ESP32 – Web Server
- ESP32 Relay Module – Control AC Appliances
- In-depth: Create A Simple ESP32 Web Server In Arduino IDE
- WebServer.h – espressif/arduino-esp32
