HTTP Client Server Communication with ESP8266
Extended example to demonstrate a Client Server Communication based on HTTP between two ESP8266.
If you came here you might have already read about UDP, TCP or HTTP. There are valid usecases for each variant.
- UDP: for fast one way communication, "fire and forget", broadcast and multicast available
- TCP: reliable bidirectional communication
- HTTP: on top of TCP
On this page I show the Client Server Communication based on HTTP.
Why - or better when - do I use HTTP for communication between a client and a server?
It should be clear that HTTP is adding
overhead on top of TCP. However if you check available APIs in the internet you
will see that lot of the communication is build on HTTP(s). In the context of
ESP I would use HTTP if there is already a HTTP/Webserver running on the server
side. A (web)client can transmit data to the server as parameters. These
parameters can be easily parsed on the server side using
easy parsing of client data is my main reason to use HTTP. It takes some more
efforts to process data from the server response on the client side and hence
this site will demo that also.
The Usecase: ESP Extended Server and ESP extended Client
The webclient will send its board ID, the internal meassured VCC, the state of two outputs (which are used on the NodeMCU for LEDs) the button state (= flash button of the NodeMCU) and a float value.
The webserver will store the received client data to separate variables and respond with similar data. Furthermore, the webserver will show the received data on a separate page.
The webclient will store the received data to variables.
Step 1: Send data from webclient to webserver
Lot of example can be found which append data to the URI and transmit the
data with the GET method. A better method is to put the parameters in the
payload of the request and POST the data. The example will post data like
See the tab client for the code.
Step 2: Process received data from weblient on the webserver
As already mentioned above, the parsing of parameters on the server side is quite easy. See the
top part of the function
It checks each parameter and retrieves the value into the designated variable.
Step 3: Respond with data from the webserver to the webclient
In a real world application one would use XML or JSON to give the payload a
data structure. The library ArduinoJson could be used on both sides for easier
handling of JSON. In this example I just use the same format of key/value
pairs like for parameters. See the second half of the function
handleData() it looks very similar to the client function.
Step 4: Process received data from webserver on the webclient
On client side the parsing of a key/value pairs needs some effort. Here I'm
using strtok to split the received payload into tokens and fill the variables. As already
mentioned above, the parsing of parameter is quite easy. See the bottom half of
void sendPost(). When the request was sucessfull
if (httpCode == HTTP_CODE_OK || httpCode == HTTP_CODE_MOVED_PERMANENTLY)
the tokenization of the payload will be processed.
It checks each parameter and retrieves
the value in the designated variable.
The right webserver examples to start with in the Arduino IDE are:
- on the ESP8266 the IDE Example ESP8266Webserver / HelloServer
- on the ESP32 the IDE Example Webserver / HelloServer
The server sketch is based on other examples on my page. For this specific usecase see the extension to process a call of d.php.
How to get started with the ESP extended server and ESP extended client
At the end of this page you will find download links to the ESP extended webserver and a ESP extended webclient. The sketches have several tabs.
In the main tab you will find the line
#define USE_BOARD 1 // the actual board to compile
This enables you to hold several configurations for several boards in one sketch and to have a simple switch to decide which board you want to compile.
Furthermore you have to define your wifi credentials. Either use an external file with your credentials or set them in the sketch:
#define STASSID "your-ssid" // ... modify these line to your SSID #define STAPSK "your-password" // ... and set your WIFI password
If you compile the sketch and upload it to your ESP, it should connect to your wifi. The IP address will be written to the serial monitor.
You should be able to see a working webserver at the given server IP address.
In the ESP extended client you have to set up the right server IP address to make the example working:
const char* sendHttpTo = "http://172.18.67.124/data";
The tab server : The webserver on the ESP8266 / ESP32
The server part of the sketch is quite huge. It's mainly a knock off from my ESP generic webserver. So let's explain what's in there:
0.htm is the main page of the server. It contains all the HTML needed to display the pins, text or buttons.
1.htm, x.htm are a simple demo page and displays several variables or text.
cmd is a resource on the sever to retrieve data from your browser. Every time you press a button or move a slider, the new data will be sent to cmd. For example the ESP can switch on or off the pin you have triggered in the browser.
f.css is a CSS (a stylesheet) to make the layout of the webpage nicer. The sliders and the rocket switches are pure HTML elements and only styled by CSS. The main colors are using CSS variables, so you only have to change the colors in the root selector and every element using the variable should be changed accordingly.
data is a resource on the server which can receive data from a webclient. In this usecase data is also responding with some payload.
Then there are some helper functions:
handleNotFound() will give a typical "404 not found" page if the user requests a non existing page.
handle204() will respond with HTTP code 204 "no content". This is used to indicate the browser that the request was processed but no further content will be responded. This is a fast way to respond to favicon.ico requests.
addTop() and addBottom() are sub functions adding the top and the bottom of the HTML to a page to get a consistent header/navigation/footer style through all pages.
Additonal Note: OTA
The sketch adds OTA (over the air) update capability. This means you can update your ESP8266 via WIFI without a serial connection.
- Download the ESP Extended HTTP Client
- Download the ESP Extended HTTP Webserver
- 8 channel ESP8266 Relayboard available on Aliexpress (* Affiliate Link)
(*) Disclosure: Some of the links above are affiliate links, meaning, at no additional cost to you I will earn a (little) comission if you click through and make a purchase. I only recommend products I own myself and I'm convinced they are useful for other makers.
First upload: 2023-07-01 | Version: 2023-07-01