ESP8266 - Servidor web
Este tutorial te enseña cómo programar para convertir una placa ESP8266 en un servidor web. Podrás acceder a las páginas web alojadas en el ESP8266 mediante un navegador de tu ordenador o teléfono inteligente, lo que te permitirá ver datos del ESP8266 y controlarlo. Para facilitarlo, progresaremos de pasos simples a pasos más desafiantes, como se indica a continuación:
- ESP8266 Web Server - Mostrando texto sencillo en la página web.
- ESP8266 Web Server - Monitoreando valores de sensores desde el ESP8266 a través de una página web.
- ESP8266 Web Server - Controlando el ESP8266 a través de una página web.
- ESP8266 Web Server - Separando el contenido HTML (HTML, CSS y JavaScript) del código del ESP8266 y colocándolo en otros archivos en el IDE de Arduino.
- ESP8266 Web Server - Creando múltiples páginas como index.html, temperature.html, led.html, error_404.html y error_405.html..., y más.
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Lectura del valor del sensor desde ESP8266 a través de la web
Esto es relativamente sencillo. El código ESP8266 realiza las siguientes tareas:
- Crear un servidor web que escuche solicitudes HTTP provenientes de un navegador web.
- Al recibir una solicitud de un navegador web, el ESP8266 responde con contenido HTML que contiene el valor leído por el sensor.
A continuación se muestra el código ESP8266 que realiza las tareas anteriores:
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp8266/esp8266-web-server
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
void setup() {
Serial.begin(9600);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Define a route to serve the HTML page
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
server.send(200, "text/html", "<html><body><h1>Hello, ESP8266!</h1></body></html>");
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
Pasos R\u00e1pidos
Para empezar con ESP8266 en el IDE de Arduino, siga estos pasos:
- Consulta el tutorial cómo configurar el entorno para ESP8266 en el IDE de Arduino si es la primera vez que usas ESP8266.
- Conecta los componentes tal como se muestra en el diagrama.
- Conecta la placa ESP8266 a tu computadora mediante un cable USB.
- Abre Arduino IDE en tu computadora.
- Elige la placa ESP8266 correcta, como (p. ej. NodeMCU 1.0 (ESP-12E Module)), y su puerto COM respectivo.
- Copia el código anterior y ábrelo con Arduino IDE.
- Cambia la información de WiFi (SSID y contraseña) en el código por la tuya.
- Haz clic en el botón Subir en Arduino IDE para cargar el código al ESP8266.
- Abre el Monitor Serial.
- Consulta el resultado en el Monitor Serial.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.5
Autoscroll
Clear output
9600 baud
Newline
- Anote la dirección IP que se muestra y escriba esta dirección en la barra de direcciones de un navegador web en su teléfono inteligente o PC.
- Como resultado, verá la siguiente salida en el Monitor Serial.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.5
ESP8266 Web Server: New request received:
GET /
Autoscroll
Clear output
9600 baud
Newline
- Una vez que accedas al navegador web usando la dirección IP, se te presentará una página web muy básica que mostrará "¡Hola, ESP8266!"." La página se verá como la siguiente:
Lectura del valor del sensor desde ESP8266 a través de la web
A continuación se muestra el código ESP8266 que imprime el valor de la temperatura en la página web:
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp8266/esp8266-web-server
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
Serial.begin(9600);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Define a route to serve the HTML page
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
// get temperature from sensor
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel=\"icon\" href=\"data:,\">";
html += "</head>";
html += "<p>";
html += "Temperature: <span style=\"color: red;\">";
html += temperature;
html += "°C</span>";
html += "</p>";
html += "</html>";
server.send(200, "text/html", html);
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
Pasos R\u00e1pidos
- Copia el código anterior y ábrelo con Arduino IDE
- Cambia la información de Wi-Fi (SSID y contraseña) en el código por la tuya
- Carga el código al ESP8266
- Una vez que accedas al navegador web usando la dirección IP, se te mostrará una página web muy básica que muestra información sobre la placa ESP8266. La página se verá como la siguiente:
Para que la página web luzca fantástica con una interfaz gráfica de usuario (IGU), consulta la sección final de este tutorial.
※ Nota:
Con el código mostrado arriba, para obtener la actualización de la temperatura, debes recargar la página en el navegador. En una próxima parte, aprenderemos cómo hacer que la página web actualice el valor de la temperatura en segundo plano sin recargar la página.
Controlando el ESP8266 a través de la Web
Controlar algo conectado al ESP8266 es un poco más desafiante que simplemente leer un valor. Eso se debe a que el ESP8266 tiene que entender la solicitud que recibe del navegador web para saber qué acción tomar.
Para un ejemplo más completo y detallado, recomiendo consultar los tutoriales que se enumeran a continuación:
Separando el contenido HTML en otro archivo en el IDE de Arduino
Si quieres crear una página web simple con contenido mínimo, puedes incrustar el HTML directamente en el código ESP8266, como se explicó anteriormente.
Sin embargo, si quieres crear una página web más sofisticada e impresionante con un contenido más extenso, se vuelve inconveniente incluir todo el HTML, CSS y JavaScript directamente en el código del ESP8266. En esta situación, puedes usar un enfoque diferente para gestionar el código:
- El código ESP8266 se colocará en un archivo .ino, tal como antes.
- El código HTML (HTML, CSS, JavaScript) se colocará en un archivo separado .h. Esto permite mantener el contenido de la página web separado del código ESP8266, facilitando su gestión y modificación.
Para ello, necesitamos realizar dos grandes pasos:
- Preparando contenido HTML
- Programando ESP8266
Preparando contenido HTML
- Crea un archivo HTML en tu PC local que contenga el contenido HTML (HTML, CSS y JavaScript) para el diseño de tu interfaz de usuario.
- En el archivo HTML, donde deben mostrarse los datos de ESP8266, usa un valor arbitrario.
- Prueba y modifícalo hasta que estés satisfecho.
- Colocaremos el contenido HTML en el archivo .h en el IDE de Arduino. Consulta el siguiente paso.
Programación del ESP8266
- Abre el IDE de Arduino y crea un nuevo sketch. Dale un nombre, por ejemplo, newbiely.com.ino.
- Copia el código que se proporciona a continuación y pégalo en el archivo creado.
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp8266/esp8266-web-server
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "index.h" // Include the index.h file
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
Serial.begin(9600);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Serve the HTML page from the file
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
server.send(200, "text/html", webpage);
});
// Define a route to get the temperature data
server.on("/temperature", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /temperature"); // for debugging
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
server.send(200, "text/plain", temperatureStr);
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
- Cambia la información de WiFi (SSID y contraseña) en el código por la tuya
- Crea el archivo index.h en el IDE de Arduino mediante:
- Haz clic en el botón justo debajo del icono del monitor serie y elige Nueva pestaña, o usa Ctrl+Shift+N teclas.
- Asigna al archivo el nombre index.h y haz clic en el botón Aceptar
- Copie el código de abajo y pégalo en index.h.
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp8266/esp8266-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
REPLACE_YOUR_HTML_CONTENT_HERE
)=====";
#endif
- Reemplace la línea REPLACE_YOUR_HTML_CONTENT_HERE por el contenido HTML que preparó previamente. No hay ningún problema con el carácter de salto de línea. A continuación se muestra un ejemplo del archivo index.h:
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp8266/esp8266-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 Temperature</title>
</head>
<body>
<h1>ESP8266 Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds
</script>
</body>
</html>
)=====";
#endif
- Ahora tienes el código en dos archivos: newbiely.com.ino y index.h
- Haz clic en el botón Upload en el IDE de Arduino para subir el código al ESP8266
- Accede a la página web de la placa ESP8266 desde el navegador como antes. Verás que se muestra a continuación:
※ Nota:
En los códigos anteriores:
- El código HTML está diseñado para actualizar la temperatura en segundo plano a intervalos regulares, actualmente establecido cada 4 segundos en el código. Esto significa que el valor de la temperatura se actualiza automáticamente sin necesidad de recargar la página manualmente. Puedes ajustar el intervalo de actualización en el código para adaptarlo a tus preferencias.
- El código ESP8266 atiende dos solicitudes desde el navegador web.
- Una solicitud para devolver el contenido HTML de la página web
- La otra para devolver el valor de la temperatura solicitado por la página web en segundo plano
Para una ilustración más completa y detallada, consulte el tutorial ESP8266 - Sensor de temperatura DS18B20 vía Web
※ Nota:
- Si haces cambios en el contenido HTML dentro del archivo index.h pero no modificas nada en el archivo newbiely.com.ino, el IDE de Arduino no refrescará ni actualizará el contenido HTML cuando compiles y subas el código al ESP8266.
- Para forzar que el IDE de Arduino actualice el contenido HTML en esta situación, necesitas hacer una modificación en el archivo newbiely.com.ino. Por ejemplo, puedes agregar una línea vacía o insertar un comentario. Esta acción provoca que el IDE reconozca que ha habido cambios en el proyecto, asegurando que el contenido HTML actualizado se incluya en la subida.
Servidor Web ESP8266 - Varias Páginas
Échale un vistazo a este ESP8266 - Web Server Multiple Pages tutorial.