Servidor WEB con el ESP8266 y Arduino

Servidor WEB con el ESP8266 y Arduino. En este tutorial aprenderemos como usar y conectar el módulo ESP8266 y programarlo con Arduino. También veremos un poco de programación HTML poder conectar un cliente al servidor. También a como crear una página web para visualizar los datos que se estén midiendo en nuestra tarjeta de Arduino. Este módulo sirve para conectarnos a alguna red wifi  y después de conectada poder mandar o recibir datos.

Materíal

Un módulo wifi Esp8266.

Un Arduino UNO.

En la siguiente imagen, mostraremos el resultado de la aplicación.

IMAGEN PAGINA

Procedimiento

Paso # 1. Lo primero es saber reconocer los pines de nuestro módulo ESP8266. Aquí se muestra en la siguiente imagen:

ESP8266

Paso # 2.  Después de conocer un poco nuestro modulo lo siguiente es conectarlo al Arduino.

De modo que el pin “URXD” este conectado al pin 2 de Arduino.

El pin “UTXD” este conectado al pin 3 de Arduino.

El pin “VCC” y “CH_PD” esten conectados  al pin “3.3v” de Arduino (no es recomendable conectarlo a “5v” por qué podrían dañarse).

El pin “GND” este conectado al pin “GND” de Arduino.

Nota: el módulo WI-FI ESP8266 necesita una corriente superior a la que el Arduino puede dar, que es 50mv por lo que podríamos quitar la corriente al módulo y volverlo a conectar para que arranque y después se estabilizara.

En la siguiente imagen se muestran las conexiones con el ESP8266 y un Arduino UNO R3.

Servidor WEB con el ESP8266 y Arduino

Paso # 3.

Servidor WEB con el ESP8266 y Arduino – CONFIGURACIÓN

Después de realizar las respectivas conexiones, pasamos a nuestro PC y abrimos un nuevo sketch de Arduino, ahora copiamos y pegamos este código al programa de Arduino.

 

[code language=»cpp»]
#include
SoftwareSerial BT1(3, 2); // RX | TX
char txt;
void setup()
{ Serial.begin(9600);
BT1.begin(115200);
}
void loop()
{if (Serial.available())
{txt = Serial.read();
BT1.print(txt);
}
if (BT1.available())
{txt = BT1.read();
Serial.print(txt);
}
}
[/code]


config_esp8266

Paso # 4. Después de copiar el código,  conectamos  y lo cargamos al Arduino,  luego abrimos el monitor serial y nos aseguramos que en la parte de abajo diga “Ambos NL & CR” y en los baudios ”115200 baud” hecho esto ahora cortamos y volvemos a conectar la alimentación del módulo WI-FI para reiniciarlo y después de unos momentos  veremos algo como esto y un poco más abajo la palabra “ready”:

imagen ready

Si no apareciera volver a reiniciar el modulo. Si no se entendiera el mensaje verificar que los baudios del módulo ESP8266 sea “115200 baud” y si no bajar los baudios hasta ver algo legible.

Ahora comenzamos a configurar el modulo,  ingresamos  en el monitor serial la palabra “AT”.

Y recibiremos un “OK”:

IMAGEN AT

Ahora cambiamos la configuración de los baudios  con el siguiente comando.

“AT+CIOBAUD=9600”:

IMAGEN BAUD

Después de hacer esto cambiar los baudios de 115200 a 9600 en el código para estabilizar la comunicación con Arduino por que podría llegar a tener errores en la comunicación a 115200 baud.

Cambiamos esta parte:

void setup()
{Serial.begin(9600);
BT1.begin(115200);
}

Después probamos este comando “AT+CWMODE?” para ver en qué modo está configurado el modulo, nos respondería con un “+CWMODE: 3”  y si no aparece el modo 3  utilizamos el comando.

“AT+CWMODE=3”:

IMAGEN MODE

 

CONECTANDO A UNA RED

Después pasamos a revisar nuestras redes wifi mediante el comando “AT+CWLAP” y nos mostraría algo como esto:

IMAGEN CWLAP

Ahora nos conectaremos a una red, en mi caso será “FAMILIA TORRES” y claro con su contraseña mediante este comando  AT+CWJAP=”FAMILIA TORRES”,”torres150”.

Nos respondería con algo como esto:

IMAGEN CWJAP

Después vemos que dirección “IP”  se nos asignó con el comando “AT+CIFSR” y nuestra dirección será la segunda en aparecer  (la dirección puede variar) en mi caso es “192.168.15.19”.

Tenemos que recordar esta «IP»  o  anotarla porque es la que ingresamos  en  nuestro navegador:

IMAGEN CIFSR

Ahora tenemos que habilitar las conexiones múltiples y habilitar un servidor.

Mediante los comandos «AT+CIPMUX=1» y este otro «AT+CIPSERVER=1,80»:

IMAGEN MUX

Después ingresamos la dirección  «IP» del módulo en nuestro navegador:

IMAGEN IP

Ahora como pueden ver en el monitor serial observaremos nuestra «IP».

Luego escribimos un “/” después de la IP  luego escriban lo que gusten y en el monitor serial aparecerá lo que escribieron en su navegador por ejemplo “192.168.15.19/abcdefg123” y esto aparecerá en su monitor serial:

Servidor WEB con el ESP8266 y Arduino

Ahora descargamos este archivo que contiene el programa de Arduino que utilizaremos:  pagina_esp8266

cargamos este código en su Arduino (sin desconectar el módulo WI-FI y recordando la «IP»  sino tendrían que volver a configurar su módulo otra vez). En el código esta agregado un poco de código HTML lo cual explicaré un poco para saber qué hacen cada línea en el código.

Después de cargar el código en el arduino abrimos en monitor serial e ingresamos la dirección IP y obtendríamos una página como esta:

IMAGEN PAGINA

 

10 comentarios en «Servidor WEB con el ESP8266 y Arduino»

  1. 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.
    Tú has probado con tu móvil a ver si funciona?
    Espero respuesta suya. Puede responder al correo que le envío el el formulario.
    Muchas gracias otra vez.
    Atentamente Jesús.

    1. Hola Jesús, damos gracias por tus comentarios, lamentablemente no hemos realizado practicas de ese tipo, igual si llegas a obtener tu proyecto y gustas que lo publiquemos y te damos el merito, saludos !

    2. Hola a todos. Yo lo he probado y funciona muy bien. Lo que tuve que hacer es reprogramar el router para que asigne de manera fija al esp8266, un ip de manera permanente. Essto lo hice anclando la MAC del esp8266 a esa ip. NO uso el puerto 80. Arme 2 puertos, uno para cada esp8266 conectados al mismo router. Arme la 8081 para una ip y la 8082 para la otra ip. No es mucha mi experiencia, pero hice que funcionara de manera óptima.

  2. Durante el proceso explicado veo errores en las sucesivas configuraciones de las velocidades de comunicación de los dos flujos de datos tambien reflejado en las imagenes.
    -Tenemos el arduino definido con «Serial.begin» enlazado al terminal virtual y éste configurado en la casilla inferior.
    -Respecto al ESP, tenemos el arduino conectado por software ligado a los terminales 2 y 3 y configurado con «BT1.begin».
    -En el otro lado, el ESP nuevo inicialmente definido a 115.200 bauds pasa a ser reconfigurado por el comando“AT+CIOBAUD=9600”
    En cada momento, cada flujo de datos necesita la misma configuración de velocidad.
    Saludos

  3. Hola, con este modulo wifi se puede crear una «wifi propia local» de manera que tenga una pagina de «configuración», por ejemplo que el usuario ingrese la red wifi y el password de la casa para que pueda salira internet (s puede persistir datos en la arduino?) y luego, con esa configuración, pase a otro modo de «envío de datos» a un servidor externo?. Como sería?.
    Salu2.

  4. Hola!!
    antes que nada déjenme felicitarlos por el post es muy muy bueno, me ha funcionado de maravilla.
    La duda que me ha surgido es la siguiente , En el segundo ejemplo en donde se carga el codigo html ¿ por que en el void loop () se espera un valor 71?, les agradeceria si pudiesen responder a mi pregunta.
    saludos!!
    void loop()
    { while (BT1.available() >0 )
    {char c = BT1.read();
    if (c == 71)
    {Serial.println(«peticion web enviada»);
    delay(500);
    servidor();
    }
    }
    }

Deja una respuesta

Tu dirección de correo electrónico no será publicada.