ESP8266 Web Server : Working, Modes, Specifications, Interfacing, Example, Libraires & Its Applications

A web server is a software that carries web pages and other content to the browsers of users through the Internet. It uses HTTP protocols to hold requests & responses to client requests to serve the requested data or web pages. A web server is the main hub for storing and allocating websites with their related files. Once you visit any website, your browser will send a request immediately to the web server of the website. After that, this server retrieves the required files and sends them back to your browser to display the website. This article elaborates on an ESP8266 web server and its working.

What is ESP8266 Web Server?

An ESP8266 web server is a software application that can be implemented on the ESP8266 microcontroller. It uses HTTP to provide web pages to clients and communicate with network devices via HTTP. This allows the ESP8266 module to perform as a low-cost and small server to host web applications and communicate with devices over a network.

ESP8266 is a low-cost and versatile Wi-Fi microcontroller module, used widely in IoT applications. A web server is a program that provides web pages to users over the Internet via HTTP. The ESP8266 with built-in Wi-Fi can work as a web server that responds to requests from clients and sends web pages back.

How ESP8266 Web Server Work?

An ESP8266 web server works by hosting a web server application on the chip by allowing it to provide web pages and data and react to HTTP clients’ requests on a network. This can be done with an in-built Wi-Fi by allowing it to work as either an access point or a client. The ESP8266 mini-web server hosts web applications, interacting with users using web interfaces & collecting and transmitting data, potentially from connected devices or sensors.

These web servers receive HTTP requests, process them, and send back suitable responses to a client. It is a small server that allows any control unit to host web content and communicate with network devices.

Modes of Operation:

It operates in two modes, which are explained below.

Station Mode:

This mode connects to an accessible WiFi network by allowing it to work as a web server in that network. The ESP8266 in STA mode acquires an IP address using the wireless router to which it is connected. It can set up a web server to serve web pages to connected devices through the IP address on the WiFi network.

Soft Access Point Mode:

This mode creates a WiFi network by allowing different devices to directly connect to it. So ESP8266 acts as a web server for connected devices. It does not contain any interface to a wired network, unlike a WiFi router. Thus, people know this mode of operation as soft access point mode. In addition, it can connect a maximum of five stations simultaneously.

Specifications:

The ESP8266 web server specifications include the following.

• The ESP8266 works as a web server because of its built-in Wi-Fi.
• It handles HTTP requests & serves web pages.
• It has a 32-bit Tensilica Xtensa LX106 RISC processor with an 80 to 160 MHz clock speed.
• This web server has 64 KB SRAM and 4 MB Flash.
• It supports IEEE 802.11 b/g/n Wi-Fi with WPA & WPA2.
• Interfaces: I2C, SPI, and UART.
• It works as a web server by serving fixed content & handling HTTP requests.
• It creates its own Wi-Fi network to connect with other devices.
• Programming is possible with the Arduino IDE platform.

How to Send Data from ESP8266 to a Web Server?

There are many techniques available to send data to a web server from ESP8266 which include; HTTP GET & POST, and WebSockets. Here, the data can be button presses, sensor readings, or other collected data by the ESP8266.

Data Sending Methods

The data sending methods for ESP8266 to the web server include the following.

• The data in the HTTP GET method is included within the HTTP request URL.
• The data in the HTTP POST method can be sent within the HTTP request body.
• In the WebSockets method, a constant link between the ESP8266 & the web server allows for real-time transmission of data.
• A lightweight messaging protocol mainly for IoT devices in the MQTT method is frequently used through web servers.

Steps Involved in Sending Data

The steps involved in sending data include the following.

• The code must be written to read sensor data, handle button presses, or gather other data.
• Connect the ESP8266 to your network by establishing a Wi-Fi Connection:
• Utilize the ESP8266 to perform as an HTTP client & send information to the web server.
• Design a web server in the cloud or on your computer to get the data.
• For other purposes, you must process the received data on the server side to use it or store it.

How to Display Images in ESP8266 Web Server?

To display images on a web server, you can directly embed the image within your HTML code with the <img> tag, store the images in the filesystem, and serve them through a web server. For a small image, you can also consider Base64 encoding.

Directly embed the image within HTML:

The <img> tag is used with the src attribute pointing to the URL of the image, which is a path or a web address within the filesystem of ESP8266.

For instance, <img> src=”/images/my_image.jpg” alt=”My Image”> would display the image from /images/my_image.jpg. This is appropriate for already stored images online or in the file system of ESP8266.

Store Images in ESP8266’s Filesystem

The PNG/JPEG image files must be uploaded to the ESP8266’s file system using the uploader plugin of Arduino IDE.

Write code to handle requests for the image paths within your web server sketch. To serve the images, must use the ESPAsyncWebServer library. So this technique is apt to store different images in the memory of ESP8266.

Utilize Base64 Encoding for Small Images:

The small images must be converted into Base64-encoded strings.

The Base64 string is directly embedded into your HTML code with the data: image/png;base64 format, or data: image/jpeg;base64 format. So this method is right for very few images that you desire to embed directly into the HTML to avoid external requests.

ESP8266 Web Server with Arduino

An ESP8266 web server with an Arduino is shown below. The ESP8266 must be programmed to perform as a web server. After that, it is communicated via serial methods with the Arduino. This board controls external devices, whereas the ESP8266 serves as a web page to display the information, or it allows users to communicate with the system. Here, a simple ESP8266 Web Server is designed with Arduino IDE.

The required components to make a web server include ESP8266, ESP8266 WiFi module, LD1117 3.3V linear voltage regulator, Arduino Uno board, and jumper wires. Design a circuit according to the ESP8266 programming with Arduino Uno.

Code

The required code for this interfacing includes the following.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
ESP8266WebServer server(80);
const char* ssid = “WiFi_SSID”; //Enter Wi-Fi SSID
const char* password = “WiFi_Password”; //Enter Wi-Fi Password
void setup() {
Serial.begin(115200); //Begin Serial at 115200 Baud
WiFi.begin(ssid, password); //Connect to the WiFi network
while (WiFi.status() != WL_CONNECTED) { //Wait for connection
delay(500);
Serial.println(“Waiting to connect…”);
}
Serial.print(“IP address: “);
Serial.println(WiFi.localIP()); //Print the local IP
server.on(“/”, handle_index); //Handle Index page
server.begin(); //Start the server
Serial.println(“Server listening”);
}
void loop() {
server.handleClient(); //Handling of incoming client requests
}
void handle_index() {
//Print Hello at opening the homepage
server.send(200, “text/plain”, “Hello! This is an index page.”);
}

The above code is used to create the web server. First, the server is initialized at port 80 & two constants for Wi-Fi SSID & Password. The serial started in setup at a 115200 baud rate to ensure the ESP8266 status. Wi-Fi starts connecting with SSID & Password, and it waits until it connects to the Wi-Fi. Print the Local IP on the Serial monitor to utilize that address like the Web server address. This index page can be seen in the code as the server.on & server. Send. And finally, start the Server. The server.handleClient() in the loop is used to handle incoming client requests.

Once the circuit is connected, upload the above code to the ESP8266. After that, make changes to the SSID & Password within the code. Thus, upload the code into the ESP8266 with Arduino IDE. Finally, open the Serial monitor IP within your browser once the Serial monitor displays as a server listening.

Example

An ESP8266 web server example involves the microcontroller programming by connecting with a Wi-Fi network to serve a webpage. So this controls the functions of ESP8266 from a web browser, like turning ON/OFF LEDs. The web server is accessed by typing the IP address of the ESP8266 into a browser. This process is broken down into the following steps.

Setting up the ESP8266

The ESP8266 connects to a Wi-Fi network. It allocates an IP address to access the web server once connected. Typically, developers use the Arduino IDE with the ESP8266 core to write and upload code to the ESP8266.

Web Server Creation

The ESP8266 uses its built-in HTTP server library to handle web requests. To do that, you need to create an HTML file to display the web page, which you frequently embed directly into the ESP8266 code. This web page includes buttons and different interactive elements. Once they clicked, they sent commands to the ESP8266 to achieve actions like controlling LEDs.

Example Code

void handleRoot()
{
client.println(“HTTP/1.1 200 OK”);
client.println(“Content-type: text/html”);
client.println(“Connection: close”);
client.println();
client.print(“<!DOCTYPE html><html lang=’en’><head><meta charset=’UTF-8′><title>ESP8266 Web Server</title></head><body>”);
client.print(“<h1>ESP8266 Web Server</h1>”);
client.print(“</body></html>”);
}

Web Server Accessing

You open a web browser to enter the IP address of the ESP8266, which loads the ESP8266 web page and allows you to communicate with it.

LEDs Controlling

Whenever a user clicks buttons on the web page, they send commands to the ESP8266 to turn ON/OFF an LED connected to a GPIO pin. So the ESP8266 receives these commands, changes the state of GPIO pins to update the web page, consequently.

ESP8266 Web Server Library

This is the core library that creates a web server with the Arduino IDE on an ESP8266. So this library shortens the HTTP requests & responses handling process. It allows you to create a web server to serve fixed content or communicate with a device.

Libraries

The main libraries for the ESP8266 web server are discussed below.

ESP8266WebServer:

It is the main library that creates and handles the web server. So this library handles HTTP request parsing and response handling to provide different methods to transmit required data to the client.

ESP8266WiFi:

ESP8266WiFi library is necessary to configure the WiFi connection of ESP8266, like a network connection, an access point setting & handling WiFi settings.

SPIFFS

The SPIFFS library is optional, but if you wish to store files on the flash memory of ESP8266, then the SPIFFS library is helpful. This library enables users to upload files to the ESP8266 and then access them from the web server.

Async TCP

This library is more robust and used with the ESPAsyncWebServer library to handle various concurrent clients.

To utilize web server libraries, first need to install the necessary libraries and incorporate them within your Arduino sketch. After that, create a server object and configure the server to manage requests & begin the server. Thus, ESP8266 needs to be connected to a Wi-Fi network to discover its IP address. After that, the web browser must be open and the IP address of the ESP8266 to access the web server.

Advantages & Disadvantages

The advantages of the ESP8266 web server include the following.

• These servers are small, affordable, and work as separate web servers with minimum hardware.
• These are cost-effective.
• The ESP8266 works completely as a functional web server by allowing data access and control from the browser.
• It can be directly connected to the internet without additional peripherals or shields.
• It handles several client requests concurrently by improving its performance.
• These web servers provide remote control over devices and also display sensor data through a web interface.

The disadvantages of the ESP8266 web server include the following.

• Its processing power is limited.
• It has limited RAM while dealing with large web pages.
• This server has a single-core architecture.
• It can be susceptible to attacks if not correctly protected.
• Performance problems can occur with large web pages.
• Limitations of the TCP/IP stack
• The single-core operation executes only a single task at a time.

Applications

The applications of the ESP8266 web server include the following.

• This web server controls industrial equipment and building home automation systems.
• It creates interactive web pages, controls devices remotely, and displays sensor readings.
• The ESP8266 applications particularly involve home automation and the realm of IoT.
• These web servers control LEDs, actuators, displays, sensor data, devices, remote control, etc..
• In home automation and IoT applications, web servers perform remote monitoring, custom IoT device building, and data logging & publishing.
• Other applications mainly involve weather forecasters, DIY Amazon dash button clone creation, SPIFFS for web content storing, WebSockets in real-time communication, etc.

Developers particularly use the versatile and powerful ESP8266 web server software in home automation and IoT projects. This web server’s ability is to make both access point & station mode web servers by providing flexibility within network setups. Here is a question for you: What is ESP8266?