Encender un LED por Wi-Fi con ESP32: Crear tu primer Servidor Web

Encender un LED por Wi-Fi con ESP32

Crea tu primer Servidor Web y controla un LED desde el móvil

🏷️ ESP32-IOT

Introducción

Imagina encender la luz de tu habitación desde la cama, usando solo el navegador de tu móvil. Eso es el Internet de las Cosas (IoT). En el tutorial anterior aprendimos a conectar el ESP32 al Wi-Fi y obtener una dirección IP. Hoy, vamos a usar esa IP para crear un Servidor Web dentro del propio ESP32.

Este proyecto es el "Hola Mundo" definitivo del IoT. Construiremos una página web ultra-simple que tendrá dos botones (links): uno para ENCENDER el LED integrado de la placa, y otro para APAGARLO.

Esquema de Conexiones

Para este primer proyecto, no necesitas cablear nada extra. Vamos a usar el LED azul integrado en la placa ESP32, que está conectado internamente al Pin 2 (En Arduino usábamos el Pin 13, pero en ESP32 es el Pin 2).

Si decides usar un LED externo con resistencia (220Ω), conéctalo al Pin 2.

El Concepto: ¿Cómo funciona un Servidor Web en un Microcontrolador?

Antes de ver el código, entiende la lógica (es más simple de lo que parece):

1. Tu ESP32 se conecta al Wi-Fi y se queda "escuchando" en el puerto 80 (el puerto estándar de internet) esperando visitas.
2. Tú abres el navegador de tu móvil y escribes la IP del ESP32 (ej: 192.168.1.50).
3. El móvil envía un mensaje al ESP32 diciendo: "Quiero ver tu página".
4. El ESP32 lee ese mensaje y envía código HTML al móvil. El móvil dibuja dos botones: "ON" y "OFF".
5. Cuando tú clicas en "ON", el móvil envía un mensaje nuevo al ESP32: "Quiero acceder a la ruta /on".
6. El ESP32 lee la URL, ve que dice "/on", ejecuta digitalWrite(2, HIGH), y enciende el LED.

Código de Arduino: Servidor Web Básico

Este código une la conexión Wi-Fi del tutorial anterior con la lógica de servidor. Es un código largo, pero la mayoría es estructural para mantener la comunicación HTTP.

Recuerda cambiar SSID y PASSWORD por los datos de tu casa.

sketch.ino

// Librería Wi-Fi del ESP32
#include <WiFi.h>

// Tus datos de red (¡CAMBIA ESTO!)
const char* ssid = "NOMBRE_DE_TU_WIFI";
const char* password = "TU_CONTRASEÑA_WIFI";

// Configuramos el servidor web en el puerto 80 (puerto estándar HTTP)
WiFiServer server(80);

// Pin del LED integrado en ESP32 (Pin 2)
const int ledPin = 2; 

// Variable para guardar la petición HTTP del cliente
String header;

void setup() {
  Serial.begin(115200);
  
  // Configuramos el LED como salida y lo apagamos al inicio
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);

  // Conectamos al Wi-Fi (igual que el tutorial anterior)
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Wi-Fi conectado. IP: ");
  Serial.println(WiFi.localIP()); // ¡ESTA IP ES LA QUE PONES EN EL MÓVIL!
  
  // Iniciamos el servidor
  server.begin();
}

void loop() {
  // Escuchamos si hay algún cliente (móvil/PC) conectándose
  WiFiClient client = server.available(); 

  if (client) { // Si un cliente se conecta
    Serial.println("Nuevo cliente conectado.");
    String currentLine = "";
    
    // Mientras el cliente esté conectado
    while (client.connected()) {
      if (client.available()) { // Si hay datos para leer
        char c = client.read(); // Leemos carácter por carácter
        header += c;
        
        if (c == '\n') { // Si el cliente envía un salto de línea
          // Si la línea actual está vacía, significa que acabó la petición
          if (currentLine.length() == 0) {
            
            // 1. ENVIAMOS LA RESPUESTA HTTP Y LA PÁGINA HTML AL MÓVIL
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println(); // Línea vacía importante
            
            // Creamos la página HTML con los dos links
            client.println("<h1>ESP32 Web Server</h1>");
            client.println("<a href=\"/on\"><button>ENCENDER LED</button></a>");
            client.println("<a href=\"/off\"><button>APAGAR LED</button></a>");
            
            // 2. EVALUAMOS LA PETICIÓN (Si clicaron ON o OFF)
            if (header.indexOf("GET /on") >= 0) {
              Serial.println("LED ON");
              digitalWrite(ledPin, HIGH); // Enciende el LED
            } else if (header.indexOf("GET /off") >= 0) {
              Serial.println("LED OFF");
              digitalWrite(ledPin, LOW);  // Apaga el LED
            }
            
            // Rompemos el bucle while porque ya respondimos
            break;
          } else { // Si no está vacía, reseteamos la línea
            currentLine = "";
          }
        } else if (c != '\r') { // Si no es un retorno de carro
          currentLine += c; // Añadimos el carácter a la línea actual
        }
      }
    }
    // Limpiamos la variable header para la próxima petición
    header = "";
    // Cerramos la conexión con el cliente
    client.stop();
    Serial.println("Cliente desconectado.");
  }
}

Explicación del Código: La Lógica del Servidor

Las tres claves para entender este código y no copiarlo sin saber qué hace:

1. WiFiServer server(80): Creamos un objeto "server" que escucha en el puerto 80. Es el puerto por defecto de internet. Si pusieras el 8080, tendrías que escribir en el navegador 192.168.1.50:8080.
2. client.println(...): Aquí estamos programando como webmasters. Escribimos código HTML que el móvil recibirá y dibujará. Hemos creado dos botones simples (<button>) que son enlaces (<a href>). Si clicas "ENCENDER", el móvil pide la ruta "/on".
3. header.indexOf("GET /on"): Esta es la inteligencia. La variable header guarda toda la petición del móvil. Buscamos dentro de ese texto la palabra "GET /on". Si la encuentra, significa que el usuario clicó el botón de encender, así que ejecutamos digitalWrite(HIGH).

Cómo probarlo en tu móvil o PC

1. Sube el código a tu ESP32 y abre el Monitor Serie a 115200 baudios.
2. El Monitor Serie imprimirá la IP (ej: 192.168.1.50). ¡Apunta esa IP!
3. Asegúrate que tu móvil está conectado a la misma red Wi-Fi de 2.4GHz que el ESP32.
4. Abre Chrome, Safari o Firefox en tu móvil/PC.
5. Escribe en la barra de direcciones la IP: 192.168.1.50 (sin http ni www, solo los números).
6. Verás la página web con los dos botones. ¡Pruébalo! Verás el LED azul de la placa encenderse y apagarse, y el Monitor Serie te confirmará cada acción.

🛒 Materiales para este proyecto

COMPONENTE	DESCRIPCIÓN	ENLACE
ESP32 DevKit V1	Placa con Wi-Fi y Bluetooth integrados, usa su LED azul integrado en este proyecto.	VER EN AMAZON
Kit de LEDs variados + resistencias	Opcional, si quieres usar un LED externo en vez del integrado en la placa.	VER EN AMAZON

🎥 Vídeo relacionado

❓ Preguntas frecuentes

No con este código tal cual, ya que el ESP32 solo escucha en tu red local. Para acceder desde fuera necesitarías redirigir puertos en tu router (con los riesgos de seguridad que eso conlleva) o usar una solución tipo VPN, similar a lo que explicamos para acceder a la Raspberry Pi de forma segura desde fuera de casa.

Sí. Solo tienes que declarar más variables de pin, añadir más rutas ("/led2on", "/led2off"...) y más botones en el HTML que genera el ESP32, siguiendo exactamente la misma lógica que ya usamos para el primer LED.

Porque en este tutorial escribimos HTML "a pelo", carácter a carácter, sin CSS. Es la forma más sencilla de entender la lógica por primera vez. Con librerías más avanzadas como ESPAsyncWebServer se pueden servir páginas con estilos, JavaScript e incluso gráficos, algo que veremos en tutoriales más adelante.

Conclusión

Crear un servidor web en un chip de 5 euros es increíble. Has demostrado que puedes interactuar con el mundo físico desde una interfaz digital remota. Este ejemplo usa código HTML crudo muy básico; en proyectos más avanzados, el ESP32 puede servir páginas web complejas con CSS, JavaScript y gráficos (usando la librería ESPAsyncWebServer).

Si quieres ver otra forma de controlarlo sin usar Wi-Fi, en nuestro próximo tutorial te enseñaremos a encender el mismo LED usando Bluetooth Classic con ESP32 desde el móvil