Servidor web con ESP8266

Servidor web embebido en NodeMCU ESP8266 programado en C++

En un post que escribí hace un tiempo te mostré cómo hacer un servidor web con la tarjeta NodeMCU ESP8266 pero en ese caso tenías que conectarte a la red WiFi que la tarjeta crea, es decir, la misma creaba una red WiFi y actuaba como Access Point.

Ahora te mostraré cómo hacer un servidor web pero que a su vez se conectará a tu red local. De este modo te podrás conectar a la tarjeta dentro de tu red local, ya que la misma se conectará como cualquier otro dispositivo, pero va a tener un servidor web ejecutándose.

Setup

En el setup vamos a conectarnos a la red WiFi y configurar las rutas del servidor web. Cada ruta del servidor estará ligada a una función. Podemos configurar varias rutas.

Para el caso del WiFi puedes invocar al método addAP las veces que quieras, agregando alternativas de redes WiFi. Esto es para que la tarjeta se conecte a la red más cercana o de mayor calidad.

void setup(void)
{

  // Aquí puedes agregar varias redes. La tarjeta se conectará a la más cercana
  wifiMulti.addAP("Red", "Contraseña");
  // wifiMulti.addAP("Otra red", "Contraseña");

  // Esperar conexión WiFi
  while (wifiMulti.run() != WL_CONNECTED)
  {
    delay(250);
  }

  //  Configurar rutas
  servidor.on("/", rutaRaiz);
  servidor.onNotFound(rutaNoEncontrada);

  // Iniciar servidor
  servidor.begin();
}

En este caso la ruta raíz va a invocar a la función rutaRaiz. También estamos manejando cualquier ruta encontrada con el método onNotFound.

Por cierto, podrías configurar más rutas. Por ejemplo, la siguiente ruta:

servidor.on("/apagar", rutaApagar);

Podría ser una ruta que apaga determinado LED o algo parecido.

Rutas web

Las funciones de rutas quedan así:

// Servir la página web
void rutaRaiz()
{
  servidor.send(200, "text/html", "<!DOCTYPE html>"
                                  "<html>"
                                  "<head>"
                                  "<meta charset='utf-8'>"
                                  "<meta name='viewport' content='width=device-width'>"
                                  "<title>Servidor web con ESP8266</title>"
                                  "</head>"
                                  "<body>"
                                  "<p>Soy un servidor web embebido dentro de la NodeMCU ESP8266</p>"
                                  "<a href='https://parzibyte.me/blog'>By Parzibyte</a>"
                                  "</body>"
                                  "</html>");
}

// Manejador de 404
void rutaNoEncontrada()
{
  servidor.send(404, "text/plain", "No encontrado");
}

Puedes colocar todo el código HTML en una sola línea o en varias líneas. Al final tienes que responder con una cadena.

Fíjate que la sintaxis de send es:

servidor.send(código de respuesta, tipo de contenido, contenido);

En el caso de la ruta no encontrada estamos enviando un código HTTP 404, pero para el otro caso enviamos un código 200 de OK.

Loop

Lo único que hacemos en el loop es atender las solicitudes de los clientes en caso de que existan. Para ello simplemente invocamos a handleClient.

void loop(void)
{
  // Responder las solicitudes entrantes en caso de que haya
  servidor.handleClient();
}

Poniendo todo junto

Es momento de ver el código fuente y probar si funciona. El código completo queda así:

#include <ESP8266WiFiMulti.h>
#include <ESP8266WebServer.h>
#include <Arduino.h>

ESP8266WiFiMulti wifiMulti;
ESP8266WebServer servidor(80);

// Prototipos de funciones
void rutaRaiz();
void rutaNoEncontrada();

void setup(void)
{

  // Aquí puedes agregar varias redes. La tarjeta se conectará a la más cercana
  wifiMulti.addAP("red", "Contraseña");
  // wifiMulti.addAP("Otra red", "Contraseña");

  // Esperar conexión WiFi
  while (wifiMulti.run() != WL_CONNECTED)
  {
    delay(250);
  }

  //  Configurar rutas
  servidor.on("/", rutaRaiz);
  servidor.onNotFound(rutaNoEncontrada);

  // Iniciar servidor
  servidor.begin();
}

void loop(void)
{
  // Responder las solicitudes entrantes en caso de que haya
  servidor.handleClient();
}

// Servir la página web
void rutaRaiz()
{
  servidor.send(200, "text/html", "<!DOCTYPE html>"
                                  "<html>"
                                  "<head>"
                                  "<meta charset='utf-8'>"
                                  "<meta name='viewport' content='width=device-width'>"
                                  "<title>Servidor web con ESP8266</title>"
                                  "</head>"
                                  "<body>"
                                  "<p>Soy un servidor web embebido dentro de la NodeMCU ESP8266</p>"
                                  "<a href='https://parzibyte.me/blog'>By Parzibyte</a>"
                                  "</body>"
                                  "</html>");
}

// Manejador de 404
void rutaNoEncontrada()
{
  servidor.send(404, "text/plain", "No encontrado");
}

Yo lo he cargado a mi tarjeta y al visitar la IP de la misma, me muestra la página web:

Servidor web embebido en NodeMCU ESP8266 programado en C++

Obviamente podrías agregar estilos, cargar frameworks, agregar scripts, etcétera; pues al final tenemos un servidor web que va a procesar los datos antes de enviárselos al cliente. Solo recuerda no abusar, pues no tenemos memoria ni almacenamiento ilimitado.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/