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:
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.
