ESP8266 - Servidor Web
Este tutorial ensina como programar uma placa ESP8266 para que ela se torne um servidor web. Você poderá acessar páginas web hospedadas no ESP8266 usando um navegador no seu computador ou celular, permitindo ver os dados do ESP8266 e controlá-lo. Para facilitar, vamos avançar de passos simples para passos mais desafiadores, como segue:
- Servidor Web ESP8266 - Mostrando um texto simples na página web.
- Servidor Web ESP8266 - Monitorando valores de sensores do ESP8266 pela web.
- Servidor Web ESP8266 - Controlando o ESP8266 pela web.
- Servidor Web ESP8266 - Separando o conteúdo HTML (HTML, CSS e Javascript) do código do ESP8266 e colocando-o em outros arquivos na Arduino IDE.
- Servidor Web ESP8266 - Criando várias páginas, como index.html, temperature.html, led.html, error_404.html e error_405.html..., e mais.
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.
Lendo o valor do sensor do ESP8266 pela Web
Isso é relativamente simples. O código do ESP8266 faz as seguintes tarefas:
- Criar um servidor web que escuta requisições HTTP de um navegador.
- Ao receber uma requisição de um navegador, o ESP8266 responde com conteúdo HTML que contém o valor lido do sensor.
Abaixo está o código do ESP8266 que executa as tarefas acima:
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-web-server
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
void setup() {
Serial.begin(9600);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Define a route to serve the HTML page
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
server.send(200, "text/html", "<html><body><h1>Hello, ESP8266!</h1></body></html>");
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
Passos Rápidos
Para começar com o ESP8266 na Arduino IDE, siga estes passos:
- Veja o tutorial como configurar o ambiente para o ESP8266 na Arduino IDE se esta for a sua primeira vez usando o ESP8266.
- Ligue os componentes como mostrado no diagrama.
- Conecte a placa ESP8266 ao seu computador usando um cabo USB.
- Abra a Arduino IDE no seu computador.
- Escolha a placa ESP8266 correta, como (por exemplo, NodeMCU 1.0 (ESP-12E Module)), e a respectiva porta COM.
- Copie o código acima e abra-o com a Arduino IDE
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Clique no botão Upload da Arduino IDE para fazer upload do código para o ESP8266
- Abra o Serial Monitor
- Confira o resultado no Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Nodemcu 1.0 (ESP-12E Module)' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.5
- Anote o endereço IP exibido e digite esse endereço na barra de endereços de um navegador no seu celular ou PC.
- Como resultado, você verá a seguinte saída no Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Nodemcu 1.0 (ESP-12E Module)' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.5
ESP8266 Web Server: New request received:
GET /
- Ao acessar o navegador usando o endereço IP, você verá uma página web muito básica exibindo "Hello, ESP8266!". A página será parecida com esta:
Lendo o valor do sensor do ESP8266 pela Web
Abaixo está o código do ESP8266 que imprime o valor da temperatura na página web:
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-web-server
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
Serial.begin(9600);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Define a route to serve the HTML page
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
// get temperature from sensor
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel=\"icon\" href=\"data:,\">";
html += "</head>";
html += "<p>";
html += "Temperature: <span style=\"color: red;\">";
html += temperature;
html += "°C</span>";
html += "</p>";
html += "</html>";
server.send(200, "text/html", html);
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
Passos Rápidos
- Copie o código acima e abra-o com a Arduino IDE
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Faça upload do código para o ESP8266
- Ao acessar o navegador usando o endereço IP, você verá uma página web muito básica exibindo informações sobre a placa ESP8266. A página será parecida com esta:
Para deixar a página web com um visual fantástico, com interface gráfica (UI), veja a seção final deste tutorial.
※ Nota:
Com o código fornecido acima, para obter a atualização da temperatura, você precisa recarregar a página no navegador. Em uma próxima parte, vamos aprender como fazer a página web atualizar o valor da temperatura em segundo plano, sem recarregar a página.
Controlando o ESP8266 pela Web
Controlar algo conectado ao ESP8266 é um pouco mais desafiador do que apenas ler um valor. Isso porque o ESP8266 precisa entender a requisição que recebe do navegador para saber qual ação tomar.
Para um exemplo mais completo e detalhado, recomendo conferir os tutoriais listados abaixo:
Separando o conteúdo HTML em outro arquivo na Arduino IDE
Se você quer criar uma página web simples com conteúdo mínimo, pode embutir o HTML diretamente no código do ESP8266, como explicado antes.
No entanto, se você quer fazer uma página web mais sofisticada e impressionante, com conteúdo maior, fica inconveniente incluir todo o HTML, CSS e Javascript diretamente no código do ESP8266. Nessa situação, você pode usar uma abordagem diferente para organizar o código:
- O código do ESP8266 será colocado em um arquivo .ino, como antes.
- O código HTML (HTML, CSS, Javascript) será colocado em um arquivo .h separado. Isso permite manter o conteúdo da página web separado do código do ESP8266, facilitando o gerenciamento e a modificação.
Para isso, precisamos de dois passos principais:
- Preparar o conteúdo HTML
- Programar o ESP8266
Preparando o conteúdo HTML
- Crie um arquivo HTML no seu PC local que contenha o conteúdo HTML (HTML, CSS e Javascript) do design da sua UI.
- No arquivo HTML, onde os dados do ESP8266 devem ser exibidos, use um valor qualquer.
- Teste e modifique até ficar satisfeito.
- Vamos colocar o conteúdo HTML no arquivo .h na Arduino IDE. Veja o próximo passo.
Programando o ESP8266
- Abra a Arduino IDE e crie um novo sketch. Dê um nome a ele, por exemplo, newbiely.com.ino.
- Copie o código fornecido abaixo e cole no arquivo criado.
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-web-server
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "index.h" // Include the index.h file
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
Serial.begin(9600);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Serve the HTML page from the file
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
server.send(200, "text/html", webpage);
});
// Define a route to get the temperature data
server.on("/temperature", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /temperature"); // for debugging
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
server.send(200, "text/plain", temperatureStr);
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
- Altere as informações de WiFi (SSID e senha) no código para as suas
- 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 no index.h.
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
REPLACE_YOUR_HTML_CONTENT_HERE
)=====";
#endif
- Substitua a linha REPLACE_YOUR_HTML_CONTENT_HERE pelo seu conteúdo HTML preparado antes. Não há problema com caracteres de nova linha. Abaixo está um exemplo de arquivo index.h:
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 Temperature</title>
</head>
<body>
<h1>ESP8266 Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds
</script>
</body>
</html>
)=====";
#endif
- Agora você tem o código em dois arquivos: newbiely.com.ino e index.h
- Clique no botão Upload da Arduino IDE para fazer upload do código para o ESP8266
- Acesse a página web da placa ESP8266 pelo navegador como antes. Você a verá como abaixo:
※ Nota:
Nos códigos acima:
- O código HTML foi projetado para atualizar a temperatura em segundo plano em intervalos regulares, atualmente definidos para cada 4 segundos no código. Isso significa que o valor da temperatura é atualizado automaticamente, sem a necessidade de recarregar manualmente a página web. Você pode ajustar o intervalo de atualização no código de acordo com a sua preferência.
- O código do ESP8266 atende a duas requisições do navegador.
- Uma requisição para retornar o conteúdo HTML da página web
- A outra para retornar o valor da temperatura solicitado pela página web em segundo plano
Para uma ilustração mais completa e detalhada, consulte o tutorial ESP8266 - DS18B20 Temperature Sensor via Web
※ Nota:
- Se você alterar o conteúdo HTML dentro do arquivo index.h mas não modificar nada no arquivo newbiely.com.ino, a Arduino IDE não vai atualizar o conteúdo HTML quando você compilar e fizer upload do código para o ESP8266.
- Para forçar a Arduino IDE a atualizar o conteúdo HTML nessa situação, você precisa fazer uma modificação no arquivo newbiely.com.ino. Por exemplo, você pode adicionar uma linha vazia ou inserir um comentário. Essa ação faz a IDE reconhecer que houve mudanças no projeto, garantindo que o seu conteúdo HTML atualizado seja incluído no upload.
Servidor Web ESP8266 - Várias Páginas
Veja este tutorial ESP8266 - Web Server Multiple Pages.