Simple ESP8266 Asynchronous Web Server Example with Code

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 library is a web server library that connects client to the server asynchronously. By serving clients asynchronously multiple clients can be served simultaneously without having congestion problem with service demand. This means that load on the server when there are many clients is reduced. This is because in asynchronous connection, resources used by one client is freed when the connection is closed. So using ESPAsyncWebServer(HTTP) library which runs on top of ESPAsynchTCP libary(TCP) more than one client connection can be handled. The library uses the concept of events and handlers. Handlers are routines that are executed based on events. If any event occurs, requests are triggered, and handlers executes the routine requested. Since handlers are used that checks for event triggers, we do not need to write anything in the loop() function. The library uses template engine to render the final web HTML. The template processing engine combines the content(html, css etc) and variables using template placeholders in the client request parameters to render the final HTML web page.

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 %sn", ssid);
Serial.printf("Web Server IP address: %sn", WiFi.localIP().toString().c_str());
server.on("https://ee-diary.blogspot.com/", 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.