Case Study
ESP32 Web Server
A web-based controller to manage ESP32 hardware outputs via WiFi. Emphasis on IoT, networking, and practical engineering.
2024
~6 weeks
Academic Project
C++ESP32AsyncWebServerWebSocketHTML/CSS/JSSPIFFS
Hardware Demo
GPIO 2
GPIO 4
GPIO 5
GPIO 18
<50ms
Response Time
8
Max Clients
~80mA
Power Consumption
~1.2MB
Flash Usage
// Capabilities
System Features
Real-time GPIO control via web interface
Live sensor data visualization
WebSocket for instant updates
OTA (Over-The-Air) firmware updates
WiFi configuration portal
Responsive mobile-friendly UI
// Code Sample
WebSocket Handler
main.cpp
void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
AwsFrameInfo *info = (AwsFrameInfo*)arg;
if (info->final && info->index == 0 && info->len == len) {
if (info->opcode == WS_TEXT) {
data[len] = 0;
// Parse JSON command
DynamicJsonDocument doc(256);
deserializeJson(doc, (char*)data);
String action = doc["action"];
int pin = doc["pin"];
if (action == "toggle") {
bool state = !digitalRead(pin);
digitalWrite(pin, state);
// Broadcast new state to all clients
broadcastState(pin, state);
}
}
}
}// Technical Deep Dive
Challenges & Solutions
Memory Management
Problem
ESP32 has limited RAM (~320KB), and complex web pages were causing crashes
Solution
Implemented chunked transfer encoding, GZIP compression, and stored static files in SPIFFS
Connection Stability
Problem
WebSocket connections would drop unexpectedly on poor WiFi networks
Solution
Added heartbeat mechanism with auto-reconnection and connection state UI indicators
Security Concerns
Problem
Open access to hardware controls posed security risks
Solution
Implemented basic auth, HTTPS support, and rate limiting for API endpoints