Aclaro, no voy a explicar cómo hacer páginas web, sólo voy a explicar cómo montar una en el micro ESP8266, para aprender pueden ir aquí.
Las librerías que vamos a usar son la "ESP8266WebServer", viene con las dependencias del ESP8266 para arduino por lo que no hace falta instalarlo aparte, "DNSServer" que sirve para administrar las conexiones de los clientes y la "ESP8266WiFi" que se encarga de configurar el micro para que funcione correctamente.
#include <ESP8266WiFi.h> #include <DNSServer.h> #include <ESP8266WebServer.h> ESP8266WebServer servidorweb(80); const char* red = "red"/*ingrese aquí el nombre de id*/; const char* contra = "contra"/*ingrese aquí la contraseña*/; String pagina = "<!DOCTYPEhtml>" "<html>" "<head>" "<title>" "Tutorial de servidor web" "</title>" "</head>" "<h3>" "Esto es un servidor web (de ejemplo)" " con el micro ESP8266" "</h3>" "<html>"; void setup() { Serial.begin(115200); WiFi.begin(red, contra); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.print("Conectado a: "); Serial.println(red); Serial.print("Direccion IP: "); Serial.println(WiFi.localIP()); servidorweb.on("/", []() { servidorweb.send(200, "text/html", pagina); }); servidorweb.begin(); } void loop() { servidorweb.handleClient(); }
Como podemos ver se debe declarar el objeto:
ESP8266WebServer servidorweb(80);
y es el que vamos a utilizar cuando hagamos referencia a la librería. Luego se define el nombre de la red a la que nos vamos a conectar, la contraseña y por último definimos lo que va a ser la página web en sí.
Como podemos observar la página está escrita de una forma poco convencional:
String pagina = "<!DOCTYPEhtml>" "<html>" "<head>" "<title>" "Tutorial de servidor web" "</title>" "</head>" "<h3>" "Esto es un servidor web (de ejemplo)" " con el micro ESP8266" "</h3>" "<html>";
pero esto es equivalente a escribir todo en una sola línea (si bien acá aparece en 3, es por el formato de la página):
String pagina= "<!DOCTYPEhtml><html><head><title>Tutorial de
servidor web</title></head><h3>Esto es un servidor web (de ejemplo)
con el micro ESP8266</h3><html>";
Cuál de las dos formas se use va a quedar a su gusto, para mi se ve más claro de la primera forma porque tiene una estructura tabulada y ordenada, lo que lo hace más fácil de visualizar.
Luego de definir la página web, vamos a dar inicio al programa, inicializando el puerto serie (cambiar la velocidad acá no infiere en nada) e inicializar la conexión a la red wifi predefinida, esperamos a que se conecte y damos notificación por el puerto serie de que se conectó a la red deseada y dejamos la dirección IP que el router le asignó. Todo esto básico y ya lo hicimos en otro post.
A continuación tenemos la siguiente porción de código (cuya sintaxis no es la normal):
acá lo que estamos haciendo es indicarle al servidor cómo responder ante el "llamado" del cliente bajo la ruta "/", en este caso el servidor va a ejectuar la línea:
y lo que va a hacer es enviar como respuesta la página que tenemos almacenada en la variable "pagina" (vale aclarar que en lugar de poner "/" podríamos poner "/encender" y vamos a usar esa otra ruta, incluso podríamos declarar ambas, más adelante hablaremos de ello en más detalle). Una vez indicado cómo tiene que respoder podemos dar inicio al servidor web bajo el comando:
En el loop lo que tenemos que hacer es revisar constantemente si hay algún cliente esperando, y esto lo vamos a hacer con la siguiente línea:
Esta última línea debemos llamarla constantemente para que se manejen los clientes de forma regular.
A continuación tenemos la siguiente porción de código (cuya sintaxis no es la normal):
servidorweb.on("/", []() { servidorweb.send(200, "text/html", pagina); });
acá lo que estamos haciendo es indicarle al servidor cómo responder ante el "llamado" del cliente bajo la ruta "/", en este caso el servidor va a ejectuar la línea:
servidorweb.send(200, "text/html", pagina);
y lo que va a hacer es enviar como respuesta la página que tenemos almacenada en la variable "pagina" (vale aclarar que en lugar de poner "/" podríamos poner "/encender" y vamos a usar esa otra ruta, incluso podríamos declarar ambas, más adelante hablaremos de ello en más detalle). Una vez indicado cómo tiene que respoder podemos dar inicio al servidor web bajo el comando:
servidorweb.begin();
En el loop lo que tenemos que hacer es revisar constantemente si hay algún cliente esperando, y esto lo vamos a hacer con la siguiente línea:
servidorweb.handleClient();
Esta última línea debemos llamarla constantemente para que se manejen los clientes de forma regular.