Arduino UNO R4 - WebSocket
Este guia explica o que é o WebSocket, por que ele é útil para usar o Arduino UNO R4 e como usar o WebSocket com o Arduino UNO R4. Vamos mostrar como criar um aplicativo de chat que permite a um navegador web se comunicar com o Arduino UNO R4, permitindo que você:
- Envie mensagens da janela de chat do seu navegador web para controlar o Arduino UNO R4.
- Receba mensagens instantâneas do Arduino UNO R4. Você pode alterar essa configuração para acompanhar o Arduino UNO R4 ao vivo.
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables STEM V4B IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.
O que é o Websocket do Arduino UNO R4?
Você pode perguntar: "O que é WebSocket?" É simples: o WebSocket é uma tecnologia que permite a um navegador web conversar diretamente e de forma instantânea com um servidor web.
- Sem o WebSocket, você precisa recarregar a página web para ver novas atualizações. Isso não é muito conveniente.
- Com o WebSocket, a página web fica constantemente conectada ao servidor. Isso significa que eles podem trocar informações imediatamente, sem recarregar a página.
Você costuma usar a tecnologia WebSocket em aplicações web do dia a dia, como jogos online, mensagens instantâneas e atualizações do mercado de ações.
Por que precisamos do WebSocket para controlar o Arduino UNO R4 sem travar?
Imagine que você quer controlar um carro de controle remoto usando o navegador web do seu celular ou computador. Se você não usar o WebSocket, teria que atualizar a página web toda vez que quisesse mudar a direção ou a velocidade do carro. É como apertar um botão de "recarregar" toda vez que você dá um comando ao carro.
O WebSocket permite uma conexão constante e direta entre o seu navegador web e o carro. Você pode controlar a direção e a velocidade do carro sem precisar atualizar a página. É como se o carro respondesse instantaneamente aos seus comandos em tempo real, sem atrasos por recarregar a página.
O WebSocket facilita:
- Enviar dados do navegador web para o Arduino UNO R4 sem precisar recarregar a página web.
- Enviar dados de volta ao navegador web a partir do Arduino UNO R4 sem precisar atualizar a página.
Isso permite uma conversa de ida e volta fácil, em tempo real.
Benefícios do WebSocket com o Arduino UNO R4:
- Controle em Tempo Real: O WebSocket permite interação imediata com o Arduino UNO R4, possibilitando respostas rápidas aos seus comandos para uma experiência fluida.
- Conexão Persistente: Mantenha uma conexão constante sem precisar atualizar a página de controle, garantindo uma linha de comunicação sempre pronta para instruções diretas.
- Eficiência: Aproveite respostas rápidas e uma experiência melhor sem precisar recarregar a página repetidamente, tornando tudo mais eficiente e agradável.
Chat Web com o Arduino UNO R4 via WebSocket
O conteúdo da página web, como HTML, CSS e JavaScript, fica em um arquivo separado chamado index.h. Assim, no Arduino IDE, vamos usar dois arquivos de código.
- Um arquivo .ino é o código do Arduino UNO R4. Ele configura um servidor web e um servidor WebSocket.
- Um arquivo .h contém o conteúdo da página web.
Passos Rápidos
Siga estas instruções passo a passo:
- Se esta é a primeira vez que você usa o Arduino Uno R4 WiFi/Minima, consulte o tutorial sobre como configurar o ambiente para o Arduino Uno R4 WiFi/Minima no Arduino IDE.
- Conecte a placa Arduino Uno R4 ao seu computador usando um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa Arduino Uno R4 apropriada (por exemplo, Arduino Uno R4 WiFi) e a porta COM.
- Abra o Library Manager clicando no ícone Library Manager no lado esquerdo do Arduino IDE.
- Pesquise por Web Server for Arduino Uno R4 WiFi e localize a biblioteca Web Server criada pela DIYables.
- Clique no botão Install para adicionar a biblioteca Web Server.
- No Arduino IDE, crie um novo sketch e dê um nome a ele, por exemplo, newbiely.com.ino
- Copie o código a seguir e abra-o no Arduino IDE
/*
* Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com
* Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.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);
}
- Altere os dados do WiFi (SSID e senha) no código para os seus.
- Para criar o arquivo index.h no Arduino IDE:
- Clique no botão abaixo do ícone do serial monitor e selecione New Tab, ou pressione as teclas Ctrl+Shift+N.
- Dê ao arquivo o nome index.h e pressione o botão OK.
- Copie o código a seguir e cole-o no arquivo index.h.
- Agora você tem o código em dois arquivos: newbiely.com.ino e index.h.
- Clique no botão Upload no Arduino IDE para fazer o upload do código para o Arduino UNO R4.
- Abra o Serial Monitor.
- Veja os resultados no Serial Monitor.
- Anote o endereço IP mostrado e digite-o na barra de endereços do navegador web no seu smartphone ou computador.
- A página web vai aparecer como descrito abaixo:
- Pressione o botão CONNECT para ligar a página web ao Arduino UNO R4 usando WebSocket.
- Digite algum texto e envie-o ao Arduino UNO R4.
- Observe a resposta do Arduino UNO R4.
- Se você alterar apenas o HTML no arquivo chamado index.h e não modificar o arquivo chamado newbiely.com.ino, o Arduino IDE não vai atualizar o HTML quando você compilar e fizer o upload do código para o Arduino UNO R4.
- Para atualizar o conteúdo HTML pelo Arduino IDE, faça uma pequena alteração no arquivo newbiely.com.ino, como adicionar uma linha vazia ou um comentário.
/*
* Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com
* Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.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>
)=====";
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' on 'COM15')
New Line
9600 baud
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
※ Nota:
Explicação do Código Linha por Linha
Leia os comentários no código para ver uma explicação linha por linha do código acima do Arduino UNo R4.
Como o Sistema Funciona
O código do Arduino UNO R4 configura um servidor web e um servidor WebSocket. Veja como ele funciona:
- Digite o endereço IP do Arduino UNO R4 em um navegador web.
- O servidor web do Arduino UNO R4 envia a página web (feita de HTML, CSS, JavaScript) para o seu navegador.
- O seu navegador mostra a página web.
- Clique no botão CONNECT na página web. Essa ação inicia uma conexão WebSocket com o servidor no Arduino UNO R4.
- Se você digitar um texto e clicar no botão SEND, o JavaScript envia o seu texto ao Arduino UNO R4 por meio do WebSocket.
- O servidor WebSocket no Arduino UNO R4 recebe o seu texto e envia uma resposta de volta para a sua página web.
Aqui estão outros exemplos de WebSocket com o Arduino UNO R4 que você pode estudar:
Solução de Problemas para o Arduino Uno R4
Se o código acima não funcionar, atualize o módulo WiFi do Arduino UNO R4 para a versão mais recente
- Conecte o seu Arduino Uno R4 WiFi ao PC
- Abra o Arduino IDE 2
- Vá em Tools Firmware Updater
- Selecione a placa e a porta do Arduino Uno R4 WiFi
- Clique no botão CHECK UPDATES
- Uma lista de versões de firmware disponíveis vai aparecer
- Selecione a versão mais recente do firmware
- Clique no botão INSTALL
- Espere até terminar
- Reinicie o seu Arduino Uno R4 WiFi
- Compile novamente e faça o upload do seu código para o Arduino Uno R4 WiFi
- Confira o resultado