ESP32 - HTTP Request

ESP32 can play a role as a web client to make HTTP to a web server. Web Server can be a website, Web API or REST API, Web service ...

In this tutorial, we are going to learn:

Hardware Required

1×ESP-WROOM-32 Dev Module
1×Micro USB Cable
Please note: These are affiliate links. If you buy the components through these links, We may get a commission at no extra cost to you. We appreciate it.

Basic Knowledge of Web Client and Web Server

When you access a website from your PC or smartphone, you just type the web address (URL) on a web browser, waits for a second, and then the webpage is displayed on your PC/smartphone. You do not know what your PC/smartphone does behind the screen. So, what happens behind the screen:

  1. Your PC/smartphone (as a web client) makes an HTTP request to a web server
  2. The web server returns an HTTP response to your PC/smartphone
  3. Your PC/smartphone receives the HTTP response and visualizes HTTP response on your screen

In this tutorial, We will make ESP32 become a web client to do something similar to your PC/smartphone.

Web Address (URL)

An URL includes two parts: hostname and pathname. The hostname can be replaced by the IP address of the web server. For example: example.com/test

In HTTP GET request, URL can includes the query string. For example: example.com/test?temperature=20&humidity=70.

Query String

The query string is a set of name-value pairs, which are included in HTTP request to send data from web client to web server.

The name and value is separated by "=" character. The name-value pairs are separated by "&" character.

For example: temperature=26&humidity=70&state=2

HTTP Request

The HTTP request is composed of:

  • HTTP request header
  • (Optional) HTTP request body

HTTP request header and HTTP request body is seperated by two pair of a carriage return character (ASCII 13, or '\r') and a newline character (ASCII 10, or '\n').

There are many request method. Among them, there are two popular methods: GET and POST.

Usually, we use GET method when we want to get data from web server, and use POST method to send data to web server. However, GET method can be used for either get and send data from/to webserver

Prerequisite

We need to determine the following values:

  • Web Address (URL)
  • Request method (POST or GET)
  • HTTP port that web server uses (most of web server uses port 80 for HTTP)
  • (Optional) Data to be sent to web server (query string). In this tutorial, we suppose that we send temperature and humidity to a web server with format ?temperature={t-value}&humidity={h-value}.

Web Address (URL) is splitted into hostname and pathname

How to Make an HTTP Request

  • Declare request method, HTTP port, hostname, pathname, query string
int HTTP_PORT = 80; String HTTP_METHOD = "GET"; // or "POST" char HOST_NAME[] = "example.phpoc.com"; // hostname of web server: String PATH_NAME = "";
  • Declare a web client object
  • Connect to web server
if(client.connect(HOST_NAME, HTTP_PORT)) { Serial.println("Connected to server"); } else { Serial.println("connection failed"); }
  • If connected to server, send HTTP request
// send HTTP request header client.println(HTTP_METHOD + " " + PATH_NAME + " HTTP/1.1"); client.println("Host: " + String(HOST_NAME)); client.println("Connection: close"); client.println(); // end HTTP request header
  • Read the response data from web server
while(client.available()) { // read an incoming byte from the server and print them to serial monitor: char c = client.read(); Serial.print(c); } if(!client.connected()) { // if the server's disconnected, stop the client: Serial.println("disconnected"); client.stop(); }

How to Send Data to a Web Server

We can include data into HTTP request. data format is depended on HTTP request method:

  • HTTP GET request
    • Can only send data in query string format.
    • Data is attached to the pathname.
  • HTTP POST request
    • Can send data NOT ONLY in query string format BUT ALSO any other format such as Json, XML, image ...
    • Data is HTTP request body.

We just need to modify the code for sending the HTTP request:

  • Build query string
int temp = // read from sensor int humi = // read from sensor String queryString = String("?temperature=") + String(temp) + String("&humidity=") + String(humi);
  • Modify the code for sending Data in the HTTP request
    • HTTP GET: append query string to pathname
// send HTTP header client.println("GET " + PATH_NAME + queryString + " HTTP/1.1"); client.println("Host: " + String(HOST_NAME)); client.println("Connection: close"); client.println(); // end HTTP header
  • HTTP POST: send query string as HTTP body
// send HTTP header client.println("POST " + PATH_NAME + " HTTP/1.1"); client.println("Host: " + String(HOST_NAME)); client.println("Connection: close"); client.println(); // end HTTP header // send HTTP body client.println(queryString);
  • Read the response data from web server
while(client.available()) { // read an incoming byte from the server and print them to serial monitor: char c = client.read(); Serial.print(c); } if(!client.connected()) { // if the server's disconnected, stop the client: Serial.println("disconnected"); client.stop(); }

Complete ESP32 Code for Making HTTP Request

The blow is the complete ESP32 code for making HTTP GET/POST request

/* * Created by esp32io.com * * This example code is in the public domain * * Tutorial page: https://esp32io.com/tutorials/esp32-http-request */

Complete ESP32 Code for Making HTTP GET Request with data

/* * Created by esp32io.com * * This example code is in the public domain * * Tutorial page: https://esp32io.com/tutorials/esp32-http-request */

Complete ESP32 Code for Making HTTP POST Request with data

/* * Created by esp32io.com * * This example code is in the public domain * * Tutorial page: https://esp32io.com/tutorials/esp32-http-request */

See Also

※ NOTE THAT:

Note that this tutorial is incomplete. We will post on our Facebook Page when the tutorial is complete. Like it to get updated.

※ NOTE THAT:

Note that this tutorial is incomplete. We will post on our Facebook Page when the tutorial is complete. Like it to get updated.

※ NOTICES

  • We are AVAILABLE for HIRE. See how to hire us to do your project
  • If this tutorial is useful for you, please support us to make more tutorials.
  • We spent a lot of time and effort to create the content for this tutorial, please respect our work! Please do not copy the content to share on other websites. Howerver, please feel free to share the link of this tutorial anywhere