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


3 comentarios:

  1. 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. Pasame el código a mi email y lo chequeo. Saludos.

    ResponderEliminar
  3. 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