Arduino Nano ESP32 - WebSocket
En este tutorial, aprenderemos qué es WebSocket, por qué necesitamos usarlo para controlar el ESP32 de forma suave y cómo usar WebSocket con Arduino Nano ESP32. En un ejemplo práctico, aprenderemos cómo crear una aplicación de chat entre el navegador web y el ESP32, permitiéndote:
- Escribe un mensaje en la ventana de chat del navegador web y envíalo al Arduino Nano ESP32. Puedes adaptar esto para controlar el Arduino Nano ESP32.
- Recibe mensajes en tiempo real desde Arduino Nano ESP32. Puedes adaptar esto para monitorear el Arduino Nano ESP32 en tiempo real.
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
¿Qué es Arduino Nano ESP32 WebSocket?
Ahora, quizá te estés preguntando: «¿Qué es WebSocket?» Es bastante simple: WebSocket es una tecnología que permite que un navegador web se comunique directamente con un servidor web en tiempo real.
- Sin WebSocket, tienes que actualizar la página web para obtener actualizaciones. Eso no es muy conveniente.
- Con WebSocket, la página web y el servidor permanecen conectados todo el tiempo. Esto significa que pueden compartir información al instante sin necesidad de recargar la página.
Probablemente te encuentres con WebSocket en las aplicaciones web cotidianas, como juegos en línea, mensajería instantánea y actualizaciones del mercado de valores.
¿Por qué necesitamos WebSocket para controlar ESP32 de forma suave?
Imagina que quieres controlar tu coche a control remoto mediante una interfaz web en tu teléfono o computadora. Sin WebSocket, cada vez que quieras cambiar la dirección o la velocidad del coche, tendrías que actualizar la página web. Es como tener que pulsar un botón de "recargar" cada vez que quieres que tu comando llegue al coche.
Ahora, con WebSocket, es como tener una conexión continua y directa entre tu teléfono o computadora y el coche. Ya no necesitas actualizar la página cada vez que quieras manejar el coche o ajustar su velocidad. Es como si el coche siempre estuviera escuchando tus comandos en tiempo real, sin retrasos causados por la recarga constante de la página.
En general, WebSocket te permite:
- Envía datos desde el navegador web al Arduino Nano ESP32 sin recargar la página web.
- Envía datos desde el Arduino Nano ESP32 al navegador web sin recargar la página web.
Esto permite la comunicación bidireccional en tiempo real.
Beneficios de WebSocket con ESP32:
- Control en tiempo real: WebSocket permite comunicación instantánea con el ESP32, asegurando respuestas rápidas a los comandos para una experiencia de usuario fluida.
- Conexión persistente: Mantenga un enlace continuo sin actualizar la página de control, creando una línea de comunicación siempre lista para instrucciones inmediatas.
- Eficiencia: Experimente respuestas rápidas sin la necesidad de recargar constantemente la página, mejorando la experiencia del usuario en general y la eficiencia.
Chat web con Arduino Nano ESP32 a través de WebSocket
El contenido de la página web (HTML, CSS, JavaScript) está almacenado por separado en un archivo index.h. Por lo tanto, tendremos dos archivos de código en el IDE de Arduino:
- Un archivo .ino que contiene código para Arduino Nano ESP32, que crea un servidor web y un servidor WebSocket
- Un archivo .h que contiene el contenido de la página web
Pasos R\u00e1pidos
- Si esta es la primera vez que usas Arduino Nano ESP32, consulta cómo configurar el entorno para Arduino Nano ESP32 en Arduino IDE.
- Conecta la placa Arduino Nano ESP32 a tu PC mediante un cable USB
- Abre Arduino IDE en tu PC.
- Selecciona la placa Arduino Nano ESP32 correcta (p. ej. Arduino Nano ESP32 y el puerto COM).
- Abre el Administrador de Bibliotecas haciendo clic en el icono Administrador de Bibliotecas en la barra de navegación izquierda de Arduino IDE.
- Busca “DIYables ESP32 WebServer”, luego encuentra la biblioteca Web Server creada por DIYables.
- Haz clic en el botón Instalar para instalar la biblioteca Web Server.
- En el IDE de Arduino, crea un nuevo sketch, ponle un nombre, por ejemplo, newbiely.com.ino
- Copia el código de abajo y ábrelo con el IDE de Arduino
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-websocket
*/
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
DIYables_ESP32_WebSocket* webSocket;
// Web Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// HTML_CONTENT from the index.h file
server.sendResponse(client, HTML_CONTENT);
}
// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
// Send welcome message
const char welcome[] = "Connected to ESP32 WebSocket Server!";
}
void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {
Serial.print("WebSocket Received (");
Serial.print(length);
Serial.print(" bytes): ");
Serial.println(message);
// Broadcast response to all connected clients using the library
if (webSocket != nullptr) {
String response = "Received: " + String((char*)message);
webSocket->broadcastTXT(response);
Serial.print("WebSocket sent (");
Serial.print(response.length());
Serial.print(" bytes): ");
Serial.println(response);
}
}
void onWebSocketClose(net::WebSocket& ws, const net::WebSocket::CloseCode code, const char* reason, uint16_t length) {
Serial.println("WebSocket client disconnected");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("Arduino Nano ESP32 Web Server and WebSocket Server");
// Configure web server routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
// Enable WebSocket functionality
webSocket = server.enableWebSocket(81);
if (webSocket != nullptr) {
// Set up WebSocket event handlers
webSocket->onOpen(onWebSocketOpen);
webSocket->onMessage(onWebSocketMessage);
webSocket->onClose(onWebSocketClose);
} else {
Serial.println("Failed to start WebSocket server");
}
}
void loop() {
// Then handle HTTP requests
server.handleClient();
// Handle WebSocket
server.handleWebSocket();
}
- Crea el archivo index.h en el IDE de Arduino siguiendo estos pasos:
- Ya sea haciendo clic en el botón justo debajo del ícono del monitor serie y elegir Nueva pestaña, o usar las teclas Ctrl+Shift+N.
- Da el nombre del archivo index.h y haz clic en el botón Aceptar
- Copie el código que se encuentra a continuación y péguelo en index.h.
- Ahora tienes el código en dos archivos: newbiely.com.ino y index.h
- Haz clic en el botón Subir en el IDE de Arduino para subir el código al Arduino Nano ESP32.
- Abre el Monitor Serial.
- Consulta el resultado en el Monitor Serial.
- Toma nota de la dirección IP que se muestre y escribe esa dirección en la barra de direcciones de un navegador web en tu teléfono inteligente o PC.
- Verás la página web como se muestra a continuación:
- Haz clic en el botón Conectar para conectar la página web al Arduino Nano ESP32 a través de WebSocket.
- Escribe algunas palabras y envíalas al Arduino Nano ESP32.
- Verás la respuesta del Arduino Nano ESP32.
- Si modificas el contenido HTML en el index.h y no tocas nada en el newbiely.com.ino, cuando compiles y subas el código al ESP32, el IDE de Arduino no actualizará el contenido HTML.
- Para que el IDE de Arduino actualice el contenido HTML en este caso, realiza un cambio en el archivo newbiely.com.ino (p. ej., añade una línea en blanco, añade un comentario...).
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-websocket
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<!-- saved from url=(0019)http://192.168.0.2/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Arduino Nano ESP32 WebSocket</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
/* Add some basic styling for the chat window */
body {
font-size: 16px;
}
.chat-container {
width: 400px;
margin: 0 auto;
padding: 10px;
}
.chat-messages {
height: 250px;
overflow-y: auto;
border: 1px solid #444;
padding: 5px;
margin-bottom: 5px;
}
.user-input {
display: flex;
margin-bottom: 20px;
}
.user-input input {
flex: 1;
border: 1px solid #444;
padding: 5px;
}
.user-input button {
margin-left: 5px;
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.websocket {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.websocket button {
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.websocket .label {
margin-left: auto;
}
</style>
<script>
var ws;
var wsm_max_len = 4096; /* bigger length causes uart0 buffer overflow with low speed smart device */
function update_text(text) {
var chat_messages = document.getElementById("chat-messages");
chat_messages.innerHTML += text + '<br>';
chat_messages.scrollTop = chat_messages.scrollHeight;
}
function send_onclick() {
if(ws != null) {
var message = document.getElementById("message").value;
if (message) {
document.getElementById("message").value = "";
ws.send(message + "\n");
update_text('<span style="color:navy">' + message + '</span>');
// You can send the message to the server or process it as needed
}
}
}
function connect_onclick() {
if(ws == null) {
ws = new WebSocket("ws://" + window.location.host + ":81");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = ws_onopen;
ws.onclose = ws_onclose;
ws.onmessage = ws_onmessage;
} else
ws.close();
}
function ws_onopen() {
document.getElementById("ws_state").innerHTML = "<span style='color:blue'>CONNECTED</span>";
document.getElementById("bt_connect").innerHTML = "Disconnect";
document.getElementById("chat-messages").innerHTML = "";
}
function ws_onclose() {
document.getElementById("ws_state").innerHTML = "<span style='color:gray'>CLOSED</span>";
document.getElementById("bt_connect").innerHTML = "Connect";
ws.onopen = null;
ws.onclose = null;
ws.onmessage = null;
ws = null;
}
function ws_onmessage(e_msg) {
e_msg = e_msg || window.event; // MessageEvent
console.log(e_msg.data);
update_text('<span style="color:blue">' + e_msg.data + '</span>');
}
</script>
</head>
<body>
<div class="chat-container">
<h2>Arduino Nano ESP32 WebSocket</h2>
<div class="websocket">
<button class="connect-button" id="bt_connect" onclick="connect_onclick()">Connect</button>
<span class="label">WebSocket: <span id="ws_state"><span style="color:blue">CLOSED</span></span></span>
</div>
<div class="chat-messages" id="chat-messages"></div>
<div class="user-input">
<input type="text" id="message" placeholder="Type your message...">
<button onclick="send_onclick()">Send</button>
</div>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</div>
</body></html>
)=====";
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
※ Nota:
Explicación del código línea por línea
El código anterior de Arduino Nano ESP32 contiene una explicación línea por línea. ¡Por favor lea los comentarios en el código!
Cómo funciona el sistema
El código del Arduino Nano ESP32 funciona creando tanto un servidor web como un servidor WebSocket. El proceso se desarrolla de la siguiente manera:
- Cuando ingresas la dirección IP del ESP32 en un navegador web, se realiza una solicitud de la página web (Interfaz de usuario) desde el Arduino Nano ESP32.
- El servidor web del ESP32 responde transmitiendo el contenido de la página web (HTML, CSS, JavaScript).
- Posteriormente, tu navegador web muestra la página.
- Cuando haces clic en el botón Conectar, el código JavaScript incrustado en la página establece una conexión WebSocket con el servidor WebSocket en el Arduino Nano ESP32.
- Con la conexión WebSocket establecida, cuando escribes algo y haces clic en el botón Enviar, el código JavaScript envía ese texto al Arduino Nano ESP32 a través de la conexión WebSocket en segundo plano.
- Al recibir el valor del ángulo, el servidor WebSocket envía de vuelta una respuesta a la página web.
Puedes aprender otros ejemplos de WebSocket de Arduino Nano ESP32 a continuación: