Arduino - WebSocket
Neste guia, vamos explorar o que é o WebSocket, por que ele é útil para controlar o Arduino de forma eficaz e como implementar o WebSocket com o Arduino. Por meio de um exemplo prático, vamos demonstrar como construir um aplicativo de chat que conecta um navegador web ao Arduino, permitindo que você:
- Digite e envie mensagens da janela de chat no seu navegador web para o Arduino. Esse método pode ser modificado para controlar o Arduino.
- Receba mensagens do Arduino instantaneamente. Essa configuração pode ser modificada para monitorar o Arduino em tempo real.
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 Arduino Websocket?
Você deve estar se perguntando: "O que é WebSocket?" É bem simples: o WebSocket é uma tecnologia que permite que um navegador web se comunique diretamente com um servidor web em tempo real.
- Sem o WebSocket, você precisaria recarregar a página web para ver novas atualizações. Isso não é muito prático.
- Com o WebSocket, a página web permanece continuamente conectada ao servidor. Isso permite que eles troquem informações instantaneamente, sem precisar recarregar a página.
Você provavelmente encontra a tecnologia WebSocket com frequência 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 de forma fluida?
Imagine que você quer controlar seu carrinho de controle remoto usando uma interface web no seu celular ou computador. Sem o WebSocket, toda vez que você quisesse mudar a direção ou a velocidade do carro, precisaria recarregar a página web. É como ter que apertar um botão de "recarregar" toda vez que você envia um comando para o carro.
Com o WebSocket, no entanto, é como se houvesse uma conexão contínua e direta entre seu celular ou computador e o carro. Você não precisa recarregar a página para dirigir o carro ou mudar sua velocidade. É como se o carro escutasse constantemente seus comandos em tempo real, sem nenhum atraso causado pela necessidade de recarregar a página.
De modo geral, o WebSocket facilita:
- O envio de dados do navegador web para o Arduino sem precisar recarregar a página web.
- O envio de dados do Arduino de volta para o navegador web sem recarregar a página.
Isso possibilita uma comunicação bidirecional fluida em tempo real.
Benefícios do WebSocket com o Arduino:
- Controle em Tempo Real: o WebSocket permite comunicação instantânea com o Arduino, garantindo respostas rápidas aos comandos para uma experiência de usuário perfeita.
- Conexão Persistente: mantenha uma ligação contínua sem recarregar a página de controle, criando uma linha de comunicação sempre pronta para instruções imediatas.
- Eficiência: tenha respostas rápidas sem a necessidade de recarregar a página constantemente, melhorando a satisfação geral do usuário e a eficiência.
Chat Web com Arduino via WebSocket
O conteúdo da página web (HTML, CSS, JavaScript) fica armazenado separadamente em um arquivo index.h. Assim, teremos dois arquivos de código na Arduino IDE:
- Um arquivo .ino, que é o código do Arduino, que cria um servidor web e um servidor WebSocket
- Um arquivo .h, que contém o conteúdo da página web.
Passos Rápidos
- Se esta é a primeira vez que você usa o Arduino Uno R4, veja como configurar o ambiente para o Arduino Uno R4 na Arduino IDE.
- Conecte a placa Arduino ao seu PC por meio de um cabo USB Type-C
- Abra a Arduino IDE no seu PC.
- Selecione a placa Arduino correta (Arduino Uno R4 WiFi) e a porta COM.
- Abra o Gerenciador de Bibliotecas clicando no ícone Library Manager na barra de navegação à esquerda da 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 instalar a biblioteca Web Server.
- Na Arduino IDE, crie um novo sketch e dê um nome a ele, por exemplo, ArduinoGetStarted.com.ino
- Copie o código abaixo e abra-o com a Arduino IDE
/*
* Este código de Arduino foi desenvolvido por pt.newbiely.com
* Este código de Arduino é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.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);
}
- Modifique as informações de WiFi (SSID e senha) no código para corresponder às credenciais da sua própria rede.
- Crie o arquivo index.h na Arduino IDE da seguinte forma:
- Clique no botão logo abaixo do ícone do serial monitor e escolha New Tab, ou use as teclas Ctrl+Shift+N.
- Dê ao arquivo o nome index.h e clique no botão OK
- Copie o código abaixo e cole-o no index.h.
- Agora você tem o código em dois arquivos: ArduinoGetStarted.com.ino e index.h
- Clique no botão Upload na Arduino IDE para carregar o código no Arduino.
- Abra o Serial Monitor
- Confira o resultado no Serial Monitor.
- Anote o endereço IP exibido e digite esse endereço na barra de endereços de um navegador web no seu smartphone ou PC.
- Você verá a página web como abaixo:
- Clique no botão CONNECT para conectar a página web ao Arduino via WebSocket.
- Digite algumas palavras e envie-as ao Arduino.
- Você verá a resposta do Arduino.
- Se você modificar o conteúdo HTML no index.h e não mexer em nada no arquivo ArduinoGetStarted.com.ino, quando você compilar e carregar o código no Arduino, a Arduino IDE não vai atualizar o conteúdo HTML.
- Para fazer a Arduino IDE atualizar o conteúdo HTML nesse caso, faça uma alteração no arquivo ArduinoGetStarted.com.ino (por exemplo, adicionar uma linha vazia, adicionar um comentário....)
/*
* Este código de Arduino foi desenvolvido por pt.newbiely.com
* Este código de Arduino é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.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>
)=====";
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' 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
O código Arduino acima contém explicações linha por linha. Leia os comentários no código!
Como o Sistema Funciona
O código do Arduino funciona configurando tanto um servidor web quanto um servidor WebSocket. Veja como funciona:
- Quando você digita o endereço IP do Arduino em um navegador web, ele solicita a página web (Interface do Usuário) ao Arduino.
- O servidor web do Arduino então envia o conteúdo da página web (HTML, CSS, JavaScript) para o seu navegador.
- Seu navegador web exibe a página web.
- Ao clicar no botão CONNECT na página web, o código JavaScript dentro da página inicia uma conexão WebSocket com o servidor WebSocket no Arduino.
- Quando a conexão WebSocket está ativa, se você digitar algo e clicar no botão SEND, o JavaScript envia seu texto ao Arduino pela conexão WebSocket em segundo plano.
- Depois de receber sua mensagem, o servidor WebSocket no Arduino envia uma resposta de volta para sua página web.
Você pode aprender outros exemplos de Arduino WebSocket abaixo: