INSTITUTO TECNOLÓGICO DE
PUEBLA
SISTEMAS INTELIGENES EN IOT
PRACTICA
ESP32 WEB SERVER-CONTROL
OUTPUTS
Profesor(a):
JUAN DÍAZ TÉLLEZ
Presentan:
NC: 15221395 WALTER MANUEL RUIZ NARANJO
NC: 15221391 JORGE ROMERO SANTAMARIA
NC: 15221384 ISRAEL RODRIGUEZ CUAUTLE
30/10/2020
ESP32 WEB SERVER-CONTROL OUTPUTS
1. Introducción
En esta sección, veremos el ESP32 como servidor web. Crearemos un servidor web para controlar
de forma remota las salidas a través de la web y también le mostraremos cómo puede mostrar las
lecturas de los sensores en una página web. Después de crear el servidor web, le mostraremos
cómo puede agregar más resultados y lecturas de sensores para satisfacer sus necesidades, y
cómo puede personalizar la apariencia de su página web. Finalmente, protegerá su servidor web
con una contraseña y aprenderá cómo hacer que su servidor web sea accesible desde cualquier
lugar. En esta unidad, aprenderá qué es un servidor web y cómo funciona un servidor web ESP32..
Solicitud-respuesta. Solicitud-respuesta es un patrón de intercambio de mensajes, en el que un
solicitante envía un mensaje de solicitud a un sistema de respuesta que recibe y procesa la
solicitud y devuelve un mensaje en respuesta.
2. Objetivos
En esta práctica, aprenderemos a crear un servidor web simple con el ESP32 para
controlar las salidas. Se puede acceder al servidor web que se creará con cualquier
dispositivo como navegador: teléfono inteligente, tableta, computadora portátil, en la
red local.
3. Equipo y Materiales
-ESP32
-Protoboard
-2 x 330 homs resistencias
-2 Leds de 5mm
-Jumpers
4. Desarrollo
Codigo fuente:
#include <WiFi.h>
//------------------Servidor Web en puerto 80---------------------
WiFiServer server(80);
//---------------------Credenciales de WiFi-----------------------
const char* ssid = "-----";
const char* password = "-----";
//---------------------VARIABLES GLOBALES-------------------------
int contconexion = 0;
String header; // Variable para guardar el HTTP request
String estadoSalida = "off";
const int salida = 2;
//------------------------CODIGO HTML------------------------------
String pagina = "<!DOCTYPE html>"
"<html>"
"<head>"
"<meta charset='utf-8' />"
"<title>Servidor Web ESP32</title>"
"</head>"
"<body>"
"<center>"
"<h1>Servidor Web ESP32</h1>"
"<p><a href='/on'><button
style='height:50px;width:100px'>ON</button></a></p>"
"<p><a href='/off'><button
style='height:50px;width:100px'>OFF</button></a></p>"
"</center>"
"</body>"
"</html>";
//---------------------------SETUP--------------------------------
void setup() {
Serial.begin(115200);
Serial.println("");
pinMode(salida, OUTPUT);
digitalWrite(salida, LOW);
// Conexión WIFI
WiFi.begin(ssid, password);
//Cuenta hasta 50 si no se puede conectar lo cancela
while (WiFi.status() != WL_CONNECTED and contconexion <50) {
++contconexion;
delay(500);
Serial.print(".");
}
if (contconexion <50) {
//para usar con ip fija
//IPAddress ip(192,168,1,180);
//IPAddress gateway(192,168,1,1);
//IPAddress subnet(255,255,255,0);
//WiFi.config(ip, gateway, subnet);
Serial.println("");
Serial.println("WiFi conectado");
Serial.println(WiFi.localIP());
server.begin(); // iniciamos el servidor
}
else {
Serial.println("");
Serial.println("Error de conexion");
}
}
//----------------------------LOOP----------------------------------
void loop(){
WiFiClient client = server.available(); // Escucha a los clientes
entrantes
if (client) { // Si se conecta un nuevo
cliente
Serial.println("New Client."); //
String currentLine = ""; //
while (client.connected()) { // loop mientras el cliente
está conectado
if (client.available()) { // si hay bytes para leer
desde el cliente
char c = client.read(); // lee un byte
Serial.write(c); // imprime ese byte en el
monitor serial
header += c;
if (c == '\n') { // si el byte es un caracter
de salto de linea
// si la nueva linea está en blanco significa que es el fin del
// HTTP request del cliente, entonces respondemos:
if (currentLine.length() == 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// enciende y apaga el GPIO
if (header.indexOf("GET /on") >= 0) {
Serial.println("GPIO on");
estadoSalida = "on";
digitalWrite(salida, HIGH);
} else if (header.indexOf("GET /off") >= 0) {
Serial.println("GPIO off");
estadoSalida = "off";
digitalWrite(salida, LOW);
}
// Muestra la página web
client.println(pagina);
// la respuesta HTTP temina con una linea en blanco
client.println();
break;
} else { // si tenemos una nueva linea limpiamos currentLine
currentLine = "";
}
} else if (c != '\r') { // si C es distinto al caracter de
retorno de carro
currentLine += c; // lo agrega al final de currentLine
}
}
}
// Limpiamos la variable header
header = "";
// Cerramos la conexión
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
4.1. Simulación del Diseño
Comprobacion de el funcionamiento de el ESP32
5. Resultados
6. Conclusiones
En esta practica pudimos aprender como es que funciona el codigo en arduino para hacer
que funcione el ESP32 desde como conectarlo a la red wifi y también como diseñar la
pagina web y enlazar los botones a las salidas del esp32.
7. Referencias
Learn ESP32 with Arduino IDE V1_4.pdf
