|
NodeMCU en español
NodeMCU - Juan Antonio Villalpando
-- Tutorial de NodeMCU en español --
Volver al índice del tutorial NodeMCU
____________________________
62B.- NodeMCU web server. Servidor web simple muestra página web HTM. IP estática.
- Con nuestro NodeMCU vamos a crear un servidor web y mostrar una sencilla página web.
- Nuestra página web tendrá una imagen, pero la imagen no estará en el servidor NodeMCU sino será un enlace a otro sitio (esto se llama
Hot-linking)
- Además también tendrá 4 botones, pero éstos no ejecutarán ningún código, solo están puesto de pruebas. Más adelante, en otro tutorial, le pondré código a estos botones.
- Para este código no es necesario conectar nada al NodeMCU.
- Comprueba en el Serial Monitor la IP que le ha asignado tu Router WiFi al NodeMCU.
___________________________________________________
1.- Código para convertir al NodeMCU en un servidor web (web server) y mostrar una página web HTM.
NodeMCU_wifi_web_server.ino |
// Juan A. Villalpando.
// KIO4.COM
// Saldrá una página web con cuatro botones.
// Los botones no hacen ejecutan nada.
#include <ESP8266WiFi.h>
const char* ssid = "Tu_nombre_de_red_wifi";
const char* password = "La_clave_de_tu_red_wifi";
WiFiServer server(80);
void setup() {
Serial.begin(115200);
delay(10);
// Conecta a la red wifi.
Serial.println();
Serial.println();
Serial.print("Conectando con ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("Conectado con WiFi.");
// Inicio del Servidor web.
server.begin();
Serial.println("Servidor web iniciado.");
// Esta es la IP
Serial.print("Esta es la IP para conectar: ");
Serial.print("http://");
Serial.print(WiFi.localIP());
Serial.println("/");
}
void loop() {
// Consulta si se ha conectado algún cliente.
WiFiClient client = server.available();
if (!client) {
return;
}
// Espera hasta que el cliente envíe datos.
Serial.println("Nuevo cliente.");
while(!client.available()){
delay(1);
}
// Página WEB. ///////////////////////////////
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // Comillas importantes.
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head><meta charset=utf-8></head>");
client.println("<body><font face='Arial'><center><h1>Servidor web con NodeMCU.</h1>");
client.println("<h2><font color='#009900'>KIO4.COM - Juan A. Villalpando</font></h2>");
client.println("<h3>Página web.</h3>");
client.println("<br><br>");
client.println("<img src='http://kio4.esy.es/kio42.png'><br>");
client.println("<button>Juan Antonio </button>");
client.println("<button>KIO4.COM </button>");
client.println("<button>Buen tiempo. </button>");
client.println("<a href=\"/mensaje=4\"\"><button>Puerto Real </button></a>");
client.println("</font></center></body></html>");
Serial.println("Cliente desconectado.");
}
|
___________________________________________________
2.- ¿Para qué se pone charset=utf-8?
- Para que el navegador reconozca a los caracteres españoles y pueda mostrar acentos y la eñe.
- También puedes poner charset=iso-8859-1
___________________________________________________
3.- IP estática.
- En el código anterior la IP es dinámica, es decir la IP la suministra nuestro Router cuando nos conectamos mediante su servicio DHCP.
- Ahora vamos a ver cómo establecer la IP estática, es decir nosotros elegimos la IP que queremos que tenga nuestro servidor.
- Ponemos estas cuatro líneas:
IPAddress ip(192, 168, 1, 222); // IP estática
IPAddress gateway(192, 168, 1, 1); // Puerta de enlace.
IPAddress subnet(255, 255, 255, 0);// Red.
WiFi.config(ip, gateway, subnet); // Configura IP estática
- Ahora para entrar en la página web servida por nuestro NodeMcu, debemos escribir http://198.168.1.222
- IMPORTANTE:
En la mayoría de mis tutoriales he puesto IP dinámica servida por el DHCP del Router, pero es más eficaz poner la IP estática como indico en este tutorial. La IP estática funciona de forma más estable y el NodeMcu se bloquea menos.
- Así que es conveniente poner IP estática.
- Abre el Monitor Serie.
- Si no te arranca pulsa el pequeño pulsador de RESET que hay en la tarjeta de NodeMcu.
NodeMCU_wifi_web_server_IPestatica.ino |
// Juan A. Villalpando.
// KIO4.COM
// Saldrá una página web con cuatro botones.
// Los botones no hacen ejecutan nada.
#include <ESP8266WiFi.h>
const char* ssid = "Tu_nombre_de_red_wifi";
const char* password = "La_clave_de_tu_red_wifi";
IPAddress ip(192, 168, 1, 222); // IP estática
IPAddress gateway(192, 168, 1, 1); // Puerta de enlace.
IPAddress subnet(255, 255, 255, 0);// Red.
WiFiServer server(80);
void setup() {
Serial.begin(115200);
delay(10);
// Conecta a la red wifi.
Serial.println();
Serial.println();
Serial.print("Conectando con ");
Serial.println(ssid);
WiFi.config(ip, gateway, subnet); // Configura IP estática
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("Conectado con WiFi.");
// Inicio del Servidor web.
server.begin();
Serial.println("Servidor web iniciado.");
// Esta es la IP
Serial.print("Esta es la IP para conectar: ");
Serial.print("http://");
Serial.print(WiFi.localIP());
Serial.println("/");
}
void loop() {
// Consulta si se ha conectado algún cliente.
WiFiClient client = server.available();
if (!client) {
return;
}
// Espera hasta que el cliente envíe datos.
Serial.println("Nuevo cliente.");
while(!client.available()){
delay(1);
}
// Página WEB. ///////////////////////////////
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // Comillas importantes.
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head><meta charset=utf-8></head>");
client.println("<body><font face='Arial'><center><h1>Servidor web con NodeMCU.</h1>");
client.println("<h2><font color='#009900'>KIO4.COM - Juan A. Villalpando</font></h2>");
client.println("<h3>Página web.</h3>");
client.println("<br><br>");
client.println("<img src='http://kio4.esy.es/kio42.png'><br>");
client.println("<button>Juan Antonio </button>");
client.println("<button>KIO4.COM </button>");
client.println("<button>Buen tiempo. </button>");
client.println("<a href=\"/mensaje=4\"\"><button>Puerto Real </button></a>");
client.println("</font></center></body></html>");
Serial.println("Cliente desconectado.");
} |
___________________________________________________
4.- Página web.
- La página web que suministramos tiene este código fuente HTML.
- Fíjate cómo se van enviando línea a línea mediante la orden client.println()
- Caracteres especiales. Algunos caracteres hay que tratarlos de forma distinta, por ejemplo la doble comilla "
- Ya que se utiliza tanto para indicar la línea entera como para una parte del propio código HTML
- Por lo cual, cuando se utiliza como parte del código HTML hay que poner delante la barra \
- Observa \"/mensaje=4\"\"
- La barras \ le dicen al código que las comillas pertenecen a la parte HTML.
- Si en vez de doble comilla ", pusiéramos comilla simple ', no haría falta indicar lo anterior.
- color = '#009900'
página web, código fuente. |
<!DOCTYPE HTML>
<html>
<head><meta charset=utf-8></head>
<body><font face='Arial'><center><h1>Servidor web con NodeMCU.</h1>
<h2><font color='#009900'>KIO4.COM - Juan A. Villalpando</font></h2>
<h3>Página web.</h3>
<br><br>
<img src='http://kio4.esy.es/kio42.png'><br>
<button>Juan Antonio </button>
<button>KIO4.COM </button>
<button>Buen tiempo. </button>
<a href="/mensaje=4""><button>Puerto Real </button></a>
</font></center></body></html>
|
- Como indiqué anteriormente, la imagen no está en el código del NodeMcu, está en un servidor de internet, por lo cual se baja mediante:
<img src='http://kio4.esy.es/kio42.png'><br>
http://kio4.esy.es/kio42.png
________________________________
|
