In acest articol vom incerca sa facem un mic server web cu ajutorul placi de dezvoltare ESP32. Placa folosita in acest exemplu este ESP32-WROOM-32E iar in Arduino IDE vom alege ca si placa esp32-wroom-da module.
O poza cu modulul folosit este mai jos:
Codul sursa folosit este cel de mai jos:
#include <WiFi.h>
const char* ssid = "ReteauaTa";
const char* password = "ParolaTa";
WiFiServer server(80);
void setup() {
Serial.begin(115200);
Serial.println("\n\n\n");
Serial.println("======================================");
Serial.println("ESP32 - SERVER WEB");
Serial.println("======================================");
Serial.print("Conectare la ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi CONECTAT!");
Serial.print("Adresa IP: ");
Serial.println(WiFi.localIP());
server.begin();
Serial.println("Server web pornit pe port 80");
Serial.println("Accesează: http://" + WiFi.localIP().toString());
Serial.println("======================================");
}
void loop() {
WiFiClient client = server.available();
if (client) {
Serial.println("Client nou conectat!");
String currentLine = "";
String request = "";
bool gotRequest = false;
while (client.connected()) {
if (client.available()) {
char c = client.read();
if (!gotRequest) {
request += c;
if (c == '\n') {
gotRequest = true;
Serial.print("Request: ");
Serial.println(request);
processRequest(request, client);
break;
}
}
}
}
delay(10);
client.stop();
Serial.println("Client deconectat");
Serial.println("----------------------");
}
}
void processRequest(String request, WiFiClient &client) {
if (request.indexOf("GET / ") != -1 || request.indexOf("GET /index") != -1) {
sendMainPage(client);
}
else if (request.indexOf("GET /info") != -1) {
sendInfoPage(client);
}
else if (request.indexOf("GET /test") != -1) {
sendTestPage(client);
}
else {
send404Page(client);
}
}
void sendMainPage(WiFiClient &client) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
String html = "<!DOCTYPE html>";
html += "<html lang='ro'>";
html += "<head>";
html += "<meta charset='UTF-8'>";
html += "<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
html += "<title>ESP32 Server</title>";
html += "<style>";
html += "body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f5f5f5; }";
html += ".container { max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }";
html += "h1 { color: #333; text-align: center; }";
html += ".status { background: #e8f5e9; padding: 15px; border-radius: 5px; margin: 20px 0; }";
html += ".btn { display: inline-block; padding: 12px 24px; margin: 10px 5px; text-decoration: none; border-radius: 5px; font-weight: bold; }";
html += ".btn-info { background: #9C27B0; color: white; }";
html += ".menu { text-align: center; margin: 20px 0; }";
html += "footer { margin-top: 30px; text-align: center; color: #666; font-size: 0.9em; }";
html += "</style>";
html += "</head>";
html += "<body>";
html += "<div class='container'>";
html += "<h1>ESP32 Web Server</h1>";
html += "<div class='status'>";
html += "<h3>Status Sistem</h3>";
html += "<p><strong>IP:</strong> " + WiFi.localIP().toString() + "</p>";
html += "<p><strong>Wi-Fi:</strong> " + String(WiFi.RSSI()) + " dBm</p>";
html += "<p><strong>Timp functionare:</strong> " + String(millis() / 1000) + " secunde</p>";
html += "</div>";
html += "<div class='menu'>";
html += "<h3>🔗 Navigare</h3>";
html += "<a href='/info' class='btn btn-info'>Informatii</a>";
html += "<a href='/test' class='btn'>Testare</a>";
html += "</div>";
html += "<footer>";
html += "<p>ESP32 Web Server | Conectat la: <strong>" + String(WiFi.SSID()) + "</strong></p>";
html += "<p>Accesat la: " + String(millis() / 1000) + " secunde de la pornire</p>";
html += "</footer>";
html += "</div>";
html += "</body>";
html += "</html>";
client.println(html);
}
void sendTestPage(WiFiClient &client) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
String html = "<!DOCTYPE html>";
html += "<html>";
html += "<head><title>Pagina de test</title>";
html += "<style>body { text-align: center; margin-top: 100px; font-family: Arial; }</style>";
html += "</head>";
html += "<body>";
html += "<h1 style='color: #4CAF50; font-size: 3em;'>Pagina de test</h1>";
html += "<p style='font-size: 1.5em;'>Acesta este un server web realizat cu ajutorul lui ESP32!</p>";
html += "<p>IP: " + WiFi.localIP().toString() + "</p>";
html += "<p style='margin-top: 50px;'>";
html += "<a href='/' style='padding: 10px 20px; background: #4CAF50; color: white; text-decoration: none;'>Inapoi acasa</a>";
html += "</p>";
html += "</body>";
html += "</html>";
client.println(html);
}
void sendInfoPage(WiFiClient &client) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
String html = "<!DOCTYPE html>";
html += "<html>";
html += "<head><title>Informatii Sistem</title></head>";
html += "<body style='font-family: Arial; margin: 30px;'>";
html += "<h1>Informatii Sistem ESP32</h1>";
html += "<table border='1' cellpadding='10' style='border-collapse: collapse; width: 100%;'>";
html += "<tr style='background: #f0f0f0;'><th>Parametru</th><th>Valoare</th></tr>";
html += "<tr><td><strong>Adresa IP</strong></td><td>" + WiFi.localIP().toString() + "</td></tr>";
html += "<tr><td><strong>SSID Wi-Fi</strong></td><td>" + String(WiFi.SSID()) + "</td></tr>";
html += "<tr><td><strong>Putere semnal (RSSI)</strong></td><td>" + String(WiFi.RSSI()) + " dBm</td></tr>";
html += "<tr><td><strong>Adresa MAC</strong></td><td>" + WiFi.macAddress() + "</td></tr>";
html += "<tr><td><strong>Gateway IP</strong></td><td>" + WiFi.gatewayIP().toString() + "</td></tr>";
html += "<tr><td><strong>Subnet Mask</strong></td><td>" + WiFi.subnetMask().toString() + "</td></tr>";
html += "<tr><td><strong>Memorie RAM libera</strong></td><td>" + String(ESP.getFreeHeap()) + " bytes</td></tr>";
html += "<tr><td><strong>Frecventa CPU</strong></td><td>" + String(ESP.getCpuFreqMHz()) + " MHz</td></tr>";
html += "<tr><td><strong>Timp functionare</strong></td><td>" + String(millis() / 1000) + " secunde</td></tr>";
html += "</table>";
html += "<p style='margin-top: 20px;'>";
html += "<a href='/' style='padding: 10px 20px; background: #2196F3; color: white; text-decoration: none;'>Pagina Principala</a>";
html += "</p>";
html += "</body>";
html += "</html>";
client.println(html);
}
void send404Page(WiFiClient &client) {
client.println("HTTP/1.1 404 Not Found");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
String html = "<!DOCTYPE html>";
html += "<html>";
html += "<head><title>404 - Pagina negasita</title></head>";
html += "<body style='text-align: center; margin-top: 50px;'>";
html += "<h1 style='color: red;'>404 - Pagina nu a fost gasita</h1>";
html += "<p>Pagina pe care o cauti nu exista.</p>";
html += "<p><a href='/'>Mergi la pagina principala</a></p>";
html += "</body>";
html += "</html>";
client.println(html);
}Dupa incarcarea acestui cod in placa de dezvoltare in terminalul serial vom vedea daca s-a realizat conexiunea la reteaua wireless cat si adresa ip a acestui server web.
In functie de adresa ip locala adresa ip a serverului poate sa difere. In acest caz adresa de conectare este urmatoarea: 192.168.0.118, asa cum reiese din terminalul serial.
Daca vom accesa aceasta adresa vom vedea urmatoarea pagina:
In partea de jos a paginii avem si 2 linkuri: Informatii si Testare. Daca vom accesa linkul Informatii vom vedea aceasta pagina:
Dupa ce revenim la pagina principala putem testa si pagina Testare. Aceasta va arata in acest fel:
In cazul in care gresim linkul si incercam sa accesam o pagina care nu exista se va afisa o pagina de eroare:
