In this ESP8266 tutorial, we are going to show how to make a simple ESP8266 web server using ESPAsyncWebServer Library. The web server is coded to displays "hello from ESP12E WiFi Module!" on the browser when users visits the site. This simple example will help to understand how to create a ESP8266 based web server. This simple example can be easily extended to include more features and functionalities to create any kind of web based IoT(Internet of Things) application.
Here the web server is asynchronous that will be able to accept connections from the multiple clients or users and will displays ""Hello from ESP12E Module!". The html code is stored Program Flash memory of the ESP8266 using raw string literal. We will use the ESP12E module that has the ESP8266 IC chip on it and use the ESPAsyncWebServer and ESPAsyncTCP libraries to create the web server. The programming is coded and uploaded using Arduino IDE.
Prerequisites:
If you do not know how to program ESP8266 using Arduino IDE, setup ESP8266 board on Arduino see the tutorial LED Blink using ESP8266 & Arduino IDE with Video and Pictures.
Video Demo:
The following video demonstrates ESP8266 based Asynchronous Web Server.
What is ESPAsyncWebServer library?
ESPAsyncWebServer is an open-source library for the ESP8266 and ESP32 microcontrollers that enables web server functionality. It is designed to work asynchronously, which means that it can handle multiple requests simultaneously without blocking the execution of other tasks.
The library provides a simple and flexible way to implement a web server on an ESP8266 or ESP32 device, allowing you to serve HTML, CSS, JavaScript, and other web content. It supports handling GET and POST requests, and provides a number of features such as server-side includes, file uploads, and request routing.
One of the key benefits of the ESPAsyncWebServer library is that it is built on top of the AsyncTCP library, which provides a fast and efficient implementation of the TCP protocol. This enables the ESPAsyncWebServer to handle multiple connections simultaneously, while consuming minimal system resources.
Overall, the ESPAsyncWebServer library is a powerful and easy-to-use solution for implementing web server functionality on ESP8266 and ESP32 devices. It is well-documented, actively maintained, and widely used by the ESP8266 and ESP32 communities.
The ESPAsyncWebServer can be downloaded and installed from the following URL:
https://github.com/me-no-dev/ESPAsyncWebServer
Since we are using ESP12E wifi module, we need the ESPAsynchTCP libary which can be downloaded and installed from the following URL:
https://github.com/me-no-dev/ESPAsyncTCP
If you are using the ESP32 wifi module, then you need to download and install the following AyncTCP library instead of ESPAsynchTCP libary:
https://github.com/me-no-dev/AsyncTCP
The following shows ESP12E WiFi module on breadboard used in this example project.
ESP8266 Asynchronous Web Server Code
The following is a simple code example for Asynchronous Web Server with ESP8266 module that displays simple Hello from ESP12E module message.
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
const char ssid[]="SSID";
const char password[]="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() {
}1. In the above code, we have included the ESPAsyncWebServer and ESPAsynchTCP libraries to build the web server.
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
2. Then we have setup the WiFi network credentials. This should be replaced with your own WiFi SSID and PASSWORD credentials.
const char ssid[]="SSID";
const char password[]="PASSWORD";
3. We have stored our HTML code inside the program memory space as string literal. The HTML code is a basic code that just displays Hello from ESP12E Module.
const char webpage[] PROGMEM = R"=====(
<html>
<head>
<title>ESP12E Simple Web Page</title>
</head>
<body>
<p>Hello from ESP12E Module!</p>
</body>
</html>
)=====";
4. Using AsyncWebServer server(80) we have create server object with port number 80.
5. In the setup() function, we have set the baud rate of 115200 for serial communication with the ESP12E wifi module. We then print message to the user "connecting to... " ssid provided to inform progress of connection behind the scene which users can see on the Arduino IDE serial monitor. Using WiFi.mode() we have setup the ESP8266mod into Station mode. Using if(WiFi.waitForConnectResult() ) statement we check for wifi connection to Access Point(AP). If the connection fails then we print message "WiFi connection failed!Rebooting ...\n" to inform users that connection has failed and after 1 second delay restart the module. If the connection is successful, we print out message "Connected to " ssid and also print out the IP address to inform the user at which IP address it is connected to. Using the on method of object server, server.on() we create a handler that handles the HTTP request from incoming clients. Whenever there is request, we send the content of the webpage stored in the program code in 3 description above.
6. Using the server.begin() we start the asynchronous server.
The following shows the message printed on the Arduino IDE.
The following picture shows HTML web page output on the ESP8266 we server IP address(192.168.1.101).
See next ESPAsyncWebServer tutorial WiFi controlled LED using ESP8266.
