ESP8266 - WebSocket
En este tutorial, aprenderemos qué es WebSocket, por qué necesitamos usarlo para controlar ESP8266 de forma fluida y cómo usar WebSocket con ESP8268266. En un ejemplo práctico, aprenderemos a crear una aplicación de chat entre el navegador web y ESP8266, lo que te permitirá:
- Escribe un mensaje en la ventana de chat del navegador web y envíalo al ESP8266. Puedes adaptar esto para controlar el ESP8266.
- Recibe mensajes en tiempo real desde el ESP8266. Puedes adaptar esto para monitorear el ESP8266 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 WebSocket en ESP8266?
Ahora, quizá te estés preguntando: ¿Qué es WebSocket? Es bastante simple: WebSocket es una tecnología que permite a un navegador web hablar directamente con un servidor web en tiempo real.
- Sin WebSocket, tienes que actualizar la página 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 instantáneamente sin tener que recargar la página.
Probablemente te encontrarás con WebSocket en aplicaciones web cotidianas como juegos en línea, mensajería instantánea y actualizaciones del mercado de valores.
¿Por qué necesitamos WebSocket para controlar ESP8266 de forma suave?
Imagina que quieres controlar tu coche teledirigido 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 estuviera siempre escuchando tus comandos en tiempo real, sin retrasos causados por la recarga constante de la página.
En general, WebSocket te permite:
- Enviar datos desde el navegador web al ESP8266 sin recargar la página.
- Enviar datos desde el ESP8266 al navegador web sin recargar la página.
Esto permite una comunicación bidireccional en tiempo real.
Beneficios de WebSocket con ESP8266:
- Control en tiempo real: WebSocket permite una comunicación instantánea con el ESP8266, 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 necesidad de recargar la página de forma constante, mejorando la experiencia del usuario y la eficiencia.
Chat web con ESP8266 mediante WebSocket
El contenido de la página web (HTML, CSS, JavaScript) se almacena por separado en un archivo index.h. Así que tendremos dos archivos de código en el IDE de Arduino:
- Un archivo .ino con código ESP8266 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 es la primera vez que usas ESP8266, consulta cómo configurar el entorno para ESP8266 en Arduino IDE.
- Conecta la placa ESP8266 a tu PC mediante un cable micro USB
- Abre Arduino IDE en tu PC.
- Selecciona la placa ESP8266 correcta (p. ej. NodeMCU 1.0 (ESP-12E Module)) y el puerto COM.
- Abre el Administrador de Bibliotecas haciendo clic en el icono Library Manager en la barra de navegación izquierda de Arduino IDE.
- Busca “WebSockets”, luego encuentra la biblioteca WebSockets creada por Markus Sattler.
- Haz clic en el botón Install para instalar la biblioteca WebSockets.
- 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 ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp8266/esp8266-websocket
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "index.h"
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
DIYables_ESP32_WebSocket* webSocket;
void webSocketEvent(uint8_t num, WStype_t type, uint8_t* payload, size_t length) {
switch (type) {
case WStype_DISCONNECTED:
Serial.printf("[%u] Disconnected!\n", num);
break;
case WStype_CONNECTED:
{
IPAddress ip = webSocket.remoteIP(num);
Serial.printf("[%u] Connected from %d.%d.%d.%d\n", num, ip[0], ip[1], ip[2], ip[3]);
}
break;
case WStype_TEXT:
Serial.printf("[%u] Received text: %s\n", num, payload);
// Send a response back to the client
String echoMessage = "Received: " + String((char*)payload);
webSocket.sendTXT(num, echoMessage);
break;
}
}
void setup() {
Serial.begin(9600);
delay(500);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Initialize WebSocket server
webSocket.begin();
webSocket.onEvent(webSocketEvent);
// Serve a basic HTML page with JavaScript to create the WebSocket connection
server.on("/", HTTP_GET, []() {
Serial.println("Web Server: received a web page request");
String html = HTML_CONTENT; // Use the HTML content from the index.h file
server.send(200, "text/html", html);
});
server.begin();
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
// Handle client requests
server.handleClient();
// Handle WebSocket events
webSocket.loop();
// TODO: Your code here
}
- Crea el index.h archivo en Arduino IDE así:
- Ya sea haciendo clic en el botón justo debajo del icono del monitor serie y elegir Nueva pestaña, o usar las teclas Ctrl+Shift+N.
- Asigna el nombre al archivo index.h y haz clic en el botón Aceptar
- Copia el código de abajo y pégalo en el index.h.
- Modifica la información de WiFi (SSID y contraseña) en el código para que coincida con las credenciales de tu propia red.
- Ahora tienes el código en dos archivos: newbiely.com.ino y index.h
- Haz clic en el botón Upload en el Arduino IDE para cargar el código en el ESP8266.
- Abre el Monitor Serial
- Consulta el resultado en el Monitor Serial.
- Toma nota de la dirección IP que se muestra y escribe esta 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 con ESP8266 mediante WebSocket.
- Escribe algunas palabras y envíalas al ESP8266.
- Verás la respuesta del ESP8266.
- Si modificas el contenido HTML en el index.h y no tocas nada en el archivo newbiely.com.ino, cuando compiles y subas el código al ESP8266, el IDE de Arduino no actualizará el contenido HTML.
- Para que el IDE de Arduino actualice el contenido HTML en este caso, haz un cambio en el archivo newbiely.com.ino (por ejemplo, añadir una línea en blanco, añadir un comentario...).
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp8266/esp8266-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>ESP8266 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>ESP8266 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
ESP8266 Web Server's IP address IP address: 192.168.0.5
Autoscroll
Clear output
9600 baud
Newline
※ Nota:
Explicación del código línea por línea
El código anterior de ESP8266 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 ESP8266 funciona creando tanto un servidor web como un servidor WebSocket. El proceso se desarrolla de la siguiente manera:
- Cuando introduces la dirección IP del ESP8266 en un navegador web, se realiza una solicitud de la página web (interfaz de usuario) desde el ESP8266.
- El servidor web del ESP8266 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 web establece una conexión WebSocket con el servidor WebSocket en el ESP8266.
- 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 ESP8266 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 ESP8266 a continuación: