Servidor web ESP32 – IDE de Arduino

¿Estás buscando una manera sencilla y eficiente de crear un servidor web con tu ESP32? ¡Entonces estás en el lugar correcto! En este artículo te enseñaremos cómo configurar tu ESP32 con el IDE de Arduino para que puedas crear tu propio servidor web en pocos pasos. ¡Sigue leyendo para descubrir todo lo que necesitas saber!

En este proyecto, creará un servidor web independiente con un ESP32 que controla las salidas (dos LED) utilizando el entorno de programación Arduino IDE. El servidor web es móvil y se puede acceder a él con cualquier dispositivo que disponga de un navegador en la red local. Le mostraremos paso a paso cómo crear el servidor web y cómo funciona el código.

Si desea obtener más información sobre ESP32, lea la guía Introducción a ESP32.

Mira el vídeotutorial

Este tutorial está disponible en formato de video (ver más abajo) y formato escrito (continúe leyendo esta página).

Descripción del proyecto

Antes de pasar directamente al proyecto, es importante definir qué queremos que haga nuestro servidor web para que sea más fácil seguir los pasos más adelante.

• El servidor web que usted construye controla dos LED conectados al ESP32 GPIO26 Y GPIO27;
• Puede acceder al servidor web ESP32 ingresando la dirección IP ESP32 en un navegador en la red local.
• Al hacer clic en los botones de su servidor web, puede cambiar instantáneamente el estado de cada LED.

Este es sólo un ejemplo sencillo para ilustrar cómo construir un servidor web que controle las salidas. La idea es pasar estos LED por uno reléo cualquier otro componente electrónico.

Instalación de la placa ESP32 en Arduino IDE

Existe un complemento para Arduino IDE que le permite programar el ESP32 usando el Arduino IDE y su lenguaje de programación. Siga uno de los siguientes tutoriales para preparar su IDE de Arduino:

• instrucciones de Windows – Instalación de la placa ESP32 en Arduino IDE
• Instrucciones para Mac y Linux – Instalación de la placa ESP32 en Arduino IDE

Piezas requeridas

Para este tutorial necesitarás las siguientes partes:

• Placa de desarrollo ESP32 – leer placas de desarrollo ESP32 probadas y comparadas
• 2 LED de 5 mm
• 2 resistencias de 330 ohmios
• tablero de circuitos
• Cables de puente

Puedes utilizar los enlaces anteriores o ir directamente MakerAdvisor.com/tools ¡Para encontrar todas las piezas para tus proyectos al mejor precio!

Esquema

Empiece por construir el circuito. Conecte dos LED al ESP32 como se muestra en el diagrama de circuito a continuación: un LED conectado a GPIO26y el otro tambien GPIO27.

nota: Usamos una placa ESP32 DEVKIT DOIT con 36 pines. Antes de ensamblar el circuito, asegúrese de verificar la distribución de pines de la placa que está utilizando.

Código del servidor web ESP32

Aquí proporcionamos el código que crea el servidor web ESP32. Copie el siguiente código en su IDE de Arduino, pero no lo cargue todavía. Deberá realizar algunos cambios para que funcione para usted.

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/

// Load Wi-Fi library
#include <WiFi.h>

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String output26State = "off";
String output27State = "off";

// Assign output variables to GPIO pins
const int output26 = 26;
const int output27 = 27;

// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0; 
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

void setup() {
  Serial.begin(115200);
  // Initialize the output variables as outputs
  pinMode(output26, OUTPUT);
  pinMode(output27, OUTPUT);
  // Set outputs to LOW
  digitalWrite(output26, LOW);
  digitalWrite(output27, LOW);

  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    currentTime = millis();
    previousTime = currentTime;
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected() && currentTime - previousTime <= timeoutTime) {  // loop while the client's connected
      currentTime = millis();
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == 'n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            // turns the GPIOs on and off
            if (header.indexOf("GET /26/on") >= 0) {
              Serial.println("GPIO 26 on");
              output26State = "on";
              digitalWrite(output26, HIGH);
            } else if (header.indexOf("GET /26/off") >= 0) {
              Serial.println("GPIO 26 off");
              output26State = "off";
              digitalWrite(output26, LOW);
            } else if (header.indexOf("GET /27/on") >= 0) {
              Serial.println("GPIO 27 on");
              output27State = "on";
              digitalWrite(output27, HIGH);
            } else if (header.indexOf("GET /27/off") >= 0) {
              Serial.println("GPIO 27 off");
              output27State = "off";
              digitalWrite(output27, LOW);
            }
            
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name="viewport" content="width=device-width, initial-scale=1">");
            client.println("<link rel="icon" href="data:,">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #555555;}</style></head>");
            
            // Web Page Heading
            client.println("<body><h1>ESP32 Web Server</h1>");
            
            // Display current state, and ON/OFF buttons for GPIO 26  
            client.println("<p>GPIO 26 - State " + output26State + "</p>");
            // If the output26State is off, it displays the ON button       
            if (output26State=="off") {
              client.println("<p><a href="/26/on"><button class="button">ON</button></a></p>");
            } else {
              client.println("<p><a href="/26/off"><button class="button button2">OFF</button></a></p>");
            } 
               
            // Display current state, and ON/OFF buttons for GPIO 27  
            client.println("<p>GPIO 27 - State " + output27State + "</p>");
            // If the output27State is off, it displays the ON button       
            if (output27State=="off") {
              client.println("<p><a href="/27/on"><button class="button">ON</button></a></p>");
            } else {
              client.println("<p><a href="/27/off"><button class="button button2">OFF</button></a></p>");
            }
            client.println("</body></html>");
            
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != 'r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

Ver código sin formato

Configuración de sus credenciales de red

Debe cambiar las siguientes líneas con sus credenciales de red: SSID y Contraseña. El código contiene comentarios detallados sobre dónde debe realizar los cambios.

// Replace with your network credentials
const char* ssid     = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Sube el código

Ahora puedes cargar el código y el servidor web funcionará inmediatamente. Siga los siguientes pasos para cargar el código al ESP32:

1) Conecte su placa ESP32 a su computadora;

