|
Tutorial del Internet de las Cosas con el ESP8266
Juan Antonio Villalpando
Volver al índice del tutorial
____________________________
305.- ESP8266-12E D1 R2. Servidor web. Página web.
_________________________________
6.- Servidor Web. Muestra una página web.
- Muestra una página web en un navegador.
- Los Botones no realizan ninguna función en este ejemplo.
- Al pulsar los Botones mostrará en la dirección del navegador una palabra o letra, pero no tendrá ninguna otra función.
- Observa cómo la imagen está obtenida de otro servidor (hotlink).
pagina_web.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 = "Nombre_de_tu_Red_WiFi";
const char* password = "Clave_WiFi";
WiFiServer server(80);
void setup() {
Serial.begin(115200);
// 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("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.println(WiFi.localIP());
}
void loop() {
// Consulta si se ha conectado algún cliente.
WiFiClient client = server.available();
if (!client) { // Si no hay cliente...
return; // No siga leyendo el código.
}
Serial.print("Nuevo cliente: ");
Serial.println(client.remoteIP());
// Espera hasta que el cliente envíe datos.
while(!client.available()){ delay(1); }
String req = client.readStringUntil('\r');
Serial.println(req); // Datos enviados por cliente.
// Página WEB. ///////////////////////////////
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // Importante.
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head><meta charset=utf-8></head>");
client.println("<body><center><font face='Arial'>");
client.println("<h1>Servidor web con ESP8266.</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://iesromerovargas.com/kio42.png'><br>");
client.println("<a href='juan'><button>Juan </button></a>");
client.println("<a href='antonio'><button>Antonio </button></a>");
client.println("<a href='a'><button>Envía la letra a</button></a>");
client.println("<a href='b'><button>Envía la letra b</button></a>");
client.println("</font></center></body></html>");
Serial.print("Cliente desconectado: ");
Serial.println(client.remoteIP());
client.flush();
client.stop();
}
|
- Si no te funciona el código anterior, prueba anular las dos últimas líneas de flush() y stop()
// client.flush();
// client.stop();
___________________________________
- Este sería el código HTML de la página web:
pagina_web.htm |
HTTP/1.1 200 OK
Content-Type: text/html
<!DOCTYPE HTML>
<html>
<head><meta charset=utf-8></head>
<body>
<center>
<font face='Arial'>
<h1>Servidor web con ESP8266.</h1>
<h2><font color='#009900'>KIO4.COM - Juan A. Villalpando</font></h2>
<h3>Página web.</h3>
<br><br>
<img src='http://iesromerovargas.com/kio42.png'><br>
<a href='juan'><button>Juan </button></a>
<a href='antonio'><button>Antonio </button></a>
<a href='a'><button>Envía la letra a</button></a>
<a href='b'><button>Envía la letra b</button></a>
</font>
</center>
</body>
</html>
|
____________________________________
- Comentarios.
- En el Monitor Serie saldrá la IP del servidor.
- Cada vez que conecte un usuario observaremos en el Monitor Serie:
Nuevo cliente: 192.168.1.2
GET /juan HTTP/1.1
Cliente desconectado: 192.168.1.2
- Si la última línea no es "Cliente desconectado ", se ha bloqueado el servidor.
- Esta línea la he puesto para distinguir cuando solo envía la IP de cuando envía la IP y luego datos. Si la elimina, deberá seguir funcionando.
// Espera hasta que el cliente envíe datos.
while(!client.available()){ delay(1); }
|
____________________
- favicon.ico
- Algunos navegadores como el Chrome, realiza dos veces la petición de favicon.ico, por eso los verás en el Monitor Serie. Con el Firefox no ocurrirá.
GET /favicon.ico HTTP/1.1
- Podemos poner un favicon.ico de esta manera:
...
client.println("<head><meta charset=utf-8>");
client.println("<link rel='shortcut icon' href='http://tudominio.com/imagenes/favicon.ico'></head>");
...
- Otra manera de poner el favicon.ico es crear la imagen directamente con bytes.
...
client.println("<head><meta charset=utf-8>");
client.println("<link rel='icon' href='data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAS0lEQVR42s2SMQ4AIAjE+P+ncSYdasgNXMJgcyIIlVKPIKdvioAXyWBeJmVpqRZKWtj9QWAKZyWll50b8IcL9JUeQF50n28ckyb0ADG8RLwp05YBAAAAAElFTkSuQmCC' type='image/x-png' /></head>");
...
- Tomamos un icono y lo subimos a la siguiente web:
- Generador de bytes de base64 de un icono: https://www.base64-image.de/
- Con el favicon.ico se bloquea mucho el servidor.
- Fíjate en el uso de la comilla simple y la comilla doble.
____________________________________
- Propuesta.
- Modifica el código para el texto contenido en los Botones (y los Botones) sea de mayor tamaño.
____________________________________
- A veces el Chrome se bloquea, podemos borrar el contenido, entrando en "Inspeccionar" desde la página bloqueda y pulsando Clear:
_______________________________
|
