Welcome to mini-series of blogs about WiFi communication using ESP32 microprocessors in micropython. In this series, I will try to explain how to use WiFi built-in ESP32 MCU. The second blog in the series introduces you to creating web servers on ESP32.
Quick summary
In this blog, you will learn how to set up a web server on ESP32 using micropython and picoweb library. I will try to explain how to create some HTML web pages and how to send and receive data using this server. On the WizzDev repository, I’ve created an example of the program repository – you can check it out here [https://github.com/wizzdev-pl/esp32_examples]. Before we start working with our web server we need to configure the ESP32 WiFi access point. To do so, You can use our step-by-step instruction from the previous blog here [https://wizzdev.pl/blog/esp32-wifi-communication-in-micropython-part-1/].
Creating a web server
The first step of creating a web server is to configure the ESP32 access point. Secondly, we need to create our instance of the server. All required functionality can be found in module picoweb. You need to specify the port number and host address, for example, you can use port 80 and host 0.0.0.0. These values are considered the default for most applications.
Basic routing
Now we need to add some routing to our server. Picoweb is inspired by flask, you can add routing with the decorator.
Each routing handle has 2 parameters. The first one is called “request” in which you can find the text with a request. The second one, “response”, is a handler where you can write your response.
Sending a basic response
The basic functionality of every server is to respond to requests. Since most of the communication is done by sending JSON formatted text it is important to know that there is a simplified JSON module named uJSON. If you want to send a response in a route handler you need to use “awrite” from response handler:
Sending files
Another basic task of the web application is to send files with HTML pages, graphics, and any other file you want to store in your ESP32. To send a file you use a “sendFile” method from the response handler
Receiving data
Another basic requirement for a web server is to receive data for your application to use. This task is pretty simple and requires you to parse the request body.
Explaining the example
This topic is too complex to understand it by just reading a text, that why we’ve created an example with a basic web server. You can find it on WizzDev GitHub [https://github.com/wizzdev-pl/], where is an instruction on how to upload it to your ESP.
To check this example you need to connect the access point to the ESP and use a web browser to call each of the requests. The default address to connect to the ESP is 192.168.4.1.
After a quick introduction of how to use the example, let me explain what happens when you run it. The first step begins when the program starts. It configures a WiFi access point and then it starts a web server.
There are few requests that this webserver handles. Let’s start with a basic request which connects you to the device by calling without any request. This operation redirects your web browser to call“/web_pages/index.html”. Any request that starts with “/web_pages/resource_name” sends resources from “/web_server/web_pages/” directory with resource_name. You can see this behavior when you load the index.html page because it requests a logo from the ESP.
You can see 2 more requests handled by the server when you access the setup page. The first one is “/name”. This call provides a device name that is put after the “Device name:” on the web page after receiving the request. The second request is called “/config”. It sends the WiFi SSID and password to the device after clicking the “Submit” button.
Conclusion
I hope this blog will help you understand how to create your own web server. It might look complicated at first but each of the components is pretty easy to use and together they allow you to create complex web applications. We’re planning to release another blog about uploading data to AWS IoT from the ESP device in the future, so stay tuned.