2) En el IDE de Arduino, seleccione su placa en Herramientas > tablón (en nuestro caso utilizamos la placa ESP32 DEVKIT DOIT);

3) Seleccione el puerto COM en Herramientas > Puerto.

4) Presione el Subir En el IDE de Arduino, haga clic en el botón y espere unos segundos mientras el código se compila y se carga en su placa.

5) Espere el «Carga completada» Noticias.

Encuentre la dirección IP de ESP

Después de cargar el código, abra el monitor serie con una velocidad de baudios de 115200.

Presione el botón ESP32 EN (Restablecer). El ESP32 se conecta al WiFi y muestra la dirección IP del ESP en el monitor serie. Copie esta dirección IP, ya que la necesitará para acceder al servidor web ESP32.

Acceso al servidor web

Para acceder al servidor web, abra su navegador, pegue la dirección IP ESP32 y verá la siguiente página. En nuestro caso es 192.168.1.135.

Si echas un vistazo al Serial Monitor, podrás ver lo que sucede en segundo plano. El ESP recibe una solicitud HTTP de un nuevo cliente (en este caso, su navegador).

Además, puede ver más información sobre la solicitud HTTP.

Probando el servidor web

Ahora puede probar si su servidor web funciona correctamente. Haga clic en los botones para controlar los LED.

Al mismo tiempo, puede echar un vistazo al Serial Monitor para ver qué sucede en segundo plano. Por ejemplo, si hace clic en el botón para GPIO26 ON, ESP32 recibe una solicitud en el /26/am URL (dirección de Internet).

Cuando el ESP32 recibe esta solicitud, enciende el LED, que está encendido GPIO26 ON y actualiza su estado en el sitio web.

El botón para GPIO27 funciona de manera similar. Pruebe si funciona correctamente.

Cómo funciona el código

En esta sección, veremos más de cerca el código para ver cómo funciona.

Primero necesitas integrar la biblioteca WiFi.

#include <WiFi.h>

Como se mencionó anteriormente, deberá incluir su SSID y contraseña entre comillas en las siguientes líneas.

const char* ssid = "";
const char* password = "";

Luego configure su servidor web en el puerto 80.

WiFiServer server(80);

La siguiente línea crea una variable para almacenar el encabezado de la solicitud HTTP:

String header;

A continuación, cree variables adicionales para almacenar el estado actual de sus gastos. Si desea agregar más salidas y guardar sus estados, necesita crear más variables.

String output26State = "off";
String output27State = "off";

También necesitas asignar un GPIO a cada una de tus salidas. Aquí usamos GPIO26 Y GPIO27. Puede utilizar cualquier otro GPIO adecuado.

const int output26 = 26;
const int output27 = 27;

configuración()

Ahora vamos a ello configuración(). Primero, iniciamos la comunicación en serie con una velocidad de baudios de 115200 para fines de depuración.

Serial.begin(115200);

También define sus GPIO como SALIDAS y los configura en BAJO.

// Initialize the output variables as outputs
pinMode(output26, OUTPUT);
pinMode(output27, OUTPUT);

// Set outputs to LOW
digitalWrite(output26, LOW);
digitalWrite(output27, LOW);

Las siguientes líneas inician la conexión Wi-Fi con WiFi.begin(ssid, contraseña)espere una conexión exitosa e imprima la dirección IP del ESP en el monitor serie.

// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(500);
  Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();

Cinta()

En el Cinta() Programamos lo que sucede cuando un nuevo cliente se conecta al servidor web.

El ESP32 siempre espera clientes entrantes con la siguiente línea:

WiFiClient client = server.available(); // Listen for incoming clients

Cuando una solicitud proviene de un cliente, almacenamos los datos entrantes. El siguiente bucle while se ejecuta mientras el cliente permanezca conectado. Recomendamos no cambiar la siguiente parte del código a menos que sepa exactamente lo que está haciendo.

if (client) { // If a new client connects,
  Serial.println("New Client."); // print a message out in the serial port
  String currentLine = ""; // make a String to hold incoming data from the client
  while (client.connected()) { // loop while the client's connected
    if (client.available()) { // if there's bytes to read from the client,
      char c = client.read(); // read a byte, then
      Serial.write(c); // print it out the serial monitor
      header += c;
      if (c == 'n') { // if the byte is a newline character
      // if the current line is blank, you got two newline characters in a row.
      / that's the end of the client HTTP request, so send a response:
        if (currentLine.length() == 0) {
        // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
        // and a content-type so the client knows what's coming, then a blank line:
          client.println("HTTP/1.1 200 OK");
          client.println("Content-type:text/html");
          client.println("Connection: close");
          client.println();

La siguiente sección de declaraciones if y else verifica qué botón se presionó en su página web y controla la salida en consecuencia. Como ya hemos visto, realizamos una solicitud a diferentes URL en función del botón pulsado.

// turns the GPIOs on and off
if (header.indexOf("GET /26/on") >= 0) {
  Serial.println("GPIO 26 on");
  output26State = "on";
  digitalWrite(output26, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
  Serial.println("GPIO 26 off");
  output26State = "off";
  digitalWrite(output26, LOW);
} else if (header.indexOf("GET /27/on") >= 0) {
  Serial.println("GPIO 27 on");
  output27State = "on";
  digitalWrite(output27, HIGH);
} else if (header.indexOf("GET /27/off") >= 0) {
  Serial.println("GPIO 27 off");
  output27State = "off";
  digitalWrite(output27, LOW);
}

Por ejemplo, si presiona el botón GPIO 26 ON, el ESP32 recibirá una solicitud en el /26/EN URL (Podemos ver esta información en el encabezado HTTP del monitor serie). De esta manera podemos comprobar si el encabezado contiene la expresión OBTENER /26/am. Si lo contiene cambiamos el Estado de salida26 Variable a ON y el ESP32 enciende el LED.

Esto funciona de manera similar para los otros botones. Entonces, si desea agregar más resultados, debe modificar esta parte del código para incluirlos.

Ver la página web HTML

A continuación debe crear el sitio web. El ESP32 envía una respuesta a su navegador con algún código HTML para crear la página web.

La página web se envía al cliente mediante esta expresión. cliente.println(). Como argumento debes ingresar lo que deseas enviar al cliente.

Lo primero que debemos enviar es siempre la siguiente línea, que indica que estamos enviando HTML.

<!DOCTYPE HTML><html>

La siguiente línea hace que el sitio web responda en cualquier navegador web.

client.println("<head><meta name="viewport" content="width=device-width, initial-scale=1">");

Y para evitar solicitudes al favicon, se utiliza lo siguiente. – No tienes que preocuparte por esta línea.

client.println("<link rel="icon" href="data:,">");

Diseñando el sitio web

A continuación tenemos texto CSS para diseñar los botones y la apariencia de la página web. Elegimos la fuente Helvetica y definimos que el contenido debe mostrarse en bloque y centrado.

client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");

Diseñamos nuestros botones con el color #4CAF50, sin borde, con texto blanco y el siguiente padding: 16px 40px. También configuramos la decoración del texto en “ninguno”, definimos el tamaño de fuente, el margen y el cursor como puntero.

client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");

También definimos el estilo para un segundo botón con todas las propiedades del botón que definimos anteriormente, pero con un color diferente. Este será el estilo del botón de apagado.

client.println(".button2 {background-color: #555555;}</style></head>");

Configurar el primer encabezado de una página web

En la siguiente línea puede configurar el primer título de su sitio web. Aquí tenemos «servidor web ESP32“, pero puedes cambiar este texto por el que quieras.

// Web Page Heading
client.println("<h1>ESP32 Web Server</h1>");

Mostrar los botones y su estado correspondiente

Luego escribe un párrafo para explicarlo. GPIO26 estado actual. Como puedes ver, utilizamos el Salida26Estado Variable para que el estado se actualice inmediatamente cuando esta variable cambie.

client.println("<p>GPIO 26 - State " + output26State + "</p>");

Luego desplegamos el botón de encendido o apagado dependiendo del estado actual del GPIO. Si el estado actual del GPIO es apagado, mostramos el botón de encendido; de lo contrario, mostramos el botón de apagado.

if (output26State=="off") {
  client.println("<p><a href="/26/on"><button class="button">ON</button></a></p>");
} else {
  client.println("<p><a href="/26/off"><button class="button button2">OFF</button></a></p>");
}

Usamos el mismo procedimiento para GPIO27.

Cerrando la conexión

Finalmente, cuando finaliza la respuesta, eliminamos el Encabezados variable y finalizar la conexión con el cliente con cliente.parada().

// Clear the header variable
header = "";
// Close the connection
client.stop();

Envolver

En este tutorial le mostramos cómo crear un servidor web usando ESP32. Te mostramos un ejemplo simple que controla dos LED, pero la idea es reemplazar estos LED con un relé u otra salida que quieras controlar. Para más proyectos con ESP32, consulte los siguientes tutoriales:

• Construya un escudo de estación meteorológica ESP32 todo en uno
• Servidor web del servomotor ESP32
• Primeros pasos con ESP32 Bluetooth de baja energía (BLE)
• Más tutoriales de ESP32

Este es un extracto de nuestro curso: Aprendiendo ESP32 con Arduino IDE. Si te gusta ESP32 y quieres aprender más sobre él, te recomendamos apuntarte al curso Aprende ESP32 con Arduino IDE.

Servidor web ESP32 – IDE de Arduino

Descripción del Proyecto

En este proyecto, crearás un servidor web independiente con un ESP32 que controla salidas (dos LEDs) utilizando el entorno de programación de Arduino IDE. El servidor web es compatible con dispositivos móviles y se puede acceder con cualquier dispositivo que tenga un navegador en la red local. Te mostraremos cómo crear el servidor web y cómo funciona el código paso a paso.

¿Qué es un ESP32?

El ESP32 es un microcontrolador de bajo costo y bajo consumo de energía que integra Wi-Fi y Bluetooth. Es perfecto para proyectos de IoT, ya que permite la conexión inalámbrica a internet y la comunicación con otros dispositivos.

¿Qué es IDE de Arduino?

El IDE de Arduino es un entorno de desarrollo integrado que te permite programar placas de desarrollo como el ESP32 utilizando un lenguaje de programación basado en C/C++. Es una herramienta poderosa y fácil de usar para desarrollar proyectos de electrónica.

Instrucciones para Instalar el ESP32 en el Arduino IDE

Para programar el ESP32 con el Arduino IDE, necesitarás instalar una extensión. Puedes seguir las instrucciones detalladas para Windows, Mac y Linux en los siguientes tutoriales:

1. Windows instructions – Instalación del ESP32 Board en Arduino IDE
2. Mac and Linux instructions – Instalación del ESP32 Board en Arduino IDE

¿Qué necesitas para este proyecto?

Para este tutorial necesitarás los siguientes componentes:

• Placa de desarrollo ESP32
• 2 LEDs de 5 mm
• 2 resistencias de 330 Ohmios
• Protoboard
• Cables jumper

Código del Servidor Web ESP32

El siguiente código crea el servidor web ESP32. Copia el código en tu Arduino IDE y sigue las instrucciones para configurarlo antes de subirlo a la placa.

Cómo Funciona el Código

En esta sección, analizaremos el código paso a paso para comprender cómo funciona. Desde la inclusión de la biblioteca WiFi, hasta la creación de la página web que controla los LED, explicaremos cada parte del código.

Configuración de tus Credenciales de Red

Para que el ESP32 se conecte a tu red Wi-Fi, necesitas ingresar tus credenciales en el código. Sigue las instrucciones para modificar las líneas correspondientes con tu SSID y contraseña.

Cómo Subir el Código al ESP32

Una vez que hayas configurado el código con tus credenciales de red, puedes subirlo al ESP32 siguiendo los pasos indicados. Asegúrate de seleccionar el puerto y la placa correcta antes de subir el código.

Accediendo al Servidor Web

Después de subir el código, podrás acceder al servidor web abriendo tu navegador y pegando la dirección IP asignada al ESP32. Desde allí, podrás controlar los LED y ver el estado actual de las salidas.

Prueba del Servidor Web

Para asegurarte de que el servidor web funciona correctamente, prueba hacer clic en los botones para encender y apagar los LED. Observa cómo el estado cambia en la página y en el monitor serial del Arduino IDE.

Conclusión

En conclusión, este proyecto te ha permitido crear un servidor web con un ESP32 que controla salidas de manera remota. Continúa explorando las capacidades del ESP32 para desarrollar emocionantes proyectos de IoT. Sigue aprendiendo sobre el ESP32 y Arduino para expandir tus habilidades en el campo de la electrónica y la programación. ¡Diviértete creando!