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

37 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
  17. Muchas gracias por compartir tus conocimientos, excelente tutorial, la manera en que documentas el scketch ayuda a entender la secuencia del programa.

    ResponderEliminar
  18. Hola, gracias por la información y videos. Tengo un problema y quizas puedas ayudarme. Tengo una placa Wemos ESP 32 R32 D1 y vi un proyecto con el BME280 y tomar sus datos y grabarlos mediante php y msql. Lo primero que hice es mandar valores directos a cada string para que los grabe y funciona perfecto, luego le incorpore un trozo de codigo que probé aparte y funciono bien, que lee y escribe la temperatura y altitud. Bueno, tome ese codigo y lo quise agregar al primer codigo de ESP2 PHP y mysql que andaba bien, pero al ejecutarlo me responde "Guru Meditation Error of type LoadProhibited occurred on core 1. Exception was unhandled.". busqué y es como un acceso a memoria prohibida. Puede ayudarme? Gracias desde ya y saludos.

    ResponderEliminar
  19. funciona correctamente sin modificar nada.

    ResponderEliminar
  20. Buenas tardes, muy buenos tutoriales! Tengo un problema con este, tengo el mismo modelo del ESP32 pero con el código me sale error de conexión. Sólo cambio mi nombre de wifi y mi contraseña, quizás debo modificar algo más del código original? Muchas gracias por la ayuda

    ResponderEliminar
  21. como incluis la libreria wifi.h ?? cual es el codigo de esa libreria ??

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

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

    ResponderEliminar
  24. buenos días :D me marca error en la linea 47. sabe el porque?.

    ResponderEliminar
  25. Buen día. Quisiera saber de qué manera puedo hacer que las peticiones por móvil sean por 3G/4G (remoto) en vez de accesar a la IP local del ESP32. Saludos!

    ResponderEliminar
  26. The Top 5 Casino Sites in India 2021
    5 steps1.Visit an online 바카라몬 gambling site2.Click on the iomarketpulse.com appropriate button 카심바 in your preferred location3.Click on the button 텐벳 먹튀 “Join” av보는곳 during registration for a live chat

    ResponderEliminar
  27. 17 Abril ubuntu 20 esp32 si funciona muchas gracias eres una bomba !!! ... perdon por el nick no se como cambiarlo

    ResponderEliminar