Arduino - WebSocket
En esta guía, exploraremos qué es WebSocket, por qué es útil para controlar Arduino de forma eficaz y cómo implementar WebSocket con Arduino. A través de un ejemplo práctico, demostraremos cómo construir una aplicación de chat que conecte un navegador web con Arduino, permitiéndote:
- Escribe y envía mensajes desde la ventana de chat en tu navegador web al Arduino. Este método puede modificarse para controlar Arduino.
- Recibe mensajes desde Arduino al instante. Esta configuración puede modificarse para monitorear Arduino en tiempo real.
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 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 Websocket?
Puede que te estés preguntando, '¿Qué es WebSocket?' Es bastante sencillo: WebSocket es una tecnología que permite que un navegador web se comunique directamente con un servidor web en tiempo real.
- Sin WebSocket, tendrías que actualizar la página para ver las actualizaciones. Esto no es muy práctico.
- Con WebSocket, la página web permanece conectada de forma continua al servidor. Esto les permite intercambiar información al instante sin necesidad de actualizar la página.
Probablemente encontrarás la tecnología WebSocket con frecuencia 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 Arduino de forma suave?
Imagina que quieres controlar tu coche teledirigido utilizando una interfaz web en tu teléfono o en tu ordenador. 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 recarga cada vez que emites un comando al coche.
Con WebSocket, sin embargo, es como si existiera una conexión continua y directa entre tu teléfono o ordenador y el coche. No necesitas actualizar la página para conducir el coche o cambiar su velocidad. Es como si el coche escuchara constantemente tus órdenes en tiempo real, sin retrasos causados por tener que recargar la página.
En general, WebSocket facilita:
- Enviar datos desde el navegador web a Arduino sin necesidad de recargar la página.
- Enviar datos desde Arduino de vuelta al navegador web sin actualizar la página.
Esto permite una comunicación bidireccional fluida en tiempo real.
Beneficios de WebSocket con Arduino:
- Control en tiempo real: WebSocket permite una comunicación instantánea con el Arduino, asegurando respuestas rápidas a los comandos para una experiencia de usuario fluida.
- Conexión persistente: Mantener un enlace continuo sin actualizar la página de control, creando una línea de comunicación siempre lista para instrucciones inmediatas.
- Eficiencia: Obtenga respuestas rápidas sin necesidad de recargar la página de forma constante, mejorando en general la experiencia del usuario y la eficiencia.
Chat web con Arduino vía WebSocket
El contenido de la página web (HTML, CSS y JavaScript) se almacena 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 de Arduino, 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 Arduino Uno R4, consulta cómo configurar el entorno para Arduino Uno R4 en Arduino IDE.
- Conecta la placa Arduino a tu PC mediante un cable micro USB
- Abre Arduino IDE en tu PC.
- Selecciona la placa Arduino correcta (Arduino Uno R4 WiFi) 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 Web Server for Arduino Uno R4 WiFi y localiza la biblioteca Web Server creada por DIYables.
- Haz clic en el botón Install para instalar la biblioteca Web Server.
- En Arduino IDE, crea un nuevo sketch, dale un nombre, por ejemplo, ArduinoGetStarted.com.ino
- Copia el código de abajo y ábrelo con Arduino IDE
/*
* Este código de Arduino fue desarrollado por es.newbiely.com
* Este código de Arduino se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino/arduino-websocket
*/
#include <UnoR4WiFi_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
UnoR4WiFi_WebServer server(80);
UnoR4WiFi_WebSocket *webSocket;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HTML_CONTENT);
}
// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
const char message[]{ "Hello from Arduino server!" };
ws.send(WebSocket::DataType::TEXT, message, strlen(message));
}
void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {
Serial.print(F("Received: "));
Serial.println(message);
String reply = "Received: " + String((char*)message);
ws.send(dataType, reply.c_str(), reply.length());
}
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 Uno R4 WiFi - 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() {
// Handle HTTP requests and WebSocket connections using the library
server.handleClient();
server.handleWebSocket();
delay(10);
}
- Modifica la información de WiFi (SSID y contraseña) en el código para que coincida con las credenciales de tu propia red.
- Crea el archivo index.h en el IDE de Arduino mediante:
- Haz clic en el botón justo debajo del ícono del monitor serie y elige New Tab, o usa las teclas Ctrl+Shift+N.
- Escriba el nombre del archivo index.h y haga clic en el botón Aceptar
- Copia el código de abajo y pégalo en index.h.
- Ahora tienes el código en dos archivos: ArduinoGetStarted.com.ino y index.h
- Haz clic en el botón Subir en el IDE de Arduino para cargar el código a Arduino.
- Abre el Monitor Serial
- Consulta el resultado en el Monitor Serial.
- Toma nota de la dirección IP que se muestra y introduce 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 a Arduino mediante WebSocket.
- Escribe algunas palabras y envíalas a Arduino.
- Verás la respuesta de Arduino.
- Si modificas el contenido HTML en el index.h y no tocas nada en el archivo ArduinoGetStarted.com.ino, al compilar y cargar el código en Arduino, el IDE de Arduino no actualizará el contenido HTML.
- Para hacer que el IDE de Arduino actualice el contenido HTML en este caso, realiza un cambio en el archivo ArduinoGetStarted.com.ino (p. ej. agregar una línea en blanco, añadir un comentario...)
/*
* Este código de Arduino fue desarrollado por es.newbiely.com
* Este código de Arduino se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino/arduino-websocket
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino WebSocket</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
/* Add some basic styling for the chat window */
body {
background-color: #E1EFEF;
font-size: 20px;
line-height: 1.3;
}
button, input {
font-size: 20px;
line-height: 1.3;
}
.chat-container {
margin: 0 auto;
padding: 10px;
}
.chat-messages {
height: 250px;
overflow-y: auto;
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;
}
.message-sent {
border-radius: 25px;
background-color: #d35400;
float: right;
width: fit-content;
padding: 10px 20px;
margin: 0;
}
.message-received {
border-radius: 25px;
background-color: white;
float: left;
width: fit-content;
padding: 10px 20px;
margin: 0;
}
</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 += '<div style="width:100%;overflow: auto;">' + text + '</div>';
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('<p class="message-sent">' + message + '</p>');
// 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('<p class="message-received">' + e_msg.data + '</p>');
}
</script>
</head>
<body>
<div class="chat-container">
<h2>Arduino 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
Arduino Uno R4 WiFi - WebSocket Server
Connected! IP Address: 192.168.0.254
SSID: YOUR_WIFI_SSID
IP Address: 192.168.0.254
Signal strength (RSSI): -44 dBm
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.254:81
WebSocket server enabled successfully
Autoscroll
Clear output
9600 baud
Newline
※ Nota:
Explicación del código línea por línea
El código de Arduino anterior contiene una explicación línea por línea. ¡Por favor lea los comentarios del código!
Cómo funciona el sistema
El código de Arduino funciona configurando tanto un servidor web como un servidor WebSocket. Así es como funciona:
- Cuando ingresas la dirección IP del Arduino en un navegador web, este solicita la página web (Interfaz de usuario) desde el Arduino.
- El servidor web del Arduino envía a tu navegador el contenido de la página web (HTML, CSS, JavaScript).
- Tu navegador web muestra la página web.
- Al hacer clic en el botón Conectar de la página, el código JavaScript dentro de la página inicia una conexión WebSocket con el servidor WebSocket en el Arduino.
- Una vez que la conexión WebSocket está activa, si escribes algo y pulsas el botón Enviar, el JavaScript envía tu texto al Arduino a través de la conexión WebSocket en segundo plano.
- Después de recibir tu entrada, el servidor WebSocket en el Arduino envía una respuesta de vuelta a tu página web.
A continuación puedes aprender otros ejemplos de Arduino WebSocket: