Creación de un Chat Web con ESP32 y Servidor HTTP

¿Cómo crear una aplicación de chat con ESP32 y conexión Wi-Fi?

Construir una aplicación de chat en un proyecto de microcontroladores puede parecer complicado, pero con la guía adecuada, es un reto manejable. Usando la placa de desarrollo ESP32, aprenderás a conectar dispositivos mediante Wi-Fi y a configurar un servidor HTTP simple. Este enfoque allana el camino para implementar un sistema de chat entre dos dispositivos microcontroladores.

¿Qué necesitamos para empezar con el proyecto?

Primero, asegurémonos de tener las herramientas y configuraciones necesarias:

• Conexión Wi-Fi: Realizaremos la conexión a una red Wi-Fi, usando el protocolo examples-common que proporciona el SDK de ESP-IDF.
• Servidor HTTP: Crearemos un servidor para devolver contenido web (HTML e imagen).
• Archivos necesarios: Un archivo index.html vacío y un logo (por ejemplo, el de Platzi) en formato PNG.
• Configuraciones del CMakeLists.txt: Añadiremos líneas específicas para incluir los archivos mencionados en el binario resultante.

¿Cómo se configura el Wi-Fi y el servidor HTTP?

1. Ajustes iniciales en CMakeLists.txt:

   • Añadimos directivas para embebir los archivos de la página web en el firmware.

2. Configuración del Wi-Fi:

   • Inicializa la memoria flash para guardar credenciales de red.
   • Crea y ejecuta un grupo de eventos para gestionar la conexión Wi-Fi.
   • Utiliza la función exampleConnect para conectar a la red especificada.

3. Iniciar servidor web:

   • Define y registra URL handlers para los archivos HTML y PNG.
   • Verifica que el servidor se inicialice correctamente.

¿Cómo se muestra la información en la OLED y la terminal?

Una vez configurado, el dispositivo debe mostrar:

• Nombre de la red Wi-Fi (SSID): Mostrado en la pantalla OLED y terminal.
• IP asignada: También reflejará tanto en la OLED como en la terminal.
• Intensidad de señal (RSSI): Demuestra la fuerza de la señal recibida.
• Conteo de mensajes recibidos: Indica el número de mensajes que la placa ha procesado.

Este proceso se gestiona mediante printf para la terminal, y el uso de funciones específicas para la OLED.

¿Cómo se realiza la configuración y compilación final?

Para terminar, debemos personalizar la configuración de red para nuestros dispositivos de desarrollo:

1. Inicia el menú de configuración usando idf.py menuconfig.
2. En "Example Connection Configuration", define el SSID y la contraseña de la red.
3. Guarda los cambios, compila y carga el programa en las placas ESP32.

Con tu proyecto configurado, las tarjetas mostrarán la IP en la OLED, permitiéndote acceder al contenido HTML desde cualquier navegador conectado a la misma red.

¿En qué consiste la implementación del chat?

Una vez establecidas las conexiones y servidores, comenzamos a experimentar con la función de chat:

• Conexión a la misma red: Abre un navegador y navega a la IP asignada para ver el archivo HTML y el logo.
• Proyectos adicionales: Experimenta con efectos o animaciones en la OLED o mejora la página HTML.

Finalmente, este proyecto no solo enseña soluciones técnicas, sino que también abre la puerta a la creatividad para extender y personalizar la aplicación. Para obtener el código completo y recursos adicionales, puedes consultar el repositorio de GitHub del curso. ¡Anímate a compartir tus avances y participar en la comunidad!