ESP32 ESP-NOW Web Server: Control Multiple ESP32 Boards

Learn how to create an ESP32 Web Server that uses ESP-NOW to control the GPIOs of multiple ESP32 boards. The web server acts like a remote control to send ESP-NOW commands to other boards to control their GPIOs. We’ll control two ESP32 boards, and two GPIOs from each one. This can be easily extended to control more ESP32 boards or more GPIOs.
Building an ESP32 Web Server: The Complete Guide for Beginners
Table of contents:
Project Overview
Prerequisites
1) Preparing the Receiver Boards
2) ESP32 Web Server ESP-NOW Controller/Sender Board
Project Overview
Here’s an overview of the project we’ll build.
In this project, one ESP32 board (controller) will host a web server that displays a web page with buttons to control two GPIOs from two other ESP32 boards.
The ESP32 controller board will act as an ESP-NOW sender that sends data to control the GPIOs of other ESP32 boards. We’ll control GPIOs 2 and 4 on ESP32 #1, and GPIOs 20 and 21 on ESP32 #2.
The ESP32 controller board acts as an ESP-NOW sender, and the other boards act as ESP-NOW receivers.
The controller board sends messages to a specific board by referring to its MAC address.
To control the boards, the web server shows two cards, one for each board. Each card contains two toggle switches to control two GPIOs of each board.
If the ESP-NOW command is not delivered successfully, the toggle switch returns to the last successfully delivered state.
New to ESP-NOW communication protocol?
Read this guide:
Getting Started with ESP-NOW (ESP32 with Arduino IDE)
Prerequisites
Before proceeding, make sure you follow the prerequisites.
You must follow all steps, otherwise, your project will not work.
1) Parts Required
For this project, you need the following parts:
3x ESP32 boards of your choice (we’re using two
DOIT DevKIT V1 Boards
, and one ESP32S3 Freenove ESP32-CAM)
4x LEDs
4x 220 Ohm resistors
Jumper wires
Breaboard
You can use the preceding links or go directly to
MakerAdvisor.com/tools
to find all the parts for your projects at the best price!
2) Install ESP32 Boards in Arduino IDE
We’ll program the ESP32 using Arduino IDE. Make sure you have the ESP32 boards installed. Follow the next tutorial:
Installing ESP32 Board in Arduino IDE 2 (Windows, Mac OS X, Linux)
3) Install the ESPAsyncWebServer Libraries
To create the ESP32 web server, we’ll use the following libraries.
ESPAsyncWebServer by ESP32Async
AsyncTCP by ESP32Async
You can install these libraries in the Arduino Library Manager. Open the Library Manager by clicking the Library icon in the left sidebar.
Search for
ESPAsyncWebServer
and install the
ESPAsyncWebServer by ESP32Async
Search for
AsyncTCP
and install the
AsyncTCP by ESP32Async
1) Preparing the Receiver Boards
Getting the MAC Address of the ESP32 Boards
To communicate via ESP-NOW, you need to know the MAC address of your receiver boards. To get your boards’ MAC address, upload the following code to each of your boards.
/*
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
#include <WiFi.h>
#include <esp_wifi.h>

void readMacAddress(){
uint8_t baseMac[6];
esp_err_t ret = esp_wifi_get_mac(WIFI_IF_STA, baseMac);
if (ret == ESP_OK) {
Serial.printf("%02x:%02x:%02x:%02x:%02x:%02x\n",
baseMac[0], baseMac[1], baseMac[2],
baseMac[3], baseMac[4], baseMac[5]);
} else {
Serial.println("Failed to read MAC address");
}
}

void setup(){
Serial.begin(115200);

WiFi.mode(WIFI_STA);
WiFi.STA.begin();

Serial.print("[DEFAULT] ESP32 Board MAC Address: ");
readMacAddress();
}

void loop(){

}
After uploading, open the Serial Monitor and reset the ESP32. Its MAC address will be printed. Save it because you’ll need it on the ESP32 Web Server sender code.
Get the MAC address for all your receiver boards.
For example, in my case, I get:
ESP32 Receiver Board 1:
30:ae:a4:f6:7d:4c
ESP32 Receiver Board 2:
34:85:18:40:2f:cc
Wiring the Circuit
We’ll control two GPIOs on each ESP32 board. We’ll control GPIOs 2 and 4 on our ESP32 DOIT board, and GPIOs 20 and 21 on our ESP32S3. You can control any other GPIOs.
We’ll connect an LED to each GPIO we want to control.
ESP32 #1
ESP32 #2
GPIO 2
GPIO 20
GPIO 4
GPIO 21
Here’s an example diagram showing how to connect two LEDs to your board.
Code – ESP-NOW ESP32 Receiver Boards
Upload the following code to each of your receiver boards. This code will work for any GPIOs you want to control.
/*********
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*********/
#include <esp_now.h>
#include <WiFi.h>

// Structure example to receive data
// Must match the sender structure
typedef struct struct_message {
int gpio;
bool state;
} struct_message;

// Create a struct_message called myData
struct_message myData;

// callback function that will be executed when data is received
void OnDataRecv(const uint8_t * mac, const uint8_t *incomingData, int len) {
memcpy(&myData, incomingData, sizeof(myData));
Serial.print("Bytes received: ");
Serial.println(len);
Serial.print("Setting GPIO: ");
Serial.println(myData.gpio);
Serial.print("state to: ");
Serial.println(myData.state);
// Control GPIO
pinMode(myData.gpio, OUTPUT);
digitalWrite(myData.gpio, myData.state);
Serial.println();
}

void setup() {
// Initialize Serial Monitor
Serial.begin(115200);

// Initialize WIFI STA interface
WiFi.mode(WIFI_STA);

// Init ESP-NOW
if (esp_now_init() != ESP_OK) {
Serial.println("Error initializing ESP-NOW");
return;
}

// Once ESPNow is successfully Init, we will register for recv CB to
// get recv packer info
esp_now_register_recv_cb(esp_now_recv_cb_t(OnDataRecv));
}

void loop() {

}
How Does the Code Work?
Let’s take a quick look at how the receiver code works. Alternatively, you can
skip to the next section
Include Libraries
First, include the
esp_now.h
and the
WiFi.h
libraries (required to initialize the Wi-Fi station interface to use ESP-NOW).
#include <esp_now.h>
#include <WiFi.h>
Data Structure to Receive Data
Create a structure to receive the data. We call it
struct_message
. This structure should be the same as that defined in the sender sketch. The structure will contain the data received via ESP-NOW. The data contains the GPIO number that we want to control (
int gpio
) and its state (
bool state
).
typedef struct struct_message {
int gpio;
bool state;
} struct_message;
After creating the structure, create a
struct_message
variable called
myData
, where we’ll store the data received via ESP-NOW.
struct_message myData;
ESP-NOW Receive Callback Function
Create a callback function that is called when the ESP32 receives the data via ESP-NOW. The function is called
onDataRecv()
and should accept several parameters: the sender’s MAC address, the incoming message (data structure), and the message length.
void OnDataRecv(const uint8_t * mac, const uint8_t *incomingData, int len) {
This line copies the content of the
incomingData
data variable into the
myData
structure var