ESP32-C6 na Prática: Criando Web Server

11/07/2025

ÍNDICE DE CONTEÚDO

Este post faz parte da série ESP32-C6 na Prática

Introdução

Neste artigo, mostraremos como criar um Web Server utilizando a placa de desenvolvimento ESP32-C6 DevKitC-1. Vamos criar um servidor web, servindo uma página HTML com controle de LED, além disso, vamos abordar limitações do Web Server.

Para conhecer mais a placa de desenvolvimento consulte nosso artigo Introdução à Placa ESP32-C6-DevKitC-1: Ideal para IoT

Características do Web Server

Usa o protocolo HTTP padrão (GET, POST).
Ideal para servir páginas web e responder a requisições com poucas interações.
Cada requisição abre e fecha uma conexão.
Ideal para tarefas como: acionar atuadores via botões em página web.
Baixa complexidade

Como o Web Server retorna valores ao acessar rotas, não é eficiente para atualizações em tempo real. Ou seja, trabalha de forma síncrona, sendo necessário um polling, loop de verificação para atualizar as informações.

Materiais Necessários

Para desenvolver nossa aplicação os materiais utilizados foram:

Os Melhores Treinamentos sobre Sistemas embarcados e IoT

Cursos com professores qualificados para acelerar sua carreira e projetos

MATRÍCULE-SE AGORA

Placa ESP23-C6 DevKitC-1
Cabo USB-C
LED
Resistor 330 ohms
Botão
Jumpers
Arduino IDE

Para configurar o ambiente e instalar o suporte a ESP32-C6 veja o artigo ESP32-C6 na Prática: Seu Primeiro “Hello World”

Circuito

O circuito utilizado para este artigo será a placa ESP32-C6 DevKitC-1 para gerir o Web Server, o LED para sinalizar as ações do Web Server e o botão para alterar o estado do LED.

Como o ESP32-C6 possui resistores internos de pull-up, não utilizaremos um resistor externo para o botão.

Quer aprender a desenvolver projetos profissionais para ESP32 usando o Arduino? Confira o curso: Domine o ESP32 com Arduino: Da Base aos Projetos Avançados, Um Curso completo de ESP32 com Arduino: programação, conectividade e projetos.

Código

No projeto proposto, o ESP23-C6 DevKitC-1 é conectado à rede local para gerir o Web Server. Assim, é necessário conectar a placa à rede utilizando as credenciais do Wi-Fi.

Em seguida, copie o endereço IP apresentado no monitor serial (Figura 2) e cole-o no navegador de sua preferência (Figura 3).

Para acompanhar o funcionamento do projeto, abra o monitor serial e verifique as etapas de criação do servidor. Abaixo, você encontrará o endereço IP da placa conectada.

Para modularizar o código e separar responsabilidades, foi criado um arquivo de biblioteca, html_page.h, responsável por separar o código html do código de desenvolvimento da placa. Ambos estão disponíveis para download.

O código html possui um template de cartões para controle de LED, Temperatura, Umidade, Luz e Pwm. No nosso exemplo iremos utilizar apenas o controle de LED, conforme a Figura 3 acima.

Com a página HTML disponibilizada no IP do navegador. O javascript realiza requisições para o servidor (ESP32-C6-DevKit-C) e o servidor retorna as informações para página.

Figura 4: Código javascript do Web Server

Conforme a imagem acima, quando a página é carregada, a função atualizarStatus é chamada. Isso solicita uma requisição GET para o servidor na rota “/status” e passa o retorno da requisição para a função atualizarEstado, responsável por atualizar as informações visualmente.

Ao acionarmos o botão de ligar ou desligar o LED na Web, chamamos a função toggleLed que gerencia qual ação a ser tomada. As funções ligarLED e desligarLED, seguem a mesma lógica de atualizarStatus.

Abaixo podemos ver as rotas que serão chamadas pelo código javascript citado, elas são definidas no código de desenvolvimento com as funções que devem executar.

Resultados

Ao inspecionar a página, podemos ver no console do navegador as rotas “/status” e “/on” que foram chamadas ao interagir com a página. Conforme a Figura 7 abaixo

Franzininho WiFi Lab01

Para executarmos o mesmo exemplo na Franzininho, basta alterarmos as definições dos pinos de LED e Botão.

const uint8_t LED_PIN = 14;    // PINO 14 do LED Vermelho
const uint8_t BUTTON_PIN = 7;  // PINO do Botão 1

Limitação Web Server

Agora vamos demonstrar uma interação fora do navegador, como no caso de pressionarmos o botão. Nesse exemplo, o cliente não conseguirá saber que o estado foi alterado, pois não foi o responsável pela requisição. Causando uma dessincronização de informações. Isso demonstra uma limitação do Web Server para dados em tempo real. Sendo necessário, uma verificação periódica para contornar a situação.

Conclusão

Neste artigo, mostramos como criar um servidor utilizando a placa ESP32-C6 DevKitC-1 na rede local. Para aqueles leitores que não estão familiarizados com a estruturação de um arquivo HTML, pode haver alguma dificuldade, mas existem várias ferramentas online disponíveis que podem ajudar e servir como fonte de pesquisa.

Também mostramos que para utilizarmos o Web Server em tempo real é preciso adaptar o código para o navegador solicitar o status periodicamente. No próximo artigo vamos utilizar a abordagem do WebSocket e AsyncWebServer para manter os dados sincronizados sem precisar recarregar a página.

Convidamos você a explorar os outros recursos da biblioteca Web Server, a fim de criar aplicações mais robustas e compartilhar seus resultados com a comunidade por meio de artigos ou vídeos.