How to Create ESP32 Web Server?

In this blog, we will discuss how to create a basic ESP32 web server. Mobile phones, laptops, PCs, and tablets that are connected to the same WiFi network as ESP32 can access this ESP32 Standalone Web Server. I made a straightforward web page that clients may browse to control a few LEDs linked to an ESP32 as a web server demonstration.

A Brief Note on Web Servers

In the ESP8266 NodeMCU Web Server Project, I have already talked about web servers. Here, though, is another summary.

A web server is a hardware and software combination that manages, retrieves, and serves web pages to web clients. Web pages can contain information in a variety of formats, including text in the form of HTML documents, images, videos, and applications, among others. 

One of the most basic kinds of web clients are the Web Browsers on your laptops and mobile devices. The term “client-server communication model” is frequently used to describe the communication between a web server and a web client.

HTTP, or simply HTTP, is the protocol in charge of facilitating communication between Client and Server. In this kind of communication, the Web Client uses HTTP to request data from the server. The relevant web page is returned in response to the client’s request by the web server, which is constantly watching (listening) for a request.

The server returns an HTTP 404 Error if the requested page cannot be found.

Requirements of ESP32 Web Server

Now that we have a basic overview of web servers in general, we can better grasp what is needed for a standalone ESP32 web server. A web page in the form of HTML Text must be present on a straightforward ESP32 web server.

The ESP32 web server must deliver the requested web page when a client, such as a web browser on a mobile device, sends an HTTP request for it. Additionally, the server should react to client activities like button clicks by taking the proper countermeasures (such as turning an LED on or off).

Wi-Fi Modes of Operation of ESP32

We will examine the various Wi-Fi working modes in ESP32 before moving on to developing a Web Server for it. In essence, there are three WiFi working modes for the ESP32 Wi-Fi Module. As follows:

• Station Mode (STA)
• Soft Access Point Mode (AP)
• Station + Soft AP Mode

In station mode, the ESP32 Module connects to an existing WiFi Network, which is setup by a Wireless Router, just like our Mobile Phones and Laptops.

Using the router’s SSID and Password, the ESP32 Wi-Fi Module joins the router’s Wi-Fi network, and the router provides ESP32 with a local IP address.

In access point mode, the ESP32 Module establishes its own WiFi network similar to a wireless router so that other stations can connect to it, including mobile phones, laptops, and even other ESP32 modules (in STA Mode).

This AP Mode is known as Soft AP Mode since ESP32 lacks a Wired Ethernet connection to the internet. The SSID and Password for the network must be set while establishing the ESP32 in AP Mode so that other devices may connect to it using those credentials.

A combination of Station Mode and Soft AP Mode is known as Station + Soft AP. The ESP32 serves as both the Station and the Access Point in this scenario.

Which Mode to use for Creating Web Server?

Create a web server by configuring the ESP32 Wi-Fi Module in either station mode or access point mode. The difference is that in station mode, all devices (including mobile phones, laptops, ESP32, ESP8266, etc.) are linked to the wireless router’s WiFi network, and the router assigns an IP address to each device (including the ESP32 Web Server).

Clients can visit the Web Page using this IP Address. Additionally, the clients’ access to the internet through the Router is not lost.

However, if we build the ESP32 web server in AP mode, clients will have to join to the ESP32-provided network using its unique SSID and password in order to access the web pages. Clients cannot access the internet because it is a soft AP Mode.

Except for the ESP32 settings, creating an ESP32 Web Server in Station Mode or Soft AP Mode is fairly similar.

In this article, I’ll demonstrate how to set up an ESP32 Web Server in Station Mode (STA).

ESP32 Web Server

We will also see how this web server responds to various client requests by manipulating two LEDs linked to the GPIO Pins of the ESP32 Development Board in addition to building the web server on the ESP32 and accessing it on clients.

In order to show this, I connected two 5mm LEDs to ESP32 GPIOs 16 and 17 via corresponding current-limiting resistors (220). On the ESP32 DevKit Development Board, GPIOs 16 and 17 are designated as RX2 and TX2, respectively.

Code

We now move on to the crucial and fascinating material: the actual code for the Web Server on the ESP32. Just some text, a few buttons, and some stylization are added to an HTML code.

The whole code for the web server for the ESP32 is shown in the block after that. In order to clarify the code, I included comments.

NOTE: This code is based on ‘Arduino Web Server’ example.

	#include <WiFi.h>
	#define gpio16LEDPin 16 /* One LED connected to GPIO16 – RX2 */
	#define gpio17LEDPin 17 /* One LED connected to GPIO17 – TX2 */
	const char* ssid = “ESP32-WiFi”; /* Add your router’s SSID */
	const char* password = “12345678”; /*Add the password */
	int gpio16Value;
	int gpio17Value;
	WiFiServer espServer(80); /* Instance of WiFiServer with port number 80 */
	/* 80 is the Port Number for HTTP Web Server */
	/* A String to capture the incoming HTTP GET Request */
	String request;
	void setup()
	{
	Serial.begin(115200); /* Begin Serial Communication with 115200 Baud Rate */
	/* Configure GPIO16 and GPIO17 Pins as OUTPUTs */
	pinMode(gpio16LEDPin, OUTPUT);
	pinMode(gpio17LEDPin, OUTPUT);
	/* Set the initial values of GPIO16 and GPIO17 as LOW*/
	/* Both the LEDs are initially OFF */
	digitalWrite(gpio16LEDPin, LOW);
	digitalWrite(gpio17LEDPin, LOW);
	Serial.print(“\n”);
	Serial.print(“Connecting to: “);
	Serial.println(ssid);
	WiFi.mode(WIFI_STA); /* Configure ESP32 in STA Mode */
	WiFi.begin(ssid, password); /* Connect to Wi-Fi based on the above SSID and Password */
	while(WiFi.status() != WL_CONNECTED)
	{
	Serial.print(“*”);
	delay(100);
	}
	Serial.print(“\n”);
	Serial.print(“Connected to Wi-Fi: “);
	Serial.println(WiFi.SSID());
	delay(100);
	/* The next four lines of Code are used for assigning Static IP to ESP32 */
	/* Do this only if you know what you are doing */
	/* You have to check for free IP Addresses from your Router and */
	/* assign it to ESP32 */
	/* If you are comfortable with this step, */
	/* please un-comment the next four lines and make necessary changes */
	/* If not, leave it as it is and proceed */
	//IPAddress ip(192,168,1,6);
	//IPAddress gateway(192,168,1,1);
	//IPAddress subnet(255,255,255,0);
	//WiFi.config(ip, gateway, subnet);
	delay(2000);
	Serial.print(“\n”);
	Serial.println(“Starting ESP32 Web Server…”);
	espServer.begin(); /* Start the HTTP web Server */
	Serial.println(“ESP32 Web Server Started”);
	Serial.print(“\n”);
	Serial.print(“The URL of ESP32 Web Server is: “);
	Serial.print(“http://”);
	Serial.println(WiFi.localIP());
	Serial.print(“\n”);
	Serial.println(“Use the above URL in your Browser to access ESP32 Web Server\n”);
	}
	void loop()
	{
	WiFiClient client = espServer.available(); /* Check if a client is available */
	if(!client)
	{
	return;
	}
	Serial.println(“New Client!!!”);
	boolean currentLineIsBlank = true;
	while (client.connected())
	{
	if (client.available())
	{
	char c = client.read();
	request += c;
	Serial.write(c);
	/* if you’ve gotten to the end of the line (received a newline */
	/* character) and the line is blank, the http request has ended, */
	/* so you can send a reply */
	if (c == ‘\n’ && currentLineIsBlank)
	{
	/* Extract the URL of the request */
	/* We have four URLs. If IP Address is 192.168.1.6 (for example),
	* then URLs are:
	* 192.168.1.6/GPIO16ON
	* 192.168.1.6/GPIO16OFF
	* 192.168.1.6/GPIO17ON
	* 192.168.1.6/GPIO17OFF
	*/
	/* Based on the URL from the request, turn the LEDs ON or OFF */
	if (request.indexOf(“/GPIO16ON”) != -1)
	{
	Serial.println(“GPIO16 LED is ON”);
	digitalWrite(gpio16LEDPin, HIGH);
	gpio16Value = HIGH;
	}
	if (request.indexOf(“/GPIO16OFF”) != -1)
	{
	Serial.println(“GPIO16 LED is OFF”);
	digitalWrite(gpio16LEDPin, LOW);
	gpio16Value = LOW;
	}
	if (request.indexOf(“/GPIO17ON”) != -1)
	{
	Serial.println(“GPIO17 LED is ON”);
	digitalWrite(gpio17LEDPin, HIGH);
	gpio17Value = HIGH;
	}
	if (request.indexOf(“/GPIO17OFF”) != -1)
	{
	Serial.println(“GPIO17 LED is OFF”);
	digitalWrite(gpio17LEDPin, LOW);
	gpio17Value = LOW;
	}
	/* HTTP Response in the form of HTML Web Page */
	client.println(“HTTP/1.1 200 OK”);
	client.println(“Content-Type: text/html”);
	client.println(“Connection: close”);
	client.println(); //  IMPORTANT
	client.println(“<!DOCTYPE HTML>”);
	client.println(“<html>”);
	client.println(“<head>”);
	client.println(“<meta name=\”viewport\” content=\”width=device-width, initial-scale=1\”>”);
	client.println(“<link rel=\”icon\” href=\”data:,\”>”);
	client.println(“<style>”);
	client.println(“html { font-family: Courier New; display: inline-block; margin: 0px auto; text-align: center;}”);
	client.println(“.button {border: none; color: white; padding: 10px 20px; text-align: center;”);
	client.println(“text-decoration: none; font-size: 25px; margin: 2px; cursor: pointer;}”);
	client.println(“.button1 {background-color: #FF0000;}”);
	client.println(“.button2 {background-color: #00FF00;}”);
	client.println(“</style>”);
	client.println(“</head>”);
	client.println(“<body>”);
	client.println(“<h2>ESP32 Web Server</h2>”);
	if(gpio16Value == LOW)
	{
	client.println(“<p>GPIO16 LED Status: OFF</p>”);
	client.print(“<p><a href=\”/GPIO16ON\”><button class=\”button button1\”>Click to turn ON</button></a></p>”);
	}
	else
	{
	client.println(“<p>GPIO16 LED Status: ON</p>”);
	client.print(“<p><a href=\”/GPIO16OFF\”><button class=\”button button2\”>Click to turn OFF</button></a></p>”);
	}
	if(gpio17Value == LOW)
	{
	client.println(“<p>GPIO17 LED Status: OFF</p>”);
	client.print(“<p><a href=\”/GPIO17ON\”><button class=\”button button1\”>Click to turn ON</button></a></p>”);
	}
	else
	{
	client.println(“<p>GPIO17 LED Status: ON</p>”);
	client.print(“<p><a href=\”/GPIO17OFF\”><button class=\”button button2\”>Click to turn OFF</button></a></p>”);
	}
	client.println(“</body>”);
	client.println(“</html>”);
	break;
	}
	if(c == ‘\n’)
	{
	currentLineIsBlank = true;
	}
	else if(c != ‘\r’)
	{
	currentLineIsBlank = false;
	}
	//client.print(“\n”);
	}
	}
	delay(1);
	request = “”;
	//client.flush();
	client.stop();
	Serial.println(“Client disconnected”);
	Serial.print(“\n”);
	}

Modify and Upload Code

You must change the code in lines 6 and 7 according to your Wi-Fi network settings. These are the Wi-Fi network’s SSID and password.

const char* ssid = “ESP32-WiFi”; /* Add your router’s SSID */

const char* password = “12345678”; /*Add the password */

After making the necessary adjustments, connect everything as shown in the circuit diagram, connect the ESP32 Board to the computer, choose the appropriate COM Port for the ESP32 Board, and upload the code.

The Getting Started with ESP32 tutorial will assist you in configuring Arduino IDE if you are new to ESP32.

Open the serial monitor, and the ESP32 Module will print some crucial details including the Wi-Fi connection’s progress, the IP address, and the URL of the web server (which is essentially the IP Address of the ESP32).

Therefore, in my case, the ESP32’s IP address is 192.168.1.6.

Accessing the ESP32 Web Server from Clients

On a laptop or mobile device, launch a web browser, and enter the IP address of the ESP32. The time for truth has arrived. You ought to be able to see a straightforward web page hosted by the ESP32’s web server if all goes according to plan.

Here is an example of the Chrome Web Browser on a laptop contacting the ESP32 Web Server.

The website shows the state of the LED attached to GPIO 16 after the main header text, as seen in the image. The LED can be turned ON or OFF using the button that follows this. The same material once more for GPIO 17 (status followed by Button).

Now, if I press the first button, the LED attached to GPIO 16 will turn on, the web page’s status will be updated, and the button’s text and colour will also change.

If you look at the Serial Monitor, some important information is presented on the serial monitor each time a client tries to connect (or sends a request). In the following section, I will go into more detail regarding this information (which is actually a request from the client).

On a mobile phone, I then tried the same thing. It operates flawlessly.

NOTE: The ESP32 Module and any clients, including computers, mobile devices, etc., must be on the same network.

Conclusion

I hope all of you have become familiar about the step-by-step tutorial on how to create a Web Server using ESP32 DevKit Development Board. We MATHA ELECTRONICS will be back soon with more informative blogs soon.