Cree un servidor web ESP32 simple en Arduino IDE

¿Quieres crear tu propio servidor web con ESP32 pero no sabes por dónde empezar? ¡No te preocupes! En este artículo te enseñaremos cómo crear un servidor web simple utilizando Arduino IDE. Con unos pocos pasos y un poco de codificación, podrás tener tu servidor web funcionando en poco tiempo. ¡Sigue leyendo para descubrir cómo hacerlo!

El ESP32, el sucesor recién lanzado del ESP8266, es una estrella en ascenso en proyectos relacionados con IoT o WiFi. Es un módulo WLAN rentable que, con un poco de esfuerzo adicional, se puede programar para ejecutar un servidor web independiente. ¿Cuan genial es eso?

Este tutorial lo guiará a través del proceso de creación de un servidor web ESP32 simple en el IDE de Arduino. Entonces empecemos.

¿Qué es exactamente un servidor web y cómo funciona?

Un servidor web es un lugar donde las páginas web se almacenan, procesan y sirven a los clientes web. Un cliente web es simplemente un navegador web que utilizamos en nuestras computadoras y teléfonos. Un cliente web y un servidor web se comunican mediante un protocolo especial conocido como Protocolo de transferencia de hipertexto (HTTP).

Cree un servidor web ESP32 simple en Arduino IDE

En este protocolo, un cliente inicia una conversación enviando una solicitud HTTP para una página web específica. Luego, el servidor devuelve el contenido de esa página web o un mensaje de error si no puede encontrarlo (como el famoso error 404).

Modos de funcionamiento ESP32

Una de las características más útiles del ESP32 es su capacidad no sólo de conectarse a una red WiFi existente y actuar como servidor web, sino también de crear su propia red para que otros dispositivos puedan conectarse a ella directamente y acceder a páginas web. Esto es posible porque el ESP32 puede funcionar en tres modos: modo de estación (STA), modo de punto de acceso suave (AP) y ambos al mismo tiempo.

Modo estación (STA).

En modo estación (STA), el ESP32 se conecta a una red WiFi existente (la creada por su enrutador WiFi).

Cree un servidor web ESP32 simple en Arduino IDE

En modo STA, el ESP32 recibe una dirección IP del enrutador WiFi al que está conectado. Esta dirección IP se puede utilizar para configurar un servidor web y proporcionar sitios web a todos los dispositivos conectados en la red WiFi existente.

Modo de punto de acceso suave (AP)

En el modo Punto de acceso (AP), el ESP32 crea su propia red WiFi y actúa como un concentrador, como un enrutador WiFi. Sin embargo, a diferencia de un enrutador WiFi, no tiene una interfaz a una red cableada. Por lo tanto, este modo de funcionamiento se denomina Punto de acceso suave (Soft-AP). Además, no se pueden conectar más de cinco estaciones al mismo tiempo.

Cree un servidor web ESP32 simple en Arduino IDE

En modo AP, el ESP32 crea una nueva red WiFi y le asigna un SSID (el nombre de la red) y una dirección IP. Con esta dirección IP, puede servir sitios web a todos los dispositivos conectados.

Cableado de LED con un ESP32

Ahora que entendemos los conceptos básicos de cómo funciona un servidor web y los modos en los que el ESP32 puede crear uno, es hora de conectar algunos LED al ESP32 que queremos controlar a través de WiFi.

Primero, coloque el ESP32 en su placa de pruebas, asegurándose de que cada lado de la placa esté en un lado diferente de la placa de pruebas. A continuación, conecte dos LED con una resistencia limitadora de corriente de 220 Ω a los GPIO 4 y 5 digitales.

Cuando haya terminado, debería tener algo parecido a la imagen a continuación.

Cree un servidor web ESP32 simple en Arduino IDE
Cableado de LED con ESP32

La idea detrás del uso de un servidor web ESP32 para controlar cosas

Quizás se pregunte: «¿Cómo controlo las cosas desde un servidor web que solo procesa y sirve páginas web?»

Es extremadamente simple. Controlaremos las cosas visitando una URL específica.

Cuando ingresa una URL en un navegador web, envía una solicitud HTTP (también conocida como solicitud GET) a un servidor web. Es responsabilidad del servidor web procesar esta solicitud.

Digamos que escribiste una URL como http://192.168.1.1/ledon en un navegador. Luego, el navegador envía una solicitud HTTP al ESP32. Cuando el ESP32 recibe esta solicitud, reconoce que el usuario quiere encender el LED. Esto enciende el LED y envía una página web dinámica a un navegador que muestra el estado del LED como «Encendido». Bastante sencillo, ¿verdad?

Ejemplo 1: configuración del servidor web ESP32 en modo Punto de acceso (AP)

¡Ahora vayamos a las cosas interesantes!

Este ejemplo, como sugiere el título, muestra cómo configurar el servidor web ESP32 en modo Punto de acceso (AP) y servir páginas web a cada cliente conectado. Primero, conecte su ESP32 a su computadora y ejecute el boceto. Entonces echemos un vistazo más de cerca.

#include <WiFi.h>
#include <WebServer.h>

/* Put your SSID & Password */
const char* ssid = "ESP32";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

WebServer server(80);

uint8_t LED1pin = 4;
bool LED1status = LOW;

uint8_t LED2pin = 5;
bool LED2status = LOW;

void setup() {
  Serial.begin(115200);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);

  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);
  delay(100);
  
  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.onNotFound(handle_NotFound);
  
  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO4 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO4 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO5 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>n";
  ptr +="<head><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">n";
  ptr +="<title>LED Control</title>n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}n";
  ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}n";
  ptr +=".button-on {background-color: #3498db;}n";
  ptr +=".button-on:active {background-color: #2980b9;}n";
  ptr +=".button-off {background-color: #34495e;}n";
  ptr +=".button-off:active {background-color: #2c3e50;}n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}n";
  ptr +="</style>n";
  ptr +="</head>n";
  ptr +="<body>n";
  ptr +="<h1>ESP32 Web Server</h1>n";
  ptr +="<h3>Using Access Point(AP) Mode</h3>n";
  
   if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class="button button-off" href="/led1off">OFF</a>n";}
  else
  {ptr +="<p>LED1 Status: OFF</p><a class="button button-on" href="/led1on">ON</a>n";}

  if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class="button button-off" href="/led2off">OFF</a>n";}
  else
  {ptr +="<p>LED2 Status: OFF</p><a class="button button-on" href="/led2on">ON</a>n";}

  ptr +="</body>n";
  ptr +="</html>n";
  return ptr;
}

Acceso al servidor web en modo AP

Después de cargar el boceto, abra el monitor serie a 115200 baudios y presione el botón RESET en el ESP32. Si todo está bien, aparecerá el mensaje “Servidor HTTP iniciado”.

Cree un servidor web ESP32 simple en Arduino IDE

Ahora obtenga un teléfono, computadora portátil u otro dispositivo que pueda conectarse a una red Wi-Fi y busque una red llamada «ESP32». Conéctese a la red con la contraseña 12345678.

Cree un servidor web ESP32 simple en Arduino IDE

Después de conectarse a su red ESP32 AP, abra un navegador y navegue hasta 192.168.1.1. El ESP32 debería devolver una página web que muestre el estado actual de los LED y los botones. Al mismo tiempo, puede consultar el monitor serie para ver el estado de los pines GPIO del ESP32.

Cree un servidor web ESP32 simple en Arduino IDE
Cree un servidor web ESP32 simple en Arduino IDE

Ahora esté atento a la URL y haga clic en el botón para encender el LED1. Una vez que haga clic en el botón, el ESP32 recibirá una solicitud para la URL /led1on. Luego se enciende el LED1 y se proporciona una página web con el estado del LED actualizado. Además, el estado del pin GPIO está impreso en el monitor serie.

Cree un servidor web ESP32 simple en Arduino IDE
Cree un servidor web ESP32 simple en Arduino IDE

Puede probar el botón LED2 para ver si funciona de manera similar.

Echemos un vistazo más de cerca al código para ver cómo funciona y poder adaptarlo a tus necesidades.

Explicación detallada del código

El boceto comienza con la inclusión del WiFi.h Biblioteca. Esta biblioteca contiene métodos específicos de ESP32 que utilizamos para conectarnos a la red. Luego los incluimos WebServer.h Biblioteca que contiene algunos métodos que nos ayudan a configurar un servidor y procesar solicitudes HTTP entrantes sin tener que preocuparnos por detalles de implementación de bajo nivel.

#include <WiFi.h>
#include <WebServer.h>

Dado que configuramos el servidor web ESP32 en modo Punto de Acceso (AP), este crea su propia red WiFi. Por lo tanto, debemos configurar SSID, contraseña, dirección IP, máscara de subred IP y puerta de enlace IP.

/* Put your SSID & Password */
const char* ssid = "ESP32";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

Luego creamos un objeto de biblioteca WebServer para que podamos acceder a sus funciones. El constructor de este objeto acepta como parámetro Puerto que el servidor está escuchando. Dado que HTTP usa el puerto 80 de forma predeterminada, usamos este valor. Esto nos permite conectarnos al servidor sin especificar el puerto en la URL.

// declare an object of WebServer library
WebServer server(80);

A continuación, declaramos los pines GPIO del ESP32 a los que están conectados los LED, así como su estado inicial.

uint8_t LED1pin = 4;
bool LED1status = LOW;

uint8_t LED2pin = 5;
bool LED2status = LOW;

Dentro de la función Configuración()

En la función de configuración, configuramos el servidor web ESP32 en modo Soft Access Point (AP). Primero, para fines de depuración, establecemos una conexión en serie y configuramos los pines GPIO para que se comporten como una SALIDA.

Serial.begin(115200);
pinMode(LED1pin, OUTPUT);
pinMode(LED2pin, OUTPUT);

Luego configuramos un punto de acceso suave para crear una red Wi-Fi proporcionando un SSID, contraseña, dirección IP, máscara de subred IP y puerta de enlace IP.

WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);
delay(100);

Para procesar solicitudes HTTP entrantes, debemos especificar qué código se debe ejecutar cuando se accede a una URL específica. Para ello utilizamos el .on() Método. Este método acepta dos parámetros: una ruta URL relativa y el nombre de la función que se ejecutará al visitar esa URL.

Por ejemplo, la primera línea del siguiente fragmento de código indica que cuando un servidor recibe una solicitud HTTP en la ruta raíz (/), llama al handle_OnConnect() Función. Es importante tener en cuenta que la URL proporcionada es una ruta relativa.

Asimismo, necesitamos especificar cuatro URL más para manejar los dos estados de dos LED.

server.on("/", handle_OnConnect);
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);
server.on("/led2on", handle_led2on);
server.on("/led2off", handle_led2off);

No hemos especificado qué debe proporcionar el servidor cuando el cliente solicita una URL que no está especificada server.on() . La respuesta debería ser un error 404 (página no encontrada). Para lograr esto utilizamos el server.onNotFound() Método.

server.onNotFound(handle_NotFound);

Ahora, para iniciar el servidor, llamamos a los objetos del servidor. begin() Método.

server.begin();
Serial.println("HTTP server started");

Dentro de la función Loop()

En realidad, las solicitudes HTTP entrantes se procesan en la función de bucle. Para esto utilizamos los objetos del servidor. handleClient() Método. Dependiendo de su solicitud, también cambiamos el estado de los LED.

void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

Ahora tenemos que escribir esto. handle_OnConnect() Función que previamente agregamos a la URL raíz (/). server.on. Iniciamos esta función poniendo el estado de ambos LED en LOW (estado inicial de los LED) e imprimiéndolo en el monitor serie.

Usamos el método de envío para responder a una solicitud HTTP. Aunque el método se puede llamar con varios argumentos, la forma más simple requiere el código de respuesta HTTP, el tipo de contenido y el contenido.

El primer parámetro que pasamos al método de envío es el código 200 (uno de los Códigos de estado HTTP), que corresponde a la respuesta OK. Luego especificamos el tipo de contenido como «texto/html» y finalmente lo pasamos SendHTML() Función personalizada que genera una página HTML dinámica con el estado del LED.

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

Asimismo, escribimos cinco funciones más para manejar las solicitudes de encendido/apagado del LED y la página de error 404.

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO4 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO4 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO5 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

Ver la página web HTML

Cada vez que el servidor web ESP32 recibe una solicitud de un cliente web, el sendHTML() La función genera una página web. Simplemente concatena el código HTML en una cadena larga y regresa al server.send() Característica que discutimos anteriormente. La función utiliza el estado de los LED como parámetro para generar dinámicamente contenido HTML.

El primer texto que siempre debes enviar es este -Declaraciónlo que indica que estamos enviando código HTML.

String SendHTML(uint8_t led1stat,uint8_t led2stat){
String ptr = "<!DOCTYPE html> <html>n";

El Elemento de ventana gráfica Hace que el sitio web sea responsivo, asegurando que se vea bien en todos los dispositivos. La etiqueta de título determina el título de la página.

ptr +="<head><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">n";
ptr +="<title>LED Control</title>n";

Diseño del sitio web

Luego tenemos algo de CSS para diseñar los botones y el aspecto general del sitio web. Seleccionamos la fuente Helvetica y definimos el contenido que se mostrará como un bloque en línea centrado.

ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}n";

Luego, el siguiente código establece el color, la fuente y el borde alrededor del cuerpo, las etiquetas H1, H3 y p.

ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}n";

Los botones también tienen estilos con propiedades como color, tamaño, borde, etc. El :selector activo Cambia la apariencia de los botones mientras se hace clic en ellos.

ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}n";
ptr +=".button-on {background-color: #3498db;}n";
ptr +=".button-on:active {background-color: #2980b9;}n";
ptr +=".button-off {background-color: #34495e;}n";
ptr +=".button-off:active {background-color: #2c3e50;}n";

Configurar el encabezado de la página web

A continuación, se determina el título del sitio web. Puede cambiar este texto para adaptarlo a su aplicación.

ptr +="<h1>ESP32 Web Server</h1>n";
ptr +="<h3>Using Access Point(AP) Mode</h3>n";

Mostrar los botones y su estado correspondiente

El if La instrucción se utiliza para actualizar dinámicamente el estado de los botones y LED.

if(led1stat)
 {ptr +="<p>LED1 Status: ON</p><a class="button button-off" href="/led1off">OFF</a>n";}
else
 {ptr +="<p>LED1 Status: OFF</p><a class="button button-on" href="/led1on">ON</a>n";}

if(led2stat)
 {ptr +="<p>LED2 Status: ON</p><a class="button button-off" href="/led2off">OFF</a>n";}
else
 {ptr +="<p>LED2 Status: OFF</p><a class="button button-on" href="/led2on">ON</a>n";}

Ejemplo 2: configuración del servidor web ESP32 en modo Estación WiFi (STA)

Pasemos al siguiente ejemplo, que muestra cómo configurar el servidor web ESP32 en modo estación (STA) y servir páginas web a cada cliente conectado en la red existente.

Antes de continuar con la carga del boceto, deberá realizar algunos cambios para asegurarse de que funcione para usted. Para conectar ESP32 a una red existente, debe cambiar las dos variables siguientes con sus credenciales de red.

Cree un servidor web ESP32 simple en Arduino IDE

Cuando hayas terminado, prueba el boceto.

#include <WiFi.h>
#include <WebServer.h>

/*Put your SSID & Password*/
const char* ssid = " YourNetworkName";  // Enter SSID here
const char* password = " YourPassword";  //Enter Password here

WebServer server(80);

uint8_t LED1pin = 4;
bool LED1status = LOW;

uint8_t LED2pin = 5;
bool LED2status = LOW;

void setup() {
  Serial.begin(115200);
  delay(100);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO4 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO4 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO5 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>n";
  ptr +="<head><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">n";
  ptr +="<title>LED Control</title>n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}n";
  ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}n";
  ptr +=".button-on {background-color: #3498db;}n";
  ptr +=".button-on:active {background-color: #2980b9;}n";
  ptr +=".button-off {background-color: #34495e;}n";
  ptr +=".button-off:active {background-color: #2c3e50;}n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}n";
  ptr +="</style>n";
  ptr +="</head>n";
  ptr +="<body>n";
  ptr +="<h1>ESP32 Web Server</h1>n";
    ptr +="<h3>Using Station(STA) Mode</h3>n";
  
   if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class="button button-off" href="/led1off">OFF</a>n";}
  else
  {ptr +="<p>LED1 Status: OFF</p><a class="button button-on" href="/led1on">ON</a>n";}

  if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class="button button-off" href="/led2off">OFF</a>n";}
  else
  {ptr +="<p>LED2 Status: OFF</p><a class="button button-on" href="/led2on">ON</a>n";}

  ptr +="</body>n";
  ptr +="</html>n";
  return ptr;
}

Acceso al servidor web en modo STA

Después de cargar el boceto, abra el monitor serie a 115200 baudios y presione el botón RESET en el ESP32. Si todo está bien, verá la dirección IP dinámica recibida de su enrutador, así como el mensaje «Servidor HTTP iniciado».

Cree un servidor web ESP32 simple en Arduino IDE

A continuación, inicie un navegador y navegue hasta la dirección IP que se muestra en el monitor serie. Se supone que el ESP32 muestra una página web con el estado actual de los LED y dos botones para controlarlos. Al mismo tiempo, puede consultar el monitor serie para ver el estado de los pines GPIO del ESP32.

Cree un servidor web ESP32 simple en Arduino IDE
Cree un servidor web ESP32 simple en Arduino IDE

Ahora esté atento a la URL y haga clic en el botón para encender el LED1. Tan pronto como hace clic en el botón, el ESP32 recibe una solicitud /led1on URL. Luego se enciende el LED1 y se proporciona una página web con el estado del LED actualizado. Además, el estado del pin GPIO está impreso en el monitor serie.

Cree un servidor web ESP32 simple en Arduino IDE
Cree un servidor web ESP32 simple en Arduino IDE

Puede probar el botón LED2 para ver si funciona de manera similar.

Echemos un vistazo más de cerca al código para ver cómo funciona y poder adaptarlo a tus necesidades.

Explicación del código

La única diferencia entre este código y el código anterior es que no estamos creando nuestra propia red WiFi, sino que nos unimos a una red existente. WiFi.begin() Función.

//connect to your local wi-fi network
WiFi.begin(ssid, password);

Mientras el ESP32 intenta conectarse a la red, podemos usar esto WiFi.status() Función de comprobación del estado de la conexión.

//check wi-fi is connected to wi-fi network
while (WiFi.status() != WL_CONNECTED) 
{
delay(1000);
Serial.print(".");
}

Para su información: esta función devuelve los siguientes estados:

  • WL_CONECTADO: cuando está conectado a una red Wi-Fi
  • WL_NO_SHIELD: cuando no hay protección Wi-Fi
  • WL_IDLE_STATUS: un estado temporal que se asigna cuando WiFi.begin() se llama y permanece activo hasta que expire el número de intentos (lo que resulta en WL_CONNECT_FAILED) o se establece una conexión (lo que resulta en WL_CONNECTED).
  • WL_NO_SSID_AVAIL: si no hay SSID disponible
  • WL_SCAN_COMPLETED: cuando se completa el escaneo de red
  • WL_CONNECT_FAILED: Si la conexión falla en todos los intentos
  • WL_CONNECTION_LOST: cuando se pierde la conexión
  • WL_DESCONECTADO: cuando no hay conexión a una red

Una vez conectado a la red, el WiFi.localIP() Esta función imprime la dirección IP del ESP32.

Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

La única diferencia entre los modos AP y STA es que uno crea su propia red mientras que el otro se une a una red existente. Entonces, el resto del código para procesar solicitudes HTTP y servir páginas web en modo STA es el mismo que se explicó anteriormente para el modo AP. Esto incluye lo siguiente:

  • Declarar los pines GPIO del ESP32 a los que están conectados los LED
  • Definir múltiples server.on() Métodos para procesar solicitudes HTTP entrantes
  • Definir server.onNotFound() Método para manejar el error HTTP 404
  • Crear funciones personalizadas que se ejecuten cuando se visita una URL específica
  • Crear página HTML
  • Diseño del sitio web
  • Crear botones y ver su estado

Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded




Cree un servidor web ESP32 simple en Arduino IDE

Cree un servidor web ESP32 simple en Arduino IDE

El ESP32, el nuevo sucesor del ESP8266, ha sido una estrella en ascenso en proyectos de IoT o WiFi. Es un módulo WiFi de bajo costo que se puede programar para ejecutar un servidor web independiente con un poco de trabajo adicional. ¡Qué genial, verdad?

¿Qué es un servidor web y cómo funciona?

Un servidor web es un lugar donde se almacenan, procesan y sirven páginas web a los clientes web. Un cliente web es simplemente un navegador web que utilizamos en nuestras computadoras y teléfonos. Un cliente web y un servidor web se comunican utilizando un protocolo especial conocido como Protocolo de Transferencia de Hipertexto (HTTP). En este protocolo, un cliente inicia una conversación enviando una solicitud HTTP para una página web específica. El servidor luego envía el contenido de esa página web o un mensaje de error si no puede encontrarla (como el famoso Error 404).

Modos de funcionamiento del ESP32

  1. Modo Estación (STA): En este modo, el ESP32 se conecta a una red WiFi existente (la creada por su enrutador inalámbrico).
  2. Modo Punto de Acceso (AP): En este modo, el ESP32 crea su propia red WiFi y actúa como un concentrador, al igual que un enrutador WiFi. Sin embargo, a diferencia de un enrutador WiFi, no tiene una interfaz a una red cableada. Por lo tanto, este modo de funcionamiento se llama Punto de Acceso Blando (soft-AP). Además, no se pueden conectar más de cinco estaciones a él al mismo tiempo.

Conexión de LED al ESP32

Para controlar LEDs a través de WiFi, primero debemos conectar los LEDs al ESP32. Coloque el ESP32 en su protoboard y conecte dos LEDs a los pines digitales 4 y 5 utilizando una resistencia limitadora de corriente de 220Ω.

Idea detrás del uso de un servidor web ESP32 para controlar cosas

Para controlar cosas desde un servidor web, simplemente visitamos una URL específica. Al ingresar una URL en un navegador web, envía una solicitud HTTP (también conocida como solicitud GET) a un servidor web. Es responsabilidad del servidor web manejar esta solicitud.

Ejemplo de configuración del servidor web ESP32 en modo Punto de Acceso (AP)

En este ejemplo, mostramos cómo configurar el servidor web ESP32 en modo Punto de Acceso y servir páginas web a cualquier cliente conectado. Para comenzar, conecte su ESP32 a su computadora y ejecute el boceto. Luego profundizaremos en ello.

Explicación detallada del código

  1. El boceto comienza incluyendo las bibliotecas WiFi.h y WebServer.h para el manejo de la conectividad WiFi y el servidor web.
  2. Se configuran las credenciales de red para el modo AP y se establece la dirección IP del servidor.
  3. Se crea un objeto del servidor web y se declaran los pines GPIO y estados iniciales de los LEDs.
  4. En la función setup(), se inicializa la conexión WiFi y se configuran las funciones de manejo de distintas URL.
  5. En la función loop(), se manejan las solicitudes del cliente y se actualiza el estado de los LEDs.
  6. Se definen funciones para controlar el estado de los LEDs y responder a las solicitudes HTTP.

Accediendo al servidor web en modo Punto de Acceso (AP)

Después de cargar el boceto, abra el Monitor en Serie a 115200 baudios y presione el botón de RESET en el ESP32. Si todo está bien, mostrará el mensaje «Servidor HTTP iniciado».

Luego, conecte su dispositivo a la red WiFi «ESP32» con la contraseña «12345678» y abra un navegador para acceder a la dirección IP 192.168.1.1. Debería ver una página web con el estado actual de los LEDs y botones para controlarlos.

Ejemplo de configuración del servidor web ESP32 en modo Estación (STA)

Este ejemplo muestra cómo configurar el servidor web ESP32 en modo Estación y servir páginas web a cualquier cliente conectado en la red existente. Asegúrese de modificar las credenciales de su red antes de cargar el boceto.

El resto del código es similar al modo AP, pero en lugar de crear una red WiFi, el ESP32 se une a una red existente utilizando las credenciales proporcionadas por el usuario.

4 comentarios en «Cree un servidor web ESP32 simple en Arduino IDE»

Deja un comentario