Arduino Nano ESP32 - WebSocket
Neste tutorial, vamos aprender o que é o WebSocket, por que precisamos usá-lo para controlar o ESP32 de forma fluida e como usar o WebSocket com o Arduino Nano ESP32. Em um exemplo prático, vamos aprender a criar uma aplicação de chat entre o navegador web e o ESP32, permitindo que você:
- Digite uma mensagem na janela de chat no navegador web e a envie para o Arduino Nano ESP32. Você pode adaptar isso para controlar o Arduino Nano ESP32.
- Receba mensagens em tempo real do Arduino Nano ESP32. Você pode adaptar isso para monitorar o Arduino Nano ESP32 em tempo real.
Hardware Necessário
Or you can buy the following kits:
| 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 Nano ESP32?
Agora, você pode estar se perguntando: "O que é o WebSocket?" É bem simples: o WebSocket é uma tecnologia que permite que um navegador web converse diretamente com um servidor web em tempo real.
- Sem o WebSocket, você precisa atualizar a página web para obter atualizações. Isso não é muito conveniente.
- Com o WebSocket, a página web e o servidor permanecem conectados o tempo todo. Isso significa que eles podem compartilhar informações instantaneamente, sem precisar recarregar a página.
Você provavelmente já encontrou o 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 ESP32 de forma fluida?
Imagine que você quer controlar seu carro 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, você precisaria atualizar a página web. É como ter que apertar um botão de "recarregar" toda vez que você quer que seu comando chegue ao carro.
Agora, com o WebSocket, é como ter uma conexão contínua e direta entre o seu celular ou computador e o carro. Você não precisa mais atualizar a página toda vez que quiser guiar o carro ou ajustar a velocidade dele. É como se o carro estivesse sempre ouvindo seus comandos em tempo real, sem atrasos causados pelo recarregamento constante da página.
Em geral, o WebSocket permite que você:
- Envie dados do navegador web para o Arduino Nano ESP32 sem recarregar a página web.
- Envie dados do Arduino Nano ESP32 para o navegador web sem recarregar a página web.
Isso permite a comunicação bidirecional em tempo real.
Benefícios do WebSocket com o ESP32:
- Controle em Tempo Real: O WebSocket permite a comunicação instantânea com o ESP32, garantindo respostas rápidas aos comandos para uma experiência de usuário fluida.
- Conexão Persistente: Mantenha um vínculo contínuo sem atualizar a página de controle, criando uma linha de comunicação sempre pronta para instruções imediatas.
- Eficiência: Experimente 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 o Arduino Nano ESP32 via WebSocket
O conteúdo da página web (HTML, CSS, JavaScript) é armazenado separadamente em um arquivo index.h. Portanto, teremos dois arquivos de código na Arduino IDE:
- Um arquivo .ino que é o código do Arduino Nano ESP32, 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 Nano ESP32, veja como configurar o ambiente do Arduino Nano ESP32 na Arduino IDE.
- Conecte a placa Arduino Nano ESP32 ao seu PC por meio de um cabo USB
- Abra a Arduino IDE no seu PC.
- Selecione a placa Arduino Nano ESP32 correta (por exemplo, Arduino Nano ESP32 e a porta COM.
- Abra o Library Manager clicando no ícone Library Manager na barra de navegação à esquerda da Arduino IDE.
- Pesquise por “DIYables ESP32 WebServer” e encontre 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, newbiely.com.ino
- Copie o código abaixo e abra-o na Arduino IDE
/*
* Este código de Arduino Nano ESP32 foi desenvolvido por pt.newbiely.com
* Este código de Arduino Nano ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-websocket
*/
#include <DIYables_ESP32_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
DIYables_ESP32_WebServer server;
DIYables_ESP32_WebSocket* webSocket;
// Web Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// HTML_CONTENT from the index.h file
server.sendResponse(client, HTML_CONTENT);
}
// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
// Send welcome message
const char welcome[] = "Connected to ESP32 WebSocket Server!";
}
void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {
Serial.print("WebSocket Received (");
Serial.print(length);
Serial.print(" bytes): ");
Serial.println(message);
// Broadcast response to all connected clients using the library
if (webSocket != nullptr) {
String response = "Received: " + String((char*)message);
webSocket->broadcastTXT(response);
Serial.print("WebSocket sent (");
Serial.print(response.length());
Serial.print(" bytes): ");
Serial.println(response);
}
}
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 Nano ESP32 Web Server and 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() {
// Then handle HTTP requests
server.handleClient();
// Handle WebSocket
server.handleWebSocket();
}
- 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: newbiely.com.ino e index.h
- Clique no botão Upload na Arduino IDE para fazer o upload do código para o Arduino Nano ESP32.
- Abra o Serial Monitor
- Veja 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 celular ou PC.
- Você verá a página web como abaixo:
- Clique no botão CONNECT para conectar a página web ao Arduino Nano ESP32 via WebSocket.
- Digite algumas palavras e envie-as para o Arduino Nano ESP32.
- Você verá a resposta do Arduino Nano ESP32.
- Se você modificar o conteúdo HTML no index.h e não mexer em nada no arquivo newbiely.com.ino, quando você compilar e fizer o upload do código para o ESP32, a Arduino IDE não atualizará o conteúdo HTML.
- Para fazer a Arduino IDE atualizar o conteúdo HTML nesse caso, faça uma alteração no arquivo newbiely.com.ino (por exemplo, adicionar uma linha vazia, adicionar um comentário....)
/*
* Este código de Arduino Nano ESP32 foi desenvolvido por pt.newbiely.com
* Este código de Arduino Nano ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-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>Arduino Nano ESP32 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>Arduino Nano ESP32 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 Nano ESP32' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address IP address: 192.168.0.2
※ Nota:
Explicação do Código Linha por Linha
O código do Arduino Nano ESP32 acima contém uma explicação linha por linha. Por favor, leia os comentários no código!
Como o Sistema Funciona
O código do Arduino Nano ESP32 funciona criando tanto um servidor web quanto um servidor WebSocket. O processo se desenrola da seguinte forma:
- Quando você digita o endereço IP do ESP32 em um navegador web, é feita uma requisição da página web (Interface do Usuário) ao Arduino Nano ESP32.
- O servidor web do ESP32 responde transmitindo o conteúdo da página web (HTML, CSS, JavaScript).
- Em seguida, seu navegador web exibe a página web.
- Quando você clica no botão CONNECT, o código JavaScript embutido na página web estabelece uma conexão WebSocket com o servidor WebSocket no Arduino Nano ESP32.
- Com a conexão WebSocket estabelecida, quando você digita algo e clica no botão SEND, o código JavaScript envia esse texto para o Arduino Nano ESP32 por meio da conexão WebSocket, em segundo plano.
- Ao receber o valor do ângulo, o servidor WebSocket envia uma resposta de volta para a página web.
Você pode aprender outros exemplos de WebSocket com o Arduino Nano ESP32 abaixo: