domingo, 30 de septiembre de 2018

ESP32 desde Cero - Tutorial 6: Servidor Web (WebServer)

En este tutorial explico cómo hacer un servidor web (WebServer) usando la IDE de Arduino en un ESP32.


Código 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("");
  }
}

23 comentarios:

  1. Muchas gracias por tu aporte, me sirve de mucho...

    ResponderEliminar
  2. Vaya excelente tutorial investigare mas sobre ello muchas gracias

    ResponderEliminar
  3. no funciona la libreria de Esp6288 en la placa? cuales serian las desventajas

    ResponderEliminar
  4. Supongo que te referís a la 8266, no funciona. Saludos.

    ResponderEliminar
  5. Oye una pregunta esto tratando de implementar el MPU al esp32 por OTA... solo que nunca me conecta. Y queria ver si puedes subir un tutotial de la conexión bluetooth con el BLE?

    ResponderEliminar
  6. funciona en la placa esp8266 el programa? tengo esa placa pero no me corre

    ResponderEliminar
  7. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  8. Buenos días,
    Haz usado wifimanager con ESP32?
    Muchas gracias por su tiempo.

    ResponderEliminar
    Respuestas
    1. No, todavía no probé WifiManager en ESP32 ni ESP8266. Saludos

      Eliminar
  9. Hola, ¿Este tuto puede realizarse en la placa ESP8266? Muy bien explicado y claro, saludos.

    ResponderEliminar
    Respuestas
    1. Si claro. Podés simplificar lo que expliqué en el tutorial de AJAX. http://www.sinaptec.alomar.com.ar/2017/06/tutorial-de-ajax-en-esp8266-nodemcu.html

      Saludos.

      Eliminar
  10. buenas noches tengo probelmas con el codigo al subir el programa al esp32 en el monitor serie no me aparece nada le doy a boton de reset y empieza a salirme caracteres exraños "????" etc etc porque puede ser

    ResponderEliminar
    Respuestas
    1. cuando salen caracteres extraños es por que los baudios estan diferentes. es decir la velocidad de baudios del monitor serie tiene que ser el mismo que configuraste en el com del esp32.

      Eliminar
  11. excelente, funcionando todo bien. Gracias.

    ResponderEliminar
  12. alguien me puede ayudar a contolar un servo por web server PWM

    ResponderEliminar
  13. Hola Alejando muy bueno este tutorial, pero me surgió una duda: Cuando yo creo el servidor web solo puedo acceder a la pagina con los dispositivos que están conectados a la misma red wi-fi. ¿Esto es normal?¿Hay alguna forma de poder acceder a la pagina desde cualquier red WI-FI?

    ResponderEliminar
    Respuestas
    1. Hola. tengo la misma consulta. Pudiste solucionarlo?

      Eliminar
    2. para acceder al servidor web, tienes que estar dentro de la misma red a la cual esta conectado el ESP32, obviamente si deseas acceder desde otro lugar, tendrias que NATEAR el router para poder acceder al sewrvidor desde cualquier conexion a internet.
      lo mismo que se hace para visualizar camaras por internet.

      Eliminar
  14. Hola.muy buen tutorial. Consulta, esto sirve paralos que estan bajo la misma red o para cualquiera? por ejemplo uno acá y otro en otra casa con otra wifi distina

    ResponderEliminar
  15. Hola Alejandro! muy buenos los tutoriales! TE consulto, estoy aplicando el ejemplo en un ESP32 pero necesito además pasar valores numéricos y tipo string desde la pagina web al ESP32 y no se como hacerlo. Agradezco si me orientas con algún ejemplo o función que se utiliza. Gracias. Gabriel

    ResponderEliminar
  16. Este comentario ha sido eliminado por el autor.

    ResponderEliminar