Servidor Web ESP32 com Query String - Parâmetros de URL Dinâmicos
Exemplo WebServerQueryStrings - Servidor Dinâmico com Várias Páginas
Visão Geral
Este exemplo mostra como criar um servidor web dinâmico com várias páginas que usa parâmetros de consulta na URL para oferecer conteúdo interativo e funções de controle, com navegação suave entre as páginas.
Recursos
- Navegação entre várias páginas com conteúdo dinâmico baseado nos parâmetros da URL
- Conversão de unidade de temperatura (Celsius/Fahrenheit) por meio de parâmetros de consulta
- Controle de LED com parâmetros de query string
- Geração dinâmica de conteúdo com base na entrada do usuário
- Layout profissional com várias páginas e navegação consistente
- Análise e validação de parâmetros de URL
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables ESP32 S3 Starter Kit (ESP32 S3 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.
Instalação da Biblioteca
Siga estas instruções passo a passo:
- Se esta é a sua primeira vez usando o ESP32, consulte o tutorial sobre como configurar o ambiente do ESP32 no Arduino IDE.
- Conecte a placa ESP32 ao seu computador com um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa ESP32 apropriada (por exemplo, ESP32) e a porta COM.
- Abra o Library Manager clicando no ícone Library Manager no lado esquerdo do Arduino IDE.
- Pesquise por Web Server for ESP32 e encontre a mWebSockets da DIYables.
- Clique no botão Install para adicionar a biblioteca mWebSockets.
Exemplo de Web Server com Query Strings
- No Arduino IDE, vá em File Examples Web Server for ESP32 WebServerQueryStrings para abrir o código do exemplo
Estrutura do Código
- home.h: Template HTML da página inicial
- temperature.h: Template da página de monitoramento de temperatura
- led.h: Template da página de controle de LED
- WebServerQueryStrings.ino: Lógica principal do servidor
Conexão do Circuito
Não são necessários componentes externos - este exemplo usa o LED integrado no pino 13.
Recursos dos Parâmetros de Consulta
Parâmetros da Página de Temperatura
- unit=c ou unit=celsius - Exibe a temperatura em Celsius
- unit=f ou unit=fahrenheit - Exibe a temperatura em Fahrenheit
- Sem parâmetro - Usa Celsius por padrão
Parâmetros de Controle do LED
- state=on - Liga o LED
- state=off - Desliga o LED
Instruções de Configuração
1. Configuração da Rede
Edite as credenciais de WiFi diretamente no arquivo WebServerQueryStrings.ino:
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
2. Faça o Upload do Código e Monitore a Saída
- Conecte o ESP32 ao seu computador
- Selecione a placa e a porta corretas no Arduino IDE
- Faça o upload do sketch WebServerQueryStrings.ino
- Abra o Serial Monitor (9600 baud)
- Aguarde a conexão WiFi
- Anote o endereço IP exibido
- Se você não vir o endereço IP no Serial Monitor, pressione o botão de reset na placa ESP32
Exemplos de Uso
Abra o navegador e digite o endereço IP exibido no Serial Monitor para acessar o servidor web.
Teste a Função de Monitoramento de Temperatura:
- Clique no menu "Temperature".
- Veja a temperatura exibida. Clique em cada botão para mudar a unidade de temperatura
Teste a Função de Controle de LED:
- Clique no menu "LED Control". Você verá a interface web como a abaixo:
- Ligue e desligue o LED usando os botões fornecidos.
- Observe o status do LED integrado na placa ESP32 mudar instantaneamente.
Acessando Diferentes Páginas
Página Inicial
- URL: http://your-esp32-ip/
- Recursos: Página de boas-vindas com menu de navegação
Página de Temperatura (Padrão - Celsius)
- URL: http://your-esp32-ip/temperature
- Exibição: Temperatura em Celsius com seletor de unidade
Temperatura em Fahrenheit
- URL: http://your-esp32-ip/temperature?unit=f
- URL: http://your-esp32-ip/temperature?unit=fahrenheit
- Exibição: Temperatura convertida para Fahrenheit
Controle do LED
- Ligar: http://your-esp32-ip/led?state=on
- Desligar: http://your-esp32-ip/led?state=off
Explicação do Código
Processamento dos Parâmetros de Consulta
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Check for query parameter "unit"
String unit = "C";
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == "unit") {
unit = params.params[i].value;
}
}
// Generate temperature display based on unit
String temperatureDisplay = "Simulated temperature: 25°" + unit;
// Use the TEMPERATURE_PAGE template and replace placeholder
String response = TEMPERATURE_PAGE;
response.replace("%TEMPERATURE_VALUE%", temperatureDisplay);
server.sendResponse(client, response.c_str());
}
Controle do LED com Parâmetros de Consulta
void handleLed(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Check for query parameter "state"
String state = "";
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == "state") {
state = params.params[i].value;
break;
}
}
// Control LED based on state
if (state == "on") {
ledState = HIGH;
digitalWrite(LED_PIN, ledState);
} else if (state == "off") {
ledState = LOW;
digitalWrite(LED_PIN, ledState);
} else if (state == "") {
// No state parameter provided, just show current status
} else {
// Invalid state parameter
client.println("HTTP/1.1 400 Bad Request");
client.println("Connection: close");
client.println();
client.print("Invalid state parameter. Use ?state=on or ?state=off");
return;
}
// Get current LED state
String ledStatus = (ledState == HIGH) ? "ON" : "OFF";
// Use the LED_PAGE template and replace placeholders
String response = LED_PAGE;
response.replace("%LED_STATUS%", ledStatus);
server.sendResponse(client, response.c_str());
}
Validação de Parâmetros
// Helper function to find query parameter value
String getQueryParam(const QueryParams& params, const String& key) {
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == key) {
return params.params[i].value;
}
}
return "";
}
// Validation functions
bool isValidTemperatureUnit(String unit) {
unit.toLowerCase();
return (unit == "c" || unit == "celsius" ||
unit == "f" || unit == "fahrenheit" ||
unit == "");
}
bool isValidLedState(String state) {
return (state == "on" || state == "off" || state == "");
}
Templates HTML com Conteúdo Dinâmico
Template da Página de Temperatura
<div class="temperature-display">
<h2>Current Temperature</h2>
<div class="temp-value">%TEMPERATURE% %UNIT%</div>
<div class="unit-selector">
<p>Display in:</p>
<a href="/temperature?unit=c" class="unit-btn">Celsius</a>
<a href="/temperature?unit=f" class="unit-btn">Fahrenheit</a>
</div>
</div>
Template de Controle do LED
<div class="led-control">
<h2>LED Control</h2>
<div class="status">Status: <span>%LED_STATUS%</span></div>
<div class="controls">
<a href="/led?state=on" class="btn btn-on">Turn ON</a>
<a href="/led?state=off" class="btn btn-off">Turn OFF</a>
</div>
</div>
Recursos Avançados
Configuração das Rotas
void setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
ledState = LOW;
digitalWrite(LED_PIN, ledState);
// Initialize web server with credentials
server.begin(WIFI_SSID, WIFI_PASSWORD);
server.printWifiStatus();
// Add routes
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
server.addRoute("/led", handleLed);
// Set custom 404 handler
server.setNotFoundHandler(handleNotFound);
}
Funções Auxiliares para Parâmetros de Consulta
// Extract parameter from QueryParams structure
String getParam(const QueryParams& params, const String& key, const String& defaultValue = "") {
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == key) {
return params.params[i].value;
}
}
return defaultValue;
}
// Check if parameter exists
bool hasParam(const QueryParams& params, const String& key) {
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == key) {
return true;
}
}
return false;
}
Auxiliares para Montar URLs
// Helper to build URLs with parameters
String buildLedUrl(String state) {
return "/led?state=" + state;
}
String buildTempUrl(String unit) {
return "/temperature?unit=" + unit;
}
Observações sobre a Implementação Real
Limitações Atuais
A implementação real é simplificada em comparação com um servidor web completo:
- Suporta apenas a extração de um único parâmetro por tratador
- Simulação de temperatura simples baseada em string (sem conversão de unidade)
- Controle de LED básico, apenas com os estados ligado/desligado
- Usa o pino 9 em vez do pino 13 padrão
Solução de Problemas
Problemas Comuns
Os Parâmetros Não Funcionam
- Verifique o formato da URL: page?param=value
- Confirme que os nomes dos parâmetros coincidem exatamente (diferenciam maiúsculas de minúsculas)
- A implementação atual usa state para o LED, não action
Problemas com o Pino do LED
- Este exemplo usa o pino 9, não o pino 13
- Confirme que a constante LED_PIN corresponde ao seu hardware
Acesso aos Parâmetros de Consulta
- Use a estrutura QueryParams, não server.arg()
- Percorra params.params[i] para encontrar parâmetros específicos
Saída de Depuração
void debugParameters(const QueryParams& params) {
Serial.println("=== Request Parameters ===");
Serial.println("Params count: " + String(params.count));
for (int i = 0; i < params.count; i++) {
Serial.print(" ");
Serial.print(params.params[i].key);
Serial.print(" = ");
Serial.println(params.params[i].value);
}
Serial.println("========================");
}
Personalização
Adicionando um Novo Tratador com Parâmetros
void handleCustomPage(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
String theme = getParam(params, "theme", "light");
String lang = getParam(params, "lang", "en");
// Process parameters and generate response
String response = "<html><body>";
response += "<h1>Custom Page</h1>";
response += "<p>Theme: " + theme + "</p>";
response += "<p>Language: " + lang + "</p>";
response += "</body></html>";
server.sendResponse(client, response.c_str());
}
// Register the new route in setup()
server.addRoute("/custom", handleCustomPage);
Melhoria do Sistema de Templates
A implementação real usa uma substituição simples de marcadores:
String response = TEMPERATURE_PAGE;
response.replace("%TEMPERATURE_VALUE%", temperatureDisplay);
// Add more replacements as needed
response.replace("%UNIT%", unit);
response.replace("%TIMESTAMP%", String(millis()));
Próximos Passos
- Explore o WebServerJson.ino para o desenvolvimento de APIs REST
- Experimente o WebServerWithWebSocket.ino para comunicação em tempo real
- Implemente o tratamento de formulários com parâmetros POST