In this tutorial, we will guide you on how to set up a simple web server using the ESP8266, specifically the ESP12E WiFi module, with the ESPAsyncWebServer library. The web server will display the message "Hello from ESP12E WiFi Module!" when accessed through a browser. This beginner-friendly example is perfect for understanding how to build an ESP8266-based web server and can easily be expanded for more complex IoT (Internet of Things) applications.
Introduction to ESP8266 Asynchronous Web Server
The ESP8266 is a low-cost WiFi module commonly used in various IoT projects. In this example, we use the ESPAsyncWebServer library to create an asynchronous web server. Unlike synchronous servers, an asynchronous server can handle multiple client requests simultaneously without blocking the execution of other tasks. This makes the ESP8266 ideal for serving web content and handling IoT interactions in real-time.
The ESPAsyncWebServer library, combined with the ESPAsyncTCP library, enables fast and efficient handling of HTTP requests. This setup provides the foundation for creating a scalable web server for IoT projects.
Prerequisites
Before you begin, ensure that you have set up the ESP8266 board in the Arduino IDE. If you're new to programming the ESP8266 using Arduino IDE, we recommend starting with the LED Blink tutorial for ESP8266.
What is the ESPAsyncWebServer Library?
The ESPAsyncWebServer is an open-source library designed to enable web server functionality on ESP8266 and ESP32 microcontrollers. It works asynchronously, allowing the server to handle multiple connections at once, which enhances the responsiveness and efficiency of the system.
Some key features of the ESPAsyncWebServer library:
- Supports both GET and POST HTTP methods
- Handles static content like HTML, CSS, and JavaScript files
- Efficient handling of multiple client connections using the AsyncTCP library
- Supports features like server-side includes, file uploads, and request routing
To download and install the library, visit the official repository:
ESPAsyncWebServer on GitHub
If you're using the ESP12E WiFi module, you’ll also need to install the ESPAsyncTCP library from:
ESPAsyncTCP on GitHub
For ESP32 users, you will need the AsyncTCP library instead:
AsyncTCP on GitHub
Building the ESP8266 Web Server
In this section, we'll walk through the code required to create a simple web server that responds with the message "Hello from ESP12E WiFi Module!" when the page is accessed.
ESP8266 Asynchronous Web Server Code
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
const char ssid[] = "SSID"; // Your WiFi SSID
const char password[] = "PASSWORD"; // Your WiFi Password
const char webpage[] PROGMEM = R"=====(
<html>
<head>
<title>ESP12E Simple Web Page</title>
</head>
<body>
<p>Hello from ESP12E Module!</p>
</body>
</html>
)=====";
AsyncWebServer server(80);
void setup() {
Serial.begin(115200);
delay(2000);
Serial.printf("Connecting to %s....\n", ssid);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
if(WiFi.waitForConnectResult() != WL_CONNECTED) {
Serial.printf("WiFi connection failed! Rebooting...\n");
delay(1000);
ESP.restart();
}
Serial.printf("Connected to %s\n", ssid);
Serial.printf("Web Server IP address: %s\n", WiFi.localIP().toString().c_str());
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", webpage);
});
server.begin();
}
void loop() {
// Nothing to do here as server operates asynchronously
}
Code Breakdown
ESPAsyncTCP and ESPAsyncWebServer libraries, which are essential for creating the asynchronous server.#include <ESPAsyncWebServer.h>
You need to replace
"SSID" and "PASSWORD" with your WiFi network credentials to establish a connection.const char password[] = "PASSWORD"; // Your WiFi Password
The HTML content is stored in the program memory (PROGMEM), ensuring the web page is served directly from the ESP8266’s memory. This simple HTML page displays a message.
<html>
<head>
<title>ESP12E Simple Web Page</title>
</head>
<body>
<p>Hello from ESP12E Module!</p>
</body>
</html>
)=====";
We create an object of the
AsyncWebServer class that listens on port 80, the default port for HTTP servers.Inside the
setup() function, we initialize the serial communication and attempt to connect the ESP8266 to the WiFi network. If the connection fails, the ESP8266 will reboot.WiFi.begin(ssid, password);
The
server.on() method listens for incoming HTTP GET requests on the root URL ("/"). When a request is received, the server sends the webpage content stored in program memory.request->send_P(200, "text/html", webpage);
});
Finally, we start the asynchronous server using
server.begin().Output
Once the ESP8266 is connected to your WiFi, open a web browser and navigate to the IP address displayed in the Serial Monitor. You will see the simple HTML page with the message:
"Hello from ESP12E Module!"
Debugging and Viewing in the Serial Monitor
When you upload the code to your ESP8266 and open the Serial Monitor, you will see status messages such as:
Connecting to <SSID>....
Connected to <SSID>
Web Server IP address: 192.168.1.101
Video Demo:
Check out the video demo below to see the ESP8266-based Asynchronous Web Server in action.
Conclusion
In this tutorial, you learned how to set up a simple asynchronous web server on the ESP8266 using the ESPAsyncWebServer library. You now have the foundation to build more advanced web-based IoT applications, such as controlling devices or displaying sensor data on a web page.
Next, explore more by adding features like controlling LEDs, sending sensor data, or building interactive IoT dashboards.
Stay tuned for the next tutorial where we will show you how to control an LED over WiFi using the ESP8266 and the ESPAsyncWebServer library!
