Web server with (regular) DNS, SoftAP, and even files! (favicon.ico, etc)
Posted: Tue Nov 26, 2024 7:16 pm
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>
#include <DNSServer.h>
DNSServer dnsServer; // Declare the UDP object
AsyncWebServer server(80);
void handleRoot() {
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
if (request->host() == "esp32.com") {
request->send(200, "text/html", "<html> <head> <link rel=\"shortcut icon\" href=\"/favicon.ico\" /> <title>ESP32 Test</title> </head> <body style=\"font-family: system-ui;\"> Hello, this is a test of the ESP32's SoftAP, running a web server! This was made with a clock of 240 MHz and a Wi-Fi RF output of +19.5 dBm. <br> More information on the ESP32: It has a dual core processor, Bluetooth (Classic and Low Energy), ESP-NOW (to communicate directly from 1 ESP32 to another without WiFi or Bluetooth) and set up with 1.2MB of programmable space and 1.5MB of file system. You can also program it via the Arduino IDE. <br> This web server is accessible any time on this network while my ESP32 is connected at esp32.com and connect to this network, ESP32-TEST. On a mobile device with mobile data access, to access this website, make sure that mobile data is off. This is one of my projects I work on sometimes, but the fact I use SoftAP and not station means I can send from anywhere, even without Wi-Fi access! <br> The favicon/icon you see on this website on the tabs bar took a while to get working, but with SPIFFS I did get it to work. Making it was simple, I just used Microsoft Paint and I typed ESP32 on a black background.<br> <br> Q&A: <br> 1. What even is this? <br> Answer: This is a web server I made for the ESP32 using the SoftAP mode and using Arduino IDE. <br> 2. How long did it take to make this? <br> Answer: I don't know, I didn't count. <br> 3. How did you get the icon working? <br> Answer: I used SPIFFS to hold the icon. <br> 4. How did you get this address? <br> I used mDNS, which only does .local websites. <br> <br> Pages: <br> / (root) (THIS PAGE) <br> /specs <br> /projects <br> /files <br> /pages <br> /redirectTest <br> <br> Files: <br> /favicon.ico (Icon) <br> /hello.txt <br> /audio.wav </body> </html>"); //Send web page
} else {
request->send(404, "text/html", "<html><head><title>Unknown DNS!</title></head><body style=\"font-family: system-ui;\"> DNS unknown! The only website on this server is esp32.com. You are on: " + request->host() + ".</body></html>");
}
});
}
void handleSpecs() {
server.on("/specs", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", "<html> <head> <link rel=\"shortcut icon\" href=\"/favicon.ico\" /> <title>ESP32 Specs</title> </head> <body style=\"font-family: system-ui;\"> <h1> ESP32 Specs </h1> <br> CPU: Xtensa LX6 microprocessor @ 240 MHz <br> RAM: 520 KB <br> ROM: 448 KB <br> Flash: 4, 8, 16 MB <br> Wireless: WiFi up to 802.11n/150Mbps, Bluetooth 4.2 or BLE, ESP-NOW <br> Wired Connectivity: Micro USB-B or USB-C <br> Wi-Fi Output level: 19.5 dBm <br> <br> Pages: <br> / (root) <br> /specs (THIS PAGE) <br> /projects <br> /files <br> /pages <br> /redirectTest <br> <br> Files: <br> /favicon.ico (Icon) <br> /hello.txt <br> /audio.wav </body> </html>"); //Send web page
});
}
void handleProjects() {
server.on("/projects", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", "<html> <head> <link rel=\"shortcut icon\" href=\"/favicon.ico\" /> <title>My projects</title> </head> <body style=\"font-family: system-ui;\"> I'm currently working on: <br> nothing currently <br> <br>Pages: <br> / (root) <br> /specs <br> /projects (THIS PAGE) <br> /files <br> /pages <br> /redirectTest <br> <br> Files: <br> /favicon.ico (Icon) <br> /hello.txt <br> /audio.wav </body> </html>"); //Send web page
});
}
void handleFiles() {
server.on("/files", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", "<html> <head> <link rel=\"shortcut icon\" href=\"/favicon.ico\" /> <title>Web server files</title> </head> <body style=\"font-family: system-ui;\"> Website files: (Click to navigate) <br> <a href=\"/favicon.ico\">favicon.ico</a> <br> <a href=\"hello.txt\">hello.txt</a> <br> <a href=\"audio.wav\">audio.wav</a> <br> <br> Pages: <br> / (root) <br> /specs <br> /projects <br> /files (THIS PAGE) <br> /pages <br> /redirectTest <br> <br> Files: <br> /favicon.ico (Icon) <br> /hello.txt <br> /audio.wav </body> </html>"); //Send web page
});
}
void handlePages() {
server.on("/pages", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", "<html> <head> <link rel=\"shortcut icon\" href=\"/favicon.ico\" /> <title>Web server pages</title> </head> <body style=\"font-family: system-ui;\"> Website pages: (Click to navigate) <br> <a href=\"/\">/</a> <br> <a href=\"/specs\">/specs</a><br> <a href=\"/projects\">/projects</a> <br> <a href=\"/files\">/files</a><br> <a href=\"/pages\">/pages</a> <br> <a href=\"/redirectTest\">/redirectTest (redirects to /pages)</a> <br> <br> Pages: <br> / (root) <br> /specs <br> /projects <br> /files <br> /pages (THIS PAGE) <br> <br> Files: <br> /favicon.ico (Icon) <br> /hello.txt <br> /audio.wav </body> </html>"); //Send web page
});
}
void handleRedirecttest() {
server.on("/redirectTest", HTTP_GET, [](AsyncWebServerRequest *request){
request->redirect("/pages"); //Send web page
});
}
void handleFavicon() {
server.on("/favicon.ico", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/favicon.ico", "image/png"); //Send web page
});
}
void handleHellotxt() {
server.on("/hello.txt", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/hello.txt", "text/raw"); //Send web page
});
}
void handleaudioWav() {
server.on("/audio.wav", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/audio.wav", "audio/x-wav"); //Send web page
});
}
void handlenotFoundPages() {
server.onNotFound([](AsyncWebServerRequest *request){
if (request->host() == "esp32.com") {
request->send(404, "text/html", "<html><head><link rel=\"shortcut icon\" href=\"/favicon.ico\" /><title> Page not found! </title> </head> <body style=\"font-family: system-ui;\"> Page not found! <br> Maybe you're looking for: <br> <a href=\"/\">/</a> <br> <a href=\"/specs\">/specs</a><br> <a href=\"/projects\">/projects</a> <br> <a href=\"/files\">/files</a><br> <a href=\"/pages\">/pages</a> <br> <a href=\"/redirectTest\">/redirectTest (redirects to /pages)</a> "); //Send web page
} else {
request->send(404, "text/html", "<html><head><title>Unknown DNS!</title></head><body style=\"font-family: system-ui;\"> DNS unknown! The only website on this server is esp32.com. You are on: " + request->host() + ".</body></html>");
}
});
}
void setup(void)
{
Serial.begin(115200);
if(!SPIFFS.begin(true)){
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
Serial.println();
Serial.println("Booting Sketch...");
WiFi.mode(WIFI_AP);
WiFi.softAP("ESP32_TEST");
IPAddress IP = WiFi.softAPIP();
WiFi.setTxPower(WIFI_POWER_19_5dBm); // Set WiFi RF power output to highest level
dnsServer.start(53, "*", IP);
handleRoot();
handleSpecs();
handleProjects();
handleFiles();
handlePages();
handleRedirecttest();
handleFavicon();
handleHellotxt();
handleaudioWav();
handlenotFoundPages();
server.begin();
Serial.println("HTTP server started");
}
void loop(void) {
delay(100);
}
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>
#include <DNSServer.h>
DNSServer dnsServer; // Declare the UDP object
AsyncWebServer server(80);
void handleRoot() {
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
if (request->host() == "esp32.com") {
request->send(200, "text/html", "<html> <head> <link rel=\"shortcut icon\" href=\"/favicon.ico\" /> <title>ESP32 Test</title> </head> <body style=\"font-family: system-ui;\"> Hello, this is a test of the ESP32's SoftAP, running a web server! This was made with a clock of 240 MHz and a Wi-Fi RF output of +19.5 dBm. <br> More information on the ESP32: It has a dual core processor, Bluetooth (Classic and Low Energy), ESP-NOW (to communicate directly from 1 ESP32 to another without WiFi or Bluetooth) and set up with 1.2MB of programmable space and 1.5MB of file system. You can also program it via the Arduino IDE. <br> This web server is accessible any time on this network while my ESP32 is connected at esp32.com and connect to this network, ESP32-TEST. On a mobile device with mobile data access, to access this website, make sure that mobile data is off. This is one of my projects I work on sometimes, but the fact I use SoftAP and not station means I can send from anywhere, even without Wi-Fi access! <br> The favicon/icon you see on this website on the tabs bar took a while to get working, but with SPIFFS I did get it to work. Making it was simple, I just used Microsoft Paint and I typed ESP32 on a black background.<br> <br> Q&A: <br> 1. What even is this? <br> Answer: This is a web server I made for the ESP32 using the SoftAP mode and using Arduino IDE. <br> 2. How long did it take to make this? <br> Answer: I don't know, I didn't count. <br> 3. How did you get the icon working? <br> Answer: I used SPIFFS to hold the icon. <br> 4. How did you get this address? <br> I used mDNS, which only does .local websites. <br> <br> Pages: <br> / (root) (THIS PAGE) <br> /specs <br> /projects <br> /files <br> /pages <br> /redirectTest <br> <br> Files: <br> /favicon.ico (Icon) <br> /hello.txt <br> /audio.wav </body> </html>"); //Send web page
} else {
request->send(404, "text/html", "<html><head><title>Unknown DNS!</title></head><body style=\"font-family: system-ui;\"> DNS unknown! The only website on this server is esp32.com. You are on: " + request->host() + ".</body></html>");
}
});
}
void handleSpecs() {
server.on("/specs", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", "<html> <head> <link rel=\"shortcut icon\" href=\"/favicon.ico\" /> <title>ESP32 Specs</title> </head> <body style=\"font-family: system-ui;\"> <h1> ESP32 Specs </h1> <br> CPU: Xtensa LX6 microprocessor @ 240 MHz <br> RAM: 520 KB <br> ROM: 448 KB <br> Flash: 4, 8, 16 MB <br> Wireless: WiFi up to 802.11n/150Mbps, Bluetooth 4.2 or BLE, ESP-NOW <br> Wired Connectivity: Micro USB-B or USB-C <br> Wi-Fi Output level: 19.5 dBm <br> <br> Pages: <br> / (root) <br> /specs (THIS PAGE) <br> /projects <br> /files <br> /pages <br> /redirectTest <br> <br> Files: <br> /favicon.ico (Icon) <br> /hello.txt <br> /audio.wav </body> </html>"); //Send web page
});
}
void handleProjects() {
server.on("/projects", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", "<html> <head> <link rel=\"shortcut icon\" href=\"/favicon.ico\" /> <title>My projects</title> </head> <body style=\"font-family: system-ui;\"> I'm currently working on: <br> nothing currently <br> <br>Pages: <br> / (root) <br> /specs <br> /projects (THIS PAGE) <br> /files <br> /pages <br> /redirectTest <br> <br> Files: <br> /favicon.ico (Icon) <br> /hello.txt <br> /audio.wav </body> </html>"); //Send web page
});
}
void handleFiles() {
server.on("/files", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", "<html> <head> <link rel=\"shortcut icon\" href=\"/favicon.ico\" /> <title>Web server files</title> </head> <body style=\"font-family: system-ui;\"> Website files: (Click to navigate) <br> <a href=\"/favicon.ico\">favicon.ico</a> <br> <a href=\"hello.txt\">hello.txt</a> <br> <a href=\"audio.wav\">audio.wav</a> <br> <br> Pages: <br> / (root) <br> /specs <br> /projects <br> /files (THIS PAGE) <br> /pages <br> /redirectTest <br> <br> Files: <br> /favicon.ico (Icon) <br> /hello.txt <br> /audio.wav </body> </html>"); //Send web page
});
}
void handlePages() {
server.on("/pages", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", "<html> <head> <link rel=\"shortcut icon\" href=\"/favicon.ico\" /> <title>Web server pages</title> </head> <body style=\"font-family: system-ui;\"> Website pages: (Click to navigate) <br> <a href=\"/\">/</a> <br> <a href=\"/specs\">/specs</a><br> <a href=\"/projects\">/projects</a> <br> <a href=\"/files\">/files</a><br> <a href=\"/pages\">/pages</a> <br> <a href=\"/redirectTest\">/redirectTest (redirects to /pages)</a> <br> <br> Pages: <br> / (root) <br> /specs <br> /projects <br> /files <br> /pages (THIS PAGE) <br> <br> Files: <br> /favicon.ico (Icon) <br> /hello.txt <br> /audio.wav </body> </html>"); //Send web page
});
}
void handleRedirecttest() {
server.on("/redirectTest", HTTP_GET, [](AsyncWebServerRequest *request){
request->redirect("/pages"); //Send web page
});
}
void handleFavicon() {
server.on("/favicon.ico", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/favicon.ico", "image/png"); //Send web page
});
}
void handleHellotxt() {
server.on("/hello.txt", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/hello.txt", "text/raw"); //Send web page
});
}
void handleaudioWav() {
server.on("/audio.wav", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/audio.wav", "audio/x-wav"); //Send web page
});
}
void handlenotFoundPages() {
server.onNotFound([](AsyncWebServerRequest *request){
if (request->host() == "esp32.com") {
request->send(404, "text/html", "<html><head><link rel=\"shortcut icon\" href=\"/favicon.ico\" /><title> Page not found! </title> </head> <body style=\"font-family: system-ui;\"> Page not found! <br> Maybe you're looking for: <br> <a href=\"/\">/</a> <br> <a href=\"/specs\">/specs</a><br> <a href=\"/projects\">/projects</a> <br> <a href=\"/files\">/files</a><br> <a href=\"/pages\">/pages</a> <br> <a href=\"/redirectTest\">/redirectTest (redirects to /pages)</a> "); //Send web page
} else {
request->send(404, "text/html", "<html><head><title>Unknown DNS!</title></head><body style=\"font-family: system-ui;\"> DNS unknown! The only website on this server is esp32.com. You are on: " + request->host() + ".</body></html>");
}
});
}
void setup(void)
{
Serial.begin(115200);
if(!SPIFFS.begin(true)){
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
Serial.println();
Serial.println("Booting Sketch...");
WiFi.mode(WIFI_AP);
WiFi.softAP("ESP32_TEST");
IPAddress IP = WiFi.softAPIP();
WiFi.setTxPower(WIFI_POWER_19_5dBm); // Set WiFi RF power output to highest level
dnsServer.start(53, "*", IP);
handleRoot();
handleSpecs();
handleProjects();
handleFiles();
handlePages();
handleRedirecttest();
handleFavicon();
handleHellotxt();
handleaudioWav();
handlenotFoundPages();
server.begin();
Serial.println("HTTP server started");
}
void loop(void) {
delay(100);
}