ESP32 as a Webserver

Hey, I hope you are doing great. I hope the journey with the ESP32 is going well. In the last lecture, we saw the ESP32 Bluetooth low energy (BLE) example in the Arduino IDE. Today, we are moving towards the use of ESP32 as a web server. This microcontroller has versatile features, making it one of the best experts' choices. One of its applications is using it as a web server. The ESP family is known for its energy consumption and, therefore, is a perfect choice to connect different clients together. 

The BLE was used to connect the devices near each other but the ESP32 can connect a relatively large network together. In this tutorial, you will see how to use the ESP32 to connect the devices on a large scale. It has a specific IP address that will allow it to create a large network over the internet. We will use the local internet connection of the user and create a network of devices to be controlled with the help of ESP32. We will start with the basic information and understand the features in detail. After that, the practical implementation of the application will be shown to you. For now, we are using the most basic example but this can be extended to different devices and for the creation of a large network. Let’s start learning together.

Get Instant PCB Online Quote

Introduction to a Web Server

The internet deals with a tremendous number of websites and web pages. The information on the websites is saved and handled by a web server. Hence, the web server’s basic role is to handle (server) the web pages of the website. Here, it must be clear that a web page can be a simple HTML file or a complex combination of different resources. It may be defined as:

“A web server is the piece of software or hardware that works on the user’s request and can store, process, or deliver the pages demanded by the users.”

The internet we use to get pages and information uses web servers to get the information all around the world wide web (www). There are different types of terms that we will use in this tutorial, so let’s find out the basic introduction of these terms:

Internet

The Internet is a large and complex network of websites all around the world. The web servers work with the help of the internet to fetch information from web pages. The users have to connect to the internet to access the information from the web server and websites.

HTTP in a Web Server

The communication between the server and pages is done using different types of protocols and one of these is the hypertext transfer protocol (HTTP). It is used between the web server and web browser and is responsible for different functions, such as:

• How are the requests for web pages formatted?
• How are the requests initiated and sent?
• How does the web server have to respond to the requests?
• How is the data delivered to the page?

In short, the HTPP decides the workings and responses of the web server to the pages.

Client Server Architecture

The web servers use the client-server architecture to perform their duties. The web server has the information stored in it. The component of the network that asks for the information from the server is called the client. Hence, the client requests the information (any web page) from the server and the server sends the information. This way of working is called client-server architecture.

File Transfer Protocol in Webserver

The web servers use file transfer protocols to allow users to download the information from the page. There are different types of protocols for this but usually, HTTP or FTP (file transfer protocol) are used with the web servers.

ESP32 as a Web Server

The ESP32 is one of the most popular microcontrollers that has an impact on the trends in the market. The ESP32 has multiple features to do so but one of the most important among these is that it can be used as a server. The users can save their files in ESP32 and the client can fetch this information. This is one of the ways to use the ESP32 for wireless communication. Features like a web server and BLE make the ESP32 a perfect choice for applications like Internet of Things (IoT) projects. The information in the ESP32 can be accessed by different devices connected to it. In this way, it acts as the heart of the network of devices.

Why is the ESP32 an Ideal Choice for a Web Server?

There are different characteristics of ESP32 that make it the best choice to use as a web server. Here are some of these:

IEEE Standards in ESP32

Most of the devices used to connect through microcontrollers are made to IEEE standards. Therefore, ESP32 is designed to meet these standards. Some of the important points in this regard are:

• The IEEE 802.11 standard defines the WiFi communication protocols between the devices. The ESP32 follows this protocol and is one of the most powerful microcontrollers when it comes to wireless communication through WiFi. For this, it supports two WiFi bands:
  • 2.4 GHz WiFi band
  • 5.0 GHz Wi-Fi band
• For low-power wireless communication, ESP32 follows the IEEE 802.15.4 standards. The BLE feature of this microcontroller follows this standard and the combination of the ESP32 as a server and the BLE makes it the best choice for a large network with different devices.

• The ESP32 has the feature of in-circuit programming and for this, it follows IEEE 1149.6-2013. It allows for better programming and debugging without the need for a bootloader.
• The IEEE has the TCP/IP protocol for wireless communication and ESP32 follows this suit. In this way, it is successfully and safely connected with the other devices in the network. Similarly, HTTP (as we discussed before) allows it to act as the web page host.
• The MQQT protocol is responsible for receiving and subscribing to the messages. ESP32 follows it; therefore, it can work on the IoT project more effectively.

Dual Processor of ESP32

The ESP32 has a dual processor, which helps it perform better as compared to a single-processor webserver. This feature makes it ideal for projects like IoT and other networks where a large number of devices are connected together and the ESP32 has to listen to all the incoming requests simultaneously. Following are some reasons to justify this:

• It is obvious that a dual processor has double processing power because two processors are working in tandem. This provides a fast speed of tasks and improved performance for the compute-intensive applications.

• For real-time applications, latency is one of the most important factors. It is the time taken to get the request, work on it, and provide the response according to it. The lower the latency, the better the performance of the device. In the event that ESP32 is working as the server, the latency is important because the response of one device is the input of the other and the system works like this.
• The fault tolerance in ESP32 is great as a server. It is because when one processor fails to work in a condition or is busy dealing with glitches and errors, the second processor is on duty to perform other tasks; therefore, the working of the system does not stop.

Server Libraries of ESP32

The ESP32 has multiple libraries that help it perform better as a server. These have the functionality and tools to optimize performance and provide additional features. Here are some basic and important libraries for ESP32:

• The WiFiManager library simplifies the working of the ESP32 and allows it to connect with other devices and perform wireless communication.
• The AsyncTCP library allows the ESP32 to perform asynchronous TCP/IP communication. The ESP32 can handle multiple TCP connections without blocking the main loop. Hence, the ESP32 is a responsive device that can handle multiple devices concurrently.

• SPIFFS is another important library that provides a better user experience. The users can read, write, manage, store, and work on the files through the server.
• Blyke is an advanced library used with the ESP32. It provides the GUI for the working and the user can see other devices and information on the screen.

Other features of the ESP32, such as web sockets, WiFi direct, security protocols, etc., make it a great choice to use as a server.

Free Components Worldwide Shipping

ESP32 Example as Server in Arduino IDE

There are multiple ways to use the ESP32 as a server but one of the most common is to use the Arduino IDE. It is beginner-friendly software designed for Arduino boards but is extensively used for ESP32 boards. A large community is using the Arduino IDE for this task because it has the best compatibility, esp32 board support, a large community, is easy to use and understand, and has some other features that help the user get the result with little effort. Here is a project where we are using the ESP32 as a server.

Project Description of ESP32 as Server

Here is a little description of the project that will help you understand the steps we will perform in the next section:

• The project is about to control the LEDs through ESP32. Here, we are using two LEDs:
  • A built-in LED on the ESP32
  • An external LED is connected to the ESP32 through the breadboard.
• The ESP32 releases the IP address to provide the web page to the user.
•  The authentic user has control of this webpage and he/she can decide the status of the LEDs through the buttons.
• The user sends the command to control the LED at a distance from it. The request is sent to the ESP32, where it is saved and processed and then the ESP32 works according to the requirements of the user and the output of the pins changes accordingly.
• As a result, the user can control the LEDs from a distance with the help of a WiFi connection.
• Every time, when the user wants a change in the state of LEDs, he clicks on the respective button. This request is sent to the ESP32 and it makes the changes according to the user’s order.
• The address on the browser is important in this regard and once you start observing the changes, you will understand the difference.

Material Required

• ESP32
• Connecting wires
• Breadboard
• Resistor
• LED
• Arduino IDE
• Internet connection
• Device (Laptop or mobile)

Creating Hardware Connection for ESP32

• Get a breadboard and connect the ESP32 to it.
• Connect the resistors and LED with the help of connected wires, as given in the next image:

As you can see, the ESP32 is connected in such a way that the USB cable can be connected easily to it.

Code to Use ESP32 as Server

#include 

#include 

const char *ssid = "SSID";

const char *password = "Password";

const int builtInLedPin = 2;  // Assigning pin for built-in LED

const int externalLedPin = 4;  // Assigning pin for external LED

AsyncWebServer server(80);

void setup() {

  Serial.begin(115200);

  // Connect to WiFi

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {

    delay(1000);

    Serial.println("Connecting to WiFi...");

  }

  Serial.println(" Successfully Connected to WiFi");

  Serial.print(" Your IP Address: ");

  Serial.println(WiFi.localIP());

  // Setting LED pins as outputs to use later

  pinMode(builtInLedPin, OUTPUT);

  pinMode(externalLedPin, OUTPUT);

  // Defining routes and handling functions

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

    String html = ";

    html += "Hello,ESP32!";

    html += "HelloBuilt-in LED:"NO" "OFF"";

    html += "External LED:"NO" "OFF"";

    html += "";

    request->send(200, "text/html", html);

  });

//Turning the built-in LED on

  server.on("/builtinLed/on", HTTP_GET, [](AsyncWebServerRequest *request){

    digitalWrite(builtInLedPin, HIGH);

    request->send(200, "text/plain", "Built-in LED turned on");

  });

// Turning the built-in LED off

  server.on("/builtinLed/off", HTTP_GET, [](AsyncWebServerRequest *request){

    digitalWrite(builtInLedPin, LOW);

    request->send(200, "text/plain", "Built-in LED turned off");

  });

//Turning the external LED on

  server.on("/externalLed/on", HTTP_GET, [](AsyncWebServerRequest *request){

    digitalWrite(externalLedPin, HIGH);

    request->send(200, "text/plain", "External LED turned on");

  });

// Turning the built-in LED off

  server.on("/externalLed/off", HTTP_GET, [](AsyncWebServerRequest *request){

    digitalWrite(externalLedPin, LOW);

    request->send(200, "text/plain", "Externally connected LED turned off");

  });

  // Start server to perform the task

  server.begin();

}

void loop() {

  //Write any looping content if required

}

ESP32 as Server in Arduino IDE

Now, let us move towards practically implementing all the information we have been discussing in this tutorial. Follow the steps given next to get the perfect output:

• Open your Arduino IDE.
• Create a new sketch and remove its current code.

• Connect the ESP32 to the system through a cable.
• Paste the code in the Arduino IDE that is given in the above section.
• Make sure you have chosen the right board and port. In my case, I have selected the Node32s and port 6.
• In lines 4 and 5, where the SSID and password are present in the string, paste the credentials of the network through which you want to create the server.

• Click on the verify button and wait for the loading to complete.
• There are chances that it may require additional libraries because we have used the ESPAsyncWebServer and WiFi. If these are not present in the Arduino IDE by default, you can install them through the library panel.
• If there are no errors, click on the upload button to move forward.

• Once the compilation process is complete, press the boot button on the ESP32 to load the code into the microcontroller.
• Wait for the loading to complete 100%.

• If the loading is completed successfully, go to the serial monitor by clicking on this icon.

• At the start, the monitor will look empty. Click on the EN button in ESP32 to start the server.
• The screen will show the different loading options mentioned in the code and provide the step by step information.
• When the connection is created and the server starts, it will provide the IP address on the serial monitor. Copy this address.

• Go to the browser connected to the same network as the ESP32 and paste the IP address there.
• It will show you the buttons to control the LEDs with the ESP32.

• Click the button to get the result. When the built-in LED is turned on, the result on the ESP32 must be like this:
  
• Similarly, if the user clicks on the ‘ON’ button of the External LED, the LED will be turned on:

The address pasted on the browser is important here because every time the user wants a change on the web page, he/she has to paste the right address on the browser. The only difference between these is the status of the light on the address.

Get Free PCB Assembly

Hence, in this way, we have used the ESP32 as a server and then controlled the LEDs through it. In this tutorial, we have seen the basic introduction of ESP32 as a server. We understood why it was the best microcontroller for this project. We saw its features and settings to be used as the server. After that, we moved on to the step-by-step experiment, where we implemented the code in the Arduino IDE to use the ESP32 as a server. We created the software and hardware part and in the end, we learned the functionalities. This is the basic code and hardware part and you can extend it once you understand the workings of the system. For instance, the control of more than one LED is possible and users can attach the sensors to the ESP32 to get information through the network. In this way, the information from one device may become the input of the other device and all together, the network can work successfully. There may be changes in the code such as the HTML part having to be edited and some additional libraries being required for the work. I hope your project is completed well but if you have any questions, you can ask in the comment section.

You may also be interested in...

- ESP32 BLE(Bluetooth Low Energy) Control in Arduino IDE

- Home Automation System Using ESP32

- Free Worldwide Shipping on Over 600,000 Electronics Components with HQ Online

- Free PCB Assembly Offer is Now Live: Experience Reliable PCB Assembly from HQ NextPCB

- HQ NextPCB Introduces New PCB Gerber Viewer: HQDFM Online Lite Edition