A Brief Note on Web Servers
I have already discussed about Web Servers in ESP8266 NodeMCU Web Server Project. But here is an overview once again. A Web Server is combination of Hardware and Software which is responsible for maintaining, fetching and serving web pages to Web Clients. The information in the web pages can be in any format like Text in the form of HTML Documents, Images, Video, Applications etc.[ESP32 Projects for Beginners] Speaking of Web Clients, the Web Browsers in your laptops and mobile phones are one of the simplest types of web clients. The communication between a Web Server and a Web Client is often referred to as Client – Server Communication Model.
Hyper Text Transfer Protocol or simply HTTP is the protocol responsible for communication between Client and Server. In this type of communication, the Web Client makes a request for information from the server using HTTP. The Web Server, which is always waiting (listening) for a request, responds to the client’s request with appropriate web page. If the requested page is not found, then the server responds with HTTP 404 Error.
Requirements of ESP32 Web Server
With the brief introduction of Web Servers in general, we will now understand what are the requirement of a standalone ESP32 Web Server. A simple ESP32 Web Server must contain a web page in the form of HTML Text.
When a client, like a web browser in a mobile phone, sends a request for that web page over HTTP, the web server in ESP32 must respond with the web page. Additionally, when the client performs any operations, like clicking on a button, the server should respond with appropriate actions (like turning ON / OFF an LED).
Wi-Fi Modes of Operation of ESP32
Before proceeding with creating a Web Server for ESP32, we will take a look at the different operating modes of Wi-Fi in ESP32. Basically, the ESP32 Wi-Fi Module operates in three WiFi operating modes. They are:
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. The ESP32 Wi-Fi Module connects to a Wi-Fi Network of Router using the router’s SSID and Password and the router assigns the local IP Address for ESP32.
Coming to Access Point Mode, the ESP32 Module creates its own WiFi Network like a Wireless Router, so that other stations like Mobile Phones, Laptops and even other ESP32 modules (in STA Mode) can connect to that network. Since ESP32 doesn’t have a Wired Ethernet connectivity to internet, this AP Mode is called as Soft AP Mode. While configuring ESP32 in AP Mode, you have to set the SSID and Password for the network, so that other devices can connect to that network using those credentials.
Station + Soft AP is a combination of Station Mode and Soft AP Mode. In this, the ESP32 acts as both the Station as well as an Access Point.
Which Mode to use for Creating Web Server?
You can configure ESP32 Wi-Fi Module either in Station Mode or in Access point Mode to create a web server. The difference is that in station mode, all the devices (Mobiles, laptops, ESP32, ESP8266, etc.) are connected to Wireless Router’s WiFi Network and IP Address to all the devices (including the Web Server of ESP32) is assigned by the router. Using this IP Address, clients can access the Web Page. Additionally, the clients do not lose internet connectivity from the Router. But if we create Web Server for ESP32 in AP Mode, then clients must connect to the network provided by ESP32 using its own SSID and Password in order to access the Web Pages. Since it is a soft AP Mode, clients do not have internet connectivity. Creating ESP32 Web Server either in Station Mode or in Soft AP Mode is very similar except the configuration part of the ESP32. In this tutorial, I will show you how to create a Web Server on ESP32 configured in Station Mode (STA).
ESP32 Web Server
Apart from creating the web server on ESP32 and accessing it on clients, we will also see how this web server responds to different requests for clients by controlling two LEDs connected to GPIO Pins of ESP32 Development Board. To demonstrate this, I connected two 5mm LEDs to GPIO 16 and GPIO 17 of ESP32 through respective current limiting resistors (220Ω). GPIO 16 is labelled RX2 and GPIO 17 is labelled TX2 on ESP32 DevKit Development Board.
Code
Coming to the important and interesting stuff, the actual code for Web Server on ESP32. It is just an HTML Code with some text, couple of buttons and some stylization. The following block shows the complete code for ESP32’s Web Server. I commented the code in order to explain the code. NOTE: This code is based on ‘Arduino Web Server’ example.
Modify and Upload Code
In lines 6 and 7 of above code, you have to make the modifications as per your Wi-Fi Network Settings. These are the SSID and Password of the Wi-Fi Network. After making necessary modifications, make the necessary connections as per the circuit diagram, connect the ESP32 Board to the computer, select the ESP32 Board and also the right COM Port and upload the code. If you are new to ESP32, then the Getting Started with ESP32 tutorial will help you in configuring Arduino IDE. Open the Serial Monitor and ESP32 Module will print some important information like the progress of Wi-Fi Connection, IP Address and URL of Web Server (which is essentially the IP Address of the ESP32).
So, in my case the IP Address of ESP32 is 192.168.1.6.
Accessing the ESP32 Web Server from Clients
Open a Web Browser either in a laptop or mobile phone and type the IP Address of ESP32. This is the moment of truth. If everything goes well, then you should be able to see a simple web page hosted by the ESP32’s Web Server. The following is a screenshot of Chrome Web Browser on a laptop accessing the Web Server of ESP32.
As you can see from the image, the web page displays a main header text, followed by status of the LED connected to GPIO 16. This is followed by a Button, which can be used to turn ON or OFF the LED. The same stuff again for GPIO 17 (status followed by Button). Now, if I click on the first button, the LED connected to GPIO 16 will turn ON, the status is updated in the web page, the text and color of the Button is also changed.
If you take a look at the Serial Monitor, every time a client tries to connect (or send a request), some key information is printed on the serial monitor. I will explain about this information (this is actually a part of request from client) in the next section.
Next, I tried the same thing on a Mobile Phone. It works perfectly.
NOTE: All the clients i.e., mobiles, laptops, etc., must be connected to the same network as the ESP32 Module.
Conclusion
A complete step-by-step tutorial on how to create a Web Server using ESP32 DevKit Development Board. You learned some important basics about web servers, different modes of operation of ESP32 WiFi, how to build ESP32 Web Server and how to access this server from different clients. So, the server is only responding to the most recent connection of the two. How can it be set up to respond to one, while a session is open on the other? What is the problem Comment * Name * Email * Website
Δ
