#10 (fin) Curso IoT con Arduino y ESP8266 WiFi: Ejemplo servidor -> Pintar página web

21 Abr 201620 abril 2016 giltesa 22 comentarios

Continuación de la entrada anterior: #9 Curso IoT con Arduino y ESP8266 WiFi: Ejemplo cliente -> Envió y recepción datos y última entrada del curso.

5.8.5) Servidor: Visualización de datos en una página web

Hemos visto tres diferentes formas de enviar y obtener información de un servidor desde el ESP8266, en todos esos ejemplos el módulo se comportaba como un cliente ya que se conectaba a un servidor y a través de esa conexión enviaba o recogía datos.

Sin embargo también podemos hacer que el módulo se comporte como un servidor, y sean otros clientes, como nuestro pc o móvil, los que inicien la comunicación para obtener o enviarnos datos.

El siguiente ejemplo al arrancar nos imprime en la consola Serial la IP que le ha asignado el router, y que necesitamos escribir en el navegador de internet para acceder al ESP8266, al pulsar intro nos cargara la siguiente web que contiene los segundos que lleva encendido el Arduino, igual que imprimimos ese dato podríamos imprimir cualquier otro como la temperatura de un sensor o el estado de los botones o variables.

Entre las funciones de este ejemplo hay 3 que requieren una mención especial:

// Código completo 7: https://goo.gl/Jj4pr1

void loop()
{
   if( wifi.available() )
   {
      if( wifi.find("+IPD,") )
      {
         delay(100);
         connectionID = wifi.parseInt();
         cleanWiFiBuffer();

         html  = "<html>";
         html +=     "<head>";
         html +=       "<title>{1}</title>";
         html +=     "</head>";
         html +=     "<body>";
         html +=       "<h1>{1}</h1>";
         html +=       "<p>Segundos en funcionamiento: {2}</p>";
         html +=     "</body>";
         html += "</html>";
         html.replace( "{1}", "Servidor web ESP8266" );
         html.replace( "{2}", String(millis()/1000)  );

         cmd  = "AT+CIPSEND=";
         cmd += connectionID;
         cmd += ",";
         cmd += html.length();
         wifi.println(cmd);

         if( find(">") )
            wifi.println(html);

         wifi.println("AT+CIPCLOSE=" + connectionID);

         pc.println( find("OK", 3000) ? "Web OK" : "Web ERROR" );
      }
   }
}

// Código completo 7: https://goo.gl/Jj4pr1

void loop()

{

if( wifi.available() )

{

if( wifi.find("+IPD,") )

{

delay(100);

connectionID = wifi.parseInt();

cleanWiFiBuffer();

html = "<html>";

html += "<head>";

html += "<title>{1}</title>";

html += "</head>";

html += "<body>";

html += "<h1>{1}</h1>";

html += "<p>Segundos en funcionamiento: {2}</p>";

html += "</body>";

html += "</html>";

html.replace( "{1}", "Servidor web ESP8266" );

html.replace( "{2}", String(millis()/1000) );

cmd = "AT+CIPSEND=";

cmd += connectionID;

cmd += ",";

cmd += html.length();

wifi.println(cmd);

if( find(">") )

wifi.println(html);

wifi.println("AT+CIPCLOSE=" + connectionID);

pc.println( find("OK", 3000) ? "Web OK" : "Web ERROR" );

}

En el loop principal del programa se debe comprobar si hay datos de entrada disponibles para su lectura y si se encuentra el texto +IPD, que indicara que un cliente se ha conectado y está solicitando como respuesta la página web que queremos servirle. Esta página web se trata de código html concatenado en un objeto String. Como puede verse en el código superior, primero se concatena toda la página entera y después se remplaza ciertos caracteres como {1} y {2} por los datos que queramos pintar. Esto es sumamente útil si la página estuviera almacenada en una MicroSD ya que podríamos leer todo el contenido y después remplazar al vuelo esos caracteres con la información de los sensores.

Después de tener lista la página htm solo hay que enviarla con el comando CIPSEND, indicando el número de conexión, la longitud y los datos a enviar.

String setServerMode()
{
   String result;

   wifi.println("AT+CIPMUX=1");
   if( !find("OK") )
      return "";

   wifi.println("AT+CIPSERVER=1,80");
   if( !find("OK") )
      return "";

   wifi.println("AT+CIPSTO=5");
   if( !find("OK") )
      return "";

   wifi.println("AT+CIPSTA?");
   if( find("+CIPSTA:\"") )
      result = wifi.readStringUntil('"');

   return find("OK") ? result : "";
}

String setServerMode()

{

String result;

wifi.println("AT+CIPMUX=1");

if( !find("OK") )

return "";

wifi.println("AT+CIPSERVER=1,80");

if( !find("OK") )

return "";

wifi.println("AT+CIPSTO=5");

if( !find("OK") )

return "";

wifi.println("AT+CIPSTA?");

if( find("+CIPSTA:\"") )

result = wifi.readStringUntil('"');

return find("OK") ? result : "";

}

Para configurar el ESP8266 es necesario ejecutar ciertos comandos. El primero de ellos, CIPMUX, permite multiplex conexiones al módulo WiFi. El segundo, CIPSERVER, inicia el modo servidor en el puerto indicado, el 80 en nuestro caso. El tercero, CIPSTO, configura un timeout o tiempo máximo de 5 segundos, en realidad no debería de hacernos falta pero en las pruebas no he conseguido que las conexiones se cierren por lo que es necesario ese comando. Y por último se usa el comando, CIPSTA, para obtener la IP del módulo.

boolean find( char *text ){
   return find(text, 1500);
}
boolean find( char *text, const int timeout )
{
   String temp = "";
   temp.reserve(128);
   unsigned long time = millis();

   while( time + timeout > millis() )
   {
      while( wifi.available() > 0 )
      {
         delay(5);
         temp += (char)wifi.read();

         if( temp.indexOf(text) > 0 )
            return true;
      }
   }
   return false;
}

boolean find( char *text ){

return find(text, 1500);

}

boolean find( char *text, const int timeout )

{

String temp = "";

temp.reserve(128);

unsigned long time = millis();

while( time + timeout > millis() )

{

while( wifi.available() > 0 )

{

delay(5);

temp += (char)wifi.read();

if( temp.indexOf(text) > 0 )

return true;

}

return false;

}

Para mejorar los tiempos de respuesta entre la ejecución de un comando y la recepción de la respuesta, se han eliminado los delay y sustituido por una función llamada find a la cual se le pasan dos parámetros, el texto a buscar y el tiempo máximo que se usara para encontrar ese texto, este segundo parámetro es opcional y si no se indica se usara 1.5 segundos de tiempo.

22 comentarios en “#10 (fin) Curso IoT con Arduino y ESP8266 WiFi: Ejemplo servidor -> Pintar página web”

Pere dice:

26 abril 2016 a las 15:01 pm

Jope, que chullo todo Giltesa, gracias por tus aportaciones sobre arduino, otros micros y inventos 😉
si no lo conoces, hay otro web que sigo mucho sobre como enviar datos de arduinos (nodos) a un gateway tanto por serial,cable o wifi con una libreria hecha por la comunidad,
mysensors.org
y tienen tambien un espacio para diseño de placas su publicación tambien 😉 https://www.openhardware.io/
alli a lo mejor encuentras gente que te puede ayudar sobre precios de fabricar placas mas economicas para tus proyectos.
saludos.

Responder
Alberto dice:

16 junio 2016 a las 13:36 pm

Hola Giltesa,

¿Que versión tienes en el ESP8266? Puedes mostrar el resultado de AT+GMR?
Tengo problemas con las respuestas de los módulos AT, no me devuelve los mismos valores que a ti.
He probado el firmware que indicabas en el #5, y otros muchos de internet y nada.

Un Saludo.

Responder
1. giltesa dice:
  
  16 junio 2016 a las 21:37 pm
  
  Hola Alberto,
  
  Me devuelve esto:
  
  Saludos.
Antonio dice:

5 agosto 2016 a las 17:59 pm

Hola,me ha encantado el curso. Es posible enviar datos desde sensores exteriores conectados a una proto y usando el wifi del módulo NodeMcu Lua ESP8266 ESP-12E a un pc o artuino interior sin alimentar el módulo mediante puerto USB y usando tan solo una fuente externa conectada a enchufe?
Por motivos de logistica no podria ser por USB.
Gracias anticipadas y un saludo

Responder
1. giltesa dice:
  
  5 agosto 2016 a las 18:02 pm
  
  Hola,
  
  La conexión USB no deja de ser una fuente de alimentación de 5V, por lo que puedes usar cualquier transformador USB para obtener 5V, si además necesitas 3.3V tendrás que usar un regulador de tensión.
  
  En cuanto a comunicar los sensores externos con los internos yo no usaría WiFi, eso es mejor para salir a internet mas que para comunicar nodos, para eso mejor módulos RF.
  
  Saludos.
Jesus Gonzalez dice:

7 noviembre 2016 a las 12:28 pm

Hola, encantado de contactar con usted. Mi nombre es Jesús.
Antes de nada felicitarle por sus tutoriales que están muy bien estructurados y explicados.
Empecé a iniciarme con el módulo ESP8266 con sus tutoriales y además he visto otras páginas para ir cogiendo más ideas y práctica. Le he hecho funcionar para controlar un led desde la web.
He puesto al ESP8266 como servidor web. Todo me funciona bien cuando estoy mi ordenador conectado a mi red. Pero tengo un problema y es que en los móviles no me carga la página que al hacer la petición al arduino. En el monitor veo que se hace la petición, que el módulo está mandando el html y que todo está funcionando aparentemente bien, pero en el móvil no me carga la página, Se queda todo el rato el móvil actualizando o haciendo peticiones pero no me la carga.
Tengo el puerto 80 del router apuntando a la ip 192.168.1.55 que es el del módulo esp8266.
Desde el portátil con wifi también funciona.
Me pasa con todos los proyectos que cargo.
He probado con iphone (IOS), Android y los navegadores Safari y Chrome. Todos reaccionan igual.
Estaría muy agradecido si pudiera ayudarme. Quisiera saber qué pasa para poder seguir haciendo mis proyectos caseros.
Espero respuesta suya. Puede responder al correo que le envío el el formulario.
Muchas gracias otra vez.
Atentamente Jesús.

Responder
1. giltesa dice:
  
  7 noviembre 2016 a las 19:54 pm
  
  Hola Jesus,
  
  Revisa el comando CIPSTO para ajustar el timeout como se indica en la entrada, debes tenerlo muy alto y la conexión como no sé cierra el móvil no pinta la página.
  
  Edit: Si quieres conectar el móvil al ESP8266 directamente sin usar un router tienes que configurar el módulo como un AP, configurar una IP y conectarte con el móvil al WiFi que te genere el módulo usando una IP en el rango de IPs del módulo… creo que no tiene DHCP el módulo así que la IP tendras que configurar en el móvil a mano.
  
  Saludos.
Jesus Gonzalez dice:

8 noviembre 2016 a las 22:42 pm

Hola otra vez y gracias por atenderme.
He probado a bajar el AT+CIPSTO a 1,2,3 y 4 y sigue sin cargar la página en los móviles. Tiene el mismo comportamiento que antes pero en el móvil deja de hacer la petición antes.
Ya había conectado el móvil directamente al módulo esp8266 y tampoco funciona así.
Como nota te digo que sí tiene DHCP y se puede activar y desactivar.
Si se te ocurre algo te agradecería que me lo dijeras.
¿Puede ser algo de mi router?
Muchas gracias

Responder
1. giltesa dice:
  
  8 noviembre 2016 a las 23:05 pm
  
  Hola,
  
  Pero dices que estas haciendo la conexión directa no? Entonces el router no se usa para nada, el módulo hace de punto de acceso WiFi y el móvil se conecta a él.
  
  Saludos.
Jesus Gonzalez dice:

9 noviembre 2016 a las 11:53 am

No. La conexión directa la hice como prueba. Yo me conecto con el móvil a mi wifi de casa y quiero cargar la página que programo en el Arduino.
Tus proyectos de Arduino con el esp8266 los puedes cargar la página en tu móvil? Has hecho la prueba?
Gracias otra vez.

Responder
1. giltesa dice:
  
  9 noviembre 2016 a las 13:14 pm
  
  Pues no recuerdo si lo probé en el móvil o no. ¿Entonces si te va en el pc pero no en el móvil, has probado más navegadores de Internet?
Jesus Gonzalez dice:

10 noviembre 2016 a las 23:32 pm

He probado en el móvil con Safari, Chrome y Opera. Todos reaccionan igual.

Responder
Jesus Gonzalez dice:

23 noviembre 2016 a las 9:53 am

Hola otra vez. Todavía sigo investigando y me he dado cuenta de una cosa.
Yo configuro el ESP8266 así:
AT+CWMODE=3
AT+CWJAP=»MiWifi»,»01234″ // Conecto a mi wifi
AT+CIPMUX=1
AT+CIPSERVER=1,2200
AT+CIPSTO=3
AT+CIPSTA=»192.168.1.55″,»192.168.1.1″,»255.255.255.0″ // le asigno una IP y le digo la puerta de enlace.

Pues con esta configuración el módulo ESP8266 no tiene acceso a Internet. Sí conecta con mi wifi pero no sale a Internet.
Eso es normal?
Como puedo tener acceso a Internet con el módulo ESP8266?
Muchas gracias por su tiempo dedicado.

Responder
1. giltesa dice:
  
  23 noviembre 2016 a las 22:38 pm
  
  Hola,
  
  No sé si es normal, no tengo ningún modulo preparado ahora para poder probarlo.
  Pero, si configurandolo desde el ESP no funciona entonces configura la IP desde el router y que se la asigne por DHCP.
  
  Saludos.
2. javivideo dice:
  
  3 enero 2017 a las 19:34 pm
  
  Hola jesus no se como llevas el proyecto, yo me estoy iniciando ahora y por lo que entiendo no te ha funcionado en los moviles, seguro que lo tienes en wifi y no datos, a mi si me ha funcionado, lo que estoy buscando es hacerlo funcionar desde otra red osea desde cualquier parte del mundo pero no lo consigo. saludos
3. DJ_POLE dice:
  
  24 abril 2017 a las 19:30 pm
  
  Para hacerlo funcionar desde «cualquier parte del mundo» necesitas un servicio de redireccionamiento de IP. Es lo mismo que para acceder a una cámara IP desde cualquier parte del mundo.
  Ahora te funciona porque te conectas a la IP del módulo WiFi estando conectado a la misma Red que el módulo, y el router te sirve la conexión entre ambos dispositivos, pero esa IP no es con la que sale el módulo WiFi a Internet. Por eso, si no tienes contratada IP fija con tu proveedor Internet necesitas usar un servicio de redireccionamiento, y también activar en la configuración de tu router el servicio de redireccion. Así, tu módulo pasa de tener una IP a tener una especie de «nombre web» (ejemplo ficticio: http://mi_esp8266.dyndns.org:80) el cual introduciendolo en cualquier navegador en cualquier parte del mundo siempre accedes a él. Es bastante sencillo de hacer aunque no lo parezca. Hay montones de ejemplos en Internet de cómo acceder a una cámara IP. Es lo mismo para el módulo WiFi del arduino. Te invito a buscar ejemplos y leer un poco, verás como no es tan complicado. El ejemplo que puse de Dyndns ahora es un servicio de pago, pero hay más proveedores que aún son gratuitos para particulares.
  Un saludo.
CARMAR dice:

22 octubre 2017 a las 21:08 pm

Hola Jesús.
Me encuentro con el mismo problema que tú, que dentro de la red de casa va todo bien, pero cuando accedo desde el exterior…. la página no aparece en el teléfono…
Has podido solucionarlo? Si es así, te agradecería me ayudaras. Gracias y saludos

Responder
1. giltesa dice:
  
  22 octubre 2017 a las 21:21 pm
  Hola Carmar,
  
  Tienes que configurar el router correctamente para poder acceder desde el exterior a tu red local donde tienes el ESP8266.
  - Primero tienes que configurar el servicio DHCP para asignarle una IP local estática al ESP8266 con fin de que siempre tenga la misma IP.
  - Después tienes que abrir el puerto que quieras para acceder al ESP8266, supongo que tienes una web así que el 80, hacia la IP estática previamente configurada.
  - Con esas dos cosas ya puedes escribir la IP publica de tu navegador de internet y cargara la página del ESP8266, si usas otro puerto distinto del 80 tendrás que indicarlo en la IP, por ejemplo el 8080 seria http://80.25.65.95:8080, la parte izquierda de los : correspondería a tu IP publica.
  - Opcionalmente puedes configurar el cliente DDNS del router y crearte una cuenta en un servicio de DDNS para acceder a tu casa por nombre de dominio y no por IP.
  Esos son los pasos, sabiéndolos puedes buscar más información por Google/Youtube para saber cómo hacerlo con tu router, es el mismo procedimiento que para configurar y acceder a un servidor, NAS, o cualquier aparato desde el exterior a la red de casa por lo que no es necesario que busques información especifica para Arduino/ESP8266.
  
  Saludos.
2. CARMAR dice:
  
  22 octubre 2017 a las 22:27 pm
  
  Hola Giltesa:
  Tengo abierto el puerto 80 del router para que me apunte a la IP estática del módulo ESP8266 ( En mi caso +CIFSR:STAIP,»192.168.1.42″
  )
  En el móvil escribo la IP pública que me da movistar, y a través del puerto serie del IDE de Arduino, veo como se envía la página web, y me da resultado de envío correcto de la página.
  Lo que ocurre es que la página no se llega a cargar nunca (o casi nunca), porque hay que esperar hasta5 minutos para que se acabe cargando… Esto es normal?
  
  Este proyecto, que consiste en el típico de encender/apagar una serie de leds con unos botones en pantalla y de leer temperartura y humedad de un sensor conectado a arduino, funciona perfectamente cuando estoy dentro de mi red local (cuando escribo 192.168.xxx). La pagina se carga casi instantáneamente.
  
  Además, lo curiso es que cuando estoy «fuera» de la red local, puedo actuar sobre los leds (apagar y encender) aunque no esté cargada la página web.
  Por ejemplo, si escribo 176.84.5.33/=ON1 ..33/=OFF1,( que es como trabaja la página web, añadiendo las órdenes a continuación de la dirección).
  Además, puedo monitorizar el proceso a través del puerto Serial y funciona como debería ser, pero sin cargarse la página….
  
  Adjunto las órdenes AT, por si véis algún problema con ellos.
  
  String ordenes[]=
  {
  
  //»AT+RST»,
  «AT+CWMODE=1»,
  «AT+CWJAP=\»MOVISTAR_10E2\»,\»cccccccccccccccccc\»»,
  //»AT+CIFSR» ,
  «AT+CIPMUX=1»,
  «AT+CIPSTO=200»,
  «AT+CIPSERVER=1,80»,
  «END» // Para reconocer el fin de los comandos AT
  };
  
  Muchas Gracias por la rápida respuesta…
3. giltesa dice:
  
  22 octubre 2017 a las 23:12 pm
  
  Hola Carmar,
  
  Para el ESP8266 le da igual que te conectes por LAN que por WAN, debe ser transparente para él ya que del trafico se encarga siempre el router. Si te tarda tanto tiempo tiene que ser por otra cosa. Las pruebas en LAN las haces con el móvil y te va rápido, pero en WAN te va lento con el móvil?
  Si tarda 5 minutos quizás sea el timeout que tiene configurado el ESP8266 cuando no cierras la conexión, entonces la cierra él tras ese tiempo. El tiempo se ajusta con el comando AT CIPSTO, en esta misma entrada hablo un poco de él.
  
  No sé si se te ha cortado al pegado o WordPress lo ha modificado al guardarlo pero los parámetros no se pasan como has puesto. 176.84.5.33/=ON1, lo correcto seria 176.84.5.33/?ON=1
  
  Saludos.
4. CARMAR dice:
  
  23 octubre 2017 a las 0:00 am
  
  Hola Giltesa:
  MUCHAS GRACIAS.
  El problema lo tenía en el parámetro AT+CIPSTO=200. Estaba convencido que cuanto más alto el valor mejor iría para la comunicación. Al reducir el valor todo OK. Se ve que no le he entendido del todo. Ahora va de fábula.
  
  Respecto al paso de parámetros, lo hago así «176.84.5.33/=ON1» y me funciona bien. Me recomiendas cambiarlo a como dices?
  
  Muchas Gracias de nuevo.
  Saludos
5. giltesa dice:
  
  23 octubre 2017 a las 0:06 am
  
  Hola Carmar,
  
  Me alegro de que te funcione con eso.
  
  En cuanto a la forma de pasar los parámetros, si sabes adaptar el código yo te recomiendo que lo hagas para seguir el estándar web, pero si te apetece nada mas porque si dices que te funciona pues tampoco pasa nada. (ahora te funciona, quizás si pasas mas parámetros juntos empieza a fallar..)
  
  https://desarrolloweb.com/articulos/317.php
  https://www.w3schools.com/tags/ref_httpmethods.asp
  
  Saludos.