Arduino UNO R4 - WebSocket
Esta guía explica qué es WebSocket, por qué es útil para usar Arduino UNO R4 y cómo usar WebSocket con Arduino UNO R4. Mostraremos cómo crear una aplicación de chat que permita a un navegador web comunicarse con Arduino UNO R4, permitiéndote:
- Envía mensajes desde la ventana de chat de tu navegador web para controlar el Arduino UNO R4.
- Recibe mensajes instantáneos del Arduino UNO R4. Puedes cambiar esta configuración para ver el Arduino UNO R4 en vivo.
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 UNO R4 Websocket?
Puede preguntar: '¿Qué es WebSocket?' Es sencillo: WebSocket es una tecnología que permite que un navegador web se comunique directamente con un servidor web de forma instantánea.
- Sin WebSocket, debes recargar la página para ver las actualizaciones. Esto no es muy conveniente.
- Con WebSocket, la página web permanece constantemente conectada al servidor. Esto significa que pueden compartir información de inmediato sin recargar la página.
A menudo utilizas la tecnología 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 de forma fluida Arduino UNO R4?
Supón que quieres controlar un coche teledirigido usando el navegador web de tu teléfono inteligente o de tu ordenador. Si no usas WebSocket, tendrías que actualizar la página cada vez que quieras cambiar la dirección o la velocidad del coche. Es similar a pulsar un botón de recarga cada vez que das una orden al coche.
WebSocket permite una conexión constante y directa entre tu navegador web y el coche. Puedes controlar la dirección y la velocidad del coche sin necesidad de actualizar la página. Es como si el coche respondiera instantáneamente a tus comandos en tiempo real, sin demoras por recargar la página.
WebSocket facilita:
- Enviar datos desde el navegador web al Arduino UNO R4 sin tener que recargar la página.
- Enviar datos de vuelta al navegador web desde Arduino UNO R4 sin necesidad de actualizar la página.
Esto facilita una conversación rápida y fluida en tiempo real.
Beneficios de WebSocket con Arduino UNO R4:
- Control en tiempo real: WebSocket permite una interacción inmediata con el Arduino UNO R4, habilitando respuestas rápidas a tus comandos para una experiencia fluida.
- Conexión persistente: Mantén una conexión constante sin necesidad de recargar la página de control, asegurando una línea de comunicación siempre lista para instrucciones directas.
- Eficiencia: Disfruta de respuestas rápidas y una mejor experiencia sin tener que recargar la página repetidamente, haciéndola más eficiente y agradable.
Chat web con Arduino UNO R4 a través de WebSocket
Los materiales de la página web, como HTML, CSS y JavaScript, se mantienen en un archivo separado llamado index.h. Entonces, en el IDE de Arduino, usaremos dos archivos de código.
- Un archivo .ino es código para Arduino UNO R4. Configura un servidor web y un servidor WebSocket.
- Un archivo .h contiene el contenido de la página web.
Pasos R\u00e1pidos
Sigue estas instrucciones paso a paso:
- Si es la primera vez que usas la placa Arduino Uno R4 WiFi/Minima, consulta el tutorial sobre configurar el entorno para Arduino Uno R4 WiFi/Minima en el IDE de Arduino.
- Conecta la placa Arduino Uno R4 a tu ordenador usando un cable USB.
- Abre el IDE de Arduino en tu ordenador.
- Selecciona la placa Arduino Uno R4 adecuada (por ejemplo, Arduino Uno R4 WiFi) y el puerto COM.
- Abre el Gestor de Bibliotecas haciendo clic en el icono Gestor de Bibliotecas en el lado izquierdo del IDE de Arduino.
- Busca Web Server for Arduino Uno R4 WiFi y localiza la biblioteca Web Server creada por DIYables.
- Haz clic en el botón Instalar para añadir la biblioteca Web Server.
- En el IDE de Arduino, crea un nuevo sketch y ponle de nombre, por ejemplo, newbiely.com.ino
- Copia el siguiente código y ábrelo en el IDE de Arduino
/*
* Este código de Arduino UNO R4 fue desarrollado por es.newbiely.com
* Este código de Arduino UNO R4 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-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);
}
- Cambia los detalles de WiFi (SSID y contraseña) en el código por los tuyos.
- Para crear el archivo index.h en Arduino IDE:
- Haz clic en el botón debajo del icono del monitor serie y selecciona Nueva pestaña, o pulsa las teclas Ctrl+Shift+N.
- Nombra el archivo como index.h y pulsa el botón OK.
- Copie el código siguiente y péguelo en el archivo 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 cargar el código al Arduino UNO R4.
- Abre el Monitor Serial.
- Consulta los resultados en el Monitor Serial.
- Anote la dirección IP que se muestra y escríbala en la barra de direcciones del navegador web en su teléfono inteligente o computadora.
- La página web aparecerá como se describe a continuación:
- Presione el botón CONECTAR para conectar la página web con Arduino UNO R4 usando WebSocket.
- Escriba un texto y envíelo al Arduino UNO R4.
- Observe la respuesta del Arduino UNO R4.
- Si solo cambias el HTML en el archivo llamado index.h y no modificas el archivo llamado newbiely.com.ino, el IDE de Arduino no actualizará el HTML cuando compiles y subas el código al Arduino UNO R4.
- Para actualizar el contenido HTML a través del IDE de Arduino, realiza un pequeño cambio en el archivo newbiely.com.ino, como añadir una línea en blanco o un comentario.
/*
* Este código de Arduino UNO R4 fue desarrollado por es.newbiely.com
* Este código de Arduino UNO R4 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-websocket
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Uno R4 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 Uno R4 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
Por favor, lea los comentarios en el código para una explicación línea por línea del código Arduino Uno R4 anterior.
Cómo funciona el sistema
El código de Arduino UNO R4 configura un servidor web y un servidor WebSocket. Así es como funciona:
- Escribe la dirección IP del Arduino UNO R4 en un navegador web.
- El servidor web del Arduino UNO R4 envía la página web (compuesta por HTML, CSS y JavaScript) a tu navegador.
- Tu navegador muestra la página web.
- Haz clic en el botón Conectar en la página. Esta acción inicia una conexión WebSocket con el servidor en el Arduino UNO R4.
- Si escribes texto y haces clic en el botón Enviar, el JavaScript envía tu texto al Arduino UNO R4 a través del WebSocket.
- El servidor WebSocket en el Arduino UNO R4 recibe tu texto y envía de vuelta una respuesta a tu página web.
Aquí hay otros ejemplos de Arduino UNO R4 WebSocket que puedes aprender:
Solución de problemas para Arduino Uno R4
Si el código anterior funciona, por favor actualiza la versión más reciente para el módulo WiFi del Arduino UNO R4.
- Conecta tu Arduino Uno R4 WiFi a tu PC
- Abre Arduino IDE 2
- Ve a Herramientas Actualizador de firmware
- Selecciona la placa y el puerto Arduino Uno R4 WiFi
- Haz clic en el botón COMPROBAR ACTUALIZACIONES
- Aparecerá una lista de versiones de firmware disponibles
- Selecciona la última versión del firmware
- Haz clic en el botón INSTALAR
- Espera hasta que termine
- Reinicia tu Arduino Uno R4 WiFi
- Vuelve a compilar y subir tu código al Arduino Uno R4 WiFi
- Verifica el resultado