|
NodeMCU en español
NodeMCU - Juan Antonio Villalpando
-- Tutorial de NodeMCU en español --
Volver al índice del tutorial NodeMCU
____________________________
62B2.- NodeMCU web server. Servidor web. Tarjeta SdCard.
- En el tutorial anterior vimos como suministrar una página HTML.
- Ahora, además de la información contenida en esa página web, la vamos a ampliar con más información, pero esta vez tomaremos esa nueva información de una tarjeta SdCard.
- En el tutorial: 99.- Leer y escribir en tarjeta SdCard, vimos cómo leer y escribir en tarjeta SdCard.
- Realizamos esta conexión:
_______________________________________________________
- Conexiones NodeMcu.
- En el código debes poner la línea correspondiente al NodeMcu:
const int CS = D8; // Para el NodeMcu.
// const int CS = 4; // Para el Arduino y Wemos
- Fíjate que el terminal correspondiente al CS es el D8 en NodeMcu.
- !SD.begin(CS)
___________________________________________________
3.- IP estática.
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.");
IPAddress ip_cliente = client.remoteIP();
Serial.println(ip_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.- Creación de la información extra en la SdCard.
- Vamos al Editor de texto Notepad++ y creamos un archivo llamdo extra.txt con Codificación UTF-8 sin BOM
extra.txt |
\<p><font face="Arial">Esto es un ejemplo de página web.</font></p>
<p><font face="Arial"><a href="http://kio4.com">kio.com</a></font></p>
|
- Lo guardamos en nuestra SdCard y la insertamos en el lector.
___________________________________________________
5.- Página web con información añadida de la SdCard.
NodeMCU_wifi_web_server_IPestatica_SdCard.ino |
// Juan A. Villalpando.
// KIO4.COM
// Saldrá una página web con cuatro botones.
// Los botones no hacen ejecutan nada.
// Texto extra en una SdCard.
#include <ESP8266WiFi.h>
#include <SD.h>
const int CS = D8; // Para el NodeMcu.
// const int CS = 4; // Para el Arduino y Wemos
const char* ssid = "Tu_nombre_de_red_wifi";
const char* password = "La_clave_de_tu_red_wifi";
String textoextra =""; // Texto de la SdCard.
WiFiServer server(80);
void setup() {
Serial.begin(115200);
delay(10);
////////////////////////////////
Serial.println("");
Serial.println("Iniciando SdCard...");
if (!SD.begin(CS)) {
Serial.println("Error al iniciar.");
return;
}
Serial.println("SdCard iniciada.");
File miarchivo = SD.open("extra.txt");
if (miarchivo) {
while (miarchivo.available()) {
Serial.write(miarchivo.read());
textoextra = textoextra + miarchivo.readString();
}
miarchivo.close();
}
else {
Serial.println("Error al abrir el archivo.");
}
///////////////////////////////////////////////////////
// Conecta a la red wifi.
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.");
IPAddress ip_cliente = client.remoteIP();
Serial.println(ip_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(textoextra); // Texto de la SdCard.
client.println("</font></center></body></html>");
Serial.println("Cliente desconectado.");
}
|
___________________________________________________
6.- Comentarios.
- En la SdCard tenemos un archivo llamado extra.txt con este texto, por ejemplo:
\<p><font face="Arial">Esto es un ejemplo de página web.</font></p>
<p><font face="Arial"><a href="http://kio4.com">kio.com</a></font></p>
- En el código observamos línas referente a la lectura de la SdCard.
- El código lee el archivo extra.txt de la SdCard.
- Toda la lectura del archivo la guarda en una variable llamada: textoextra
- Mediante la orden client.println() va escribiendo línea a línea del código web.
- En la antepenúltima línea añade el contenido de la variable textoextra
client.println(textoextra);
___________________________________________________
7.- Todo el contenido de la página HTML está en la SdCard.
- Ahora vamos a poner todo el contenido HTML en la SdCard.
- Desde nuestro ordenador, copiamos en nuestra SdCard el siguiente código en un archivo llamado index.htm
- Fíjate en los detalles, comienza por \
- Utiliza comilla simple '
index.htm |
\<!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>
<p><font face='Arial'>Esto es un ejemplo de página web.</font></p>
<p><font face='Arial'><a href='http://kio4.com'>kio4.com</a></p>
</font></center></body></html>
|
- Cargamos este código en el NodeMcu:
toda_la_pagina_sdcard.ino |
// Juan A. Villalpando.
// KIO4.COM
// Saldrá una página web con cuatro botones.
// Los botones no hacen ejecutan nada.
#include <ESP8266WiFi.h>
#include <SD.h>
const int CS = D8; // Para el NodeMcu.
// const int CS = 4; // Para el Arduino y Wemos
const char* ssid = "Tu_nombre_de_red_wifi";
const char* password = "La_clave_de_tu_red_wifi";
String paginaweb =""; // Texto de la SdCard.
WiFiServer server(80);
void setup() {
Serial.begin(115200);
delay(10);
////////////////////////////////
Serial.println("");
Serial.println("Iniciando SdCard...");
if (!SD.begin(CS)) {
Serial.println("Error al iniciar.");
return;
}
Serial.println("SdCard iniciada.");
File miarchivo = SD.open("index.htm");
if (miarchivo) {
while (miarchivo.available()) {
Serial.write(miarchivo.read());
paginaweb = paginaweb + miarchivo.readString();
}
miarchivo.close();
}
else {
Serial.println("Error al abrir el archivo.");
}
///////////////////////////////////////////////////////
// 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.");
IPAddress ip_cliente = client.remoteIP();
Serial.println(ip_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(paginaweb); // Texto de la SdCard.
Serial.println("Cliente desconectado.");
}
|
___________________________________________________
8.- Comentarios.
- Observa que al principio lee todo el archivo index.htm que se encuentra en la SdCard.
- Lo guarda en la variable paginaweb.
- Luego, mediante client.println(paginaweb); muestra todo el contenido.
___________________________________________________
9.- El NodeMcu tiene memoria interna.
- En vez de guardar el archivo completo de la página web index.htm en la SdCard externa, podemos guardarlo en el mismo NodeMcu.
- NodeMcu contiene una memoria interna de 1 MB, que podemos utilizar para almacenar archivos.
- Podemos tomar el contenido del archivo index.htm y guardarlo como archivo en el NodeMcu.
- Esto lo vemos al final del tutorial
99.- Leer y escribir en tarjeta SdCard.
___________________________________________________
10.- Consulta de conexiones de clientes.
- Mediante el Monitor Serie podemos ver los clientes que se conectan.
- Cuando se ha servido la página completa a un cliente debe salir el mensaje "Cliente desconectado".
- Si un cliente conecta y se mantiene el mensaje de "Nuevo cliente", probablemente ha caído nuestro servidor web.
________________________________
|
