sábado, 10 de junio de 2017

Tutorial #2 de AJAX en ESP8266 (NodeMCU)

El video muestra como implementar AJAX en el servidor web de un ESP8266, lo que permite poder actualizar datos de la página web sin necesidad de recargarla. Es una herramienta muy útil para de IOT (internet de las cosas).



Código Fuente:

#include <ESP8266WebServer.h>

//---------------------------------------------------------------
ESP8266WebServer server(80);

//-------------------VARIABLES GLOBALES--------------------------
int contconexion = 0;

const char *ssid = "----";
const char *password = "----";

String XML, xmlTemperatura; 

unsigned long previousMillis = 0;

//--------CODIGO HTML y JavaScript-------------
String webSite = "<!DOCTYPE html>"
"<html>"
"<head>"
"<meta charset='utf-8' />"
"<title>Tempetatura</title>"
"<script type='text/javascript'>"
"function loadDoc(){"
"  var xhttp = new XMLHttpRequest();"
"  xhttp.onreadystatechange = function() {"
"    if (this.readyState == 4 && this.status == 200) {"
"      myFunction(this);"
"    }"
"  };"
"  xhttp.open('GET','xml',true);"
"  xhttp.send();"
"  setTimeout('loadDoc()',500);"
"}"
"function myFunction(xml){"
"  var i;"
"  var xmlDoc = xml.responseXML;"
"  var dato ='';"
"  dato = xmlDoc.getElementsByTagName('TEMPERATURA')[0].childNodes[0].nodeValue;"
"  document.getElementById('temperatura').innerHTML = dato;"
"}"
"</script>"
"</head>"
"<body onload='loadDoc()'>"
"<a>TEMPERATURA: </a>"
"<a id='temperatura'></a>"
"<a>&degC</a>"
"</body>"
"</html>";

void construirXML(){
  XML="";
  XML+="<TEMPERATURA>";
  XML+=xmlTemperatura;
  XML+="</TEMPERATURA>";
}

void handleWebsite(){
  server.send(200,"text/html",webSite);
}

void handleXML(){
  construirXML();
  server.send(200,"text/xml",XML);
}

//---------------------------SETUP-------------------------------
void setup() {

  // Inicia Serial
  Serial.begin(115200);
  Serial.println("");

  // Conexión WIFI
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED and contconexion <50) { //Cuenta hasta 50 si no se puede conectar lo cancela
    ++contconexion;
    delay(500);
    Serial.print(".");
  }
  if (contconexion <50) {
      //para usar con ip fija
      IPAddress ip(192,168,1,156); 
      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());
  }
  else { 
      Serial.println("");
      Serial.println("Error de conexion");
  }

  server.on("/",handleWebsite);
  server.on("/xml",handleXML);
  server.begin();
}

//--------------------------LOOP--------------------------------
void loop() {

  unsigned long currentMillis = millis();

  if (currentMillis - previousMillis >= 1000) { //envia la temperatura cada 1 segundos
    previousMillis = currentMillis;
    int analog = analogRead(17);
    float temp = analog*0.322265625;
    xmlTemperatura = String(temp, 1); //1 decimal
  }

  server.handleClient();
}

12 comentarios:

  1. Unknown13 de abril de 2018, 8:50

    Hola, llevo ya unos dias dandole vueltas a tu ejemplo, y no consigo poner 2 valores a la hora de mostrar la web.
    Quiero poner el campo temperatura y humedad, lo unico que consigo es que no muestre el de temperatura. He probado añadiendo mas campos en el xml, y a crear un segundo xml, si añado una segunda linea con xhttp.open('GET','xml',true);" xhttp.open('GET','xml2',true);" no funciona, puedes ayudarme?

    ResponderEliminar
  2. Ale13 de abril de 2018, 11:16

    Pasame el código a mi email y lo chequeo. Saludos.

    ResponderEliminar
  3. Unknown31 de julio de 2018, 22:36

    Hola muy buenas noches, y gracias por su aporte, gracias a su tutorial logre mi objetivo, solo que en mi caso quiero ir mostrando dos variables y en dicho caso no me esta saliendo, si desea y puede ayudarme le puedo pasar mi codigo, mi correo es lucio_lke@hotmail.com
    Desde ya muchas gracias.
    Saludos.

    ResponderEliminar
  4. daniel13 de octubre de 2018, 9:16

    Una consulta, el arduino uno no me reconoce tu libreria:
    #include
    En mi caso estoy utilizando
    #include
    #include
    Con esto todo lo que esté entre " " no me lo reconoce, sindo así no logro complilar el programa.
    Alguna idea ?
    Gracias!!

    ResponderEliminar
  5. Jimmy Tzuc7 de diciembre de 2018, 20:51

    como corro el programa en el servidor?

    ResponderEliminar
  6. Esteban9 de abril de 2019, 15:36

    Se puede hacer algo similar sin conectarse al wi-fi con internet sino directamente conectándose al wi-fi del nodemcu con un server dentro del nodemcu?

    ResponderEliminar
  7. Ale10 de abril de 2019, 4:48

    Si se puede. Tenes que ponerlo como SoftAP. Saludos.

    ResponderEliminar
  8. Roberto Carlos16 de agosto de 2019, 14:41

    Excelente projeto, muito obrigado, me ajudou muito.
    obrigado.

    ResponderEliminar
  9. Unknown18 de enero de 2020, 20:01

    Como hago para poder mostrar 2 variables?. No lo consigo, ¿Como le a
    agrego mas variables al xml? alguien lo logró??

    ResponderEliminar
  10. Unknown18 de enero de 2020, 20:02

    de esta manera lo estoy modificando

    void construirXML(){
    XML="";
    XML+="";
    XML+=xmlTemperatura;
    XML+="";
    XML+="";
    XML+=xmlHumedad;
    XML+="";
    }

    ResponderEliminar

Suscribirse a: Enviar comentarios (Atom)