![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/11\/ESP8266-ESP-NOW-Web-Server-Sensor-Dashboard-ESP-NOW-Wi-Fi..jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWe have other guides related to ESP-NOW that you might be interested in:<\/p>\n\n\n\n
- \n
- Getting Started with ESP-NOW (ESP8266 NodeMCU with Arduino IDE)<\/a><\/li>\n\n\n\n
- ESP-NOW Two-Way Communication Between ESP8266 NodeMCU Boards<\/a><\/li>\n\n\n\n
- ESP-NOW with ESP8266: Send Data to Multiple Boards (one-to-many)<\/a><\/li>\n\n\n\n
- ESP-NOW with ESP8266: Receive Data from Multiple Boards (many-to-one)<\/a><\/li>\n<\/ul>\n\n\n\n
Using ESP-NOW and Wi-Fi Simultaneously<\/h2>\n\n\n
\n![\"Using](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/11\/ESP8266-ESP-NOW-With-Wi-Fi-Web-Server-How-It-Works.png?resize=905%2C887&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThere are a few things you need to take into account if you want to use Wi-Fi to host a web server and use ESP-NOW simultaneously to receive sensor readings from other boards:<\/p>\n\n\n\n
- \n
- The ESP8266 sender boards must use the same Wi-Fi channel of the receiver board.<\/li>\n\n\n\n
- The Wi-Fi channel of the receiver board is automatically assigned by your Wi-Fi router.<\/li>\n\n\n\n
- The Wi-Fi mode of the receiver board must be access point and station (WIFI_AP_STA<\/span>).<\/li>\n\n\n\n
- You can set up the same Wi-Fi channel manually, or you can add a simple spinet of code on the sender to set its Wi-Fi channel to the same of the receiver board.<\/li>\n<\/ul>\n\n\n\n
Project Overview<\/h2>\n\n\n\n
The following diagram shows a high-level overview of the project we’ll build.<\/p>\n\n\n
\n![\"ESP-NOW](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/11\/ESP-NOW-Web-Server-Receiver-Two-Sender-Board-how-it-works-ESP8266.png?resize=900%2C806&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n- \n
- There are two ESP8266 sender boards that send BME280<\/a> temperature and humidity readings via ESP-NOW to one ESP8266 receiver board (ESP-NOW many to one configuration<\/a>);<\/li>\n\n\n\n
- The ESP8266 receiver board receives the packets and displays the readings on a web server;<\/li>\n\n\n\n
- The web page is updated automatically every time it receives a new reading using Server-Sent Events (SSE). <\/li>\n\n\n\n
- The web page also shows the last time the readings were updated using JavaScript.<\/li>\n<\/ul>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
Before proceeding with this project, make sure you check the following prerequisites.<\/p>\n\n\n\n
Arduino IDE<\/h3>\n\n\n\n
We\u2019ll program the ESP8266 boards using Arduino IDE, so before proceeding with this tutorial, make sure you have the ESP8266 board installed in your Arduino IDE.<\/p>\n\n\n\n
- \n
- Installing ESP8266 Board in Arduino IDE (Windows, Mac OS X, and Linux)<\/a><\/li>\n<\/ul>\n\n\n\n
BME280 Libraries<\/h3>\n\n\n\n
The ESP8266 sender board will send temperature and humidity readings from a BME280 sensor.<\/p>\n\n\n\n
To read from the BME280 sensor, we\u2019ll use the Adafruit_BME280 library<\/a>. To use this library you also need to install the Adafruit Unified Sensor library<\/a>. Follow the next steps to install those libraries.<\/p>\n\n\n\n
Search for \u201cAdafruit BME280 Library\u201d in the Search box and install the library.<\/p>\n\n\n
\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/09\/Installing-Adafruit-BME280-Sensor-Library-Arduino-IDE.png?resize=290%2C305&quality=100&strip=all&ssl=1\")
<\/a><\/figure><\/div>\n\n\nTo use the BME280 library, you also need to install the\u00a0Adafruit_Sensor library. A pop-up window will ask you to install it and any other dependencies when you install the BME280 library.<\/p>\n\n\n\n
To learn more about the BME280 temperature, humidity and pressure sensor, read our guide: ESP8266 with BME280 using Arduino IDE (Pressure, Temperature, Humidity)<\/a>.<\/p>\n\n\n\n
Async Web Server Libraries<\/h3>\n\n\n\n
We’ll build the web server using the following libraries:<\/p>\n\n\n\n
- \n
- ESPAsyncWebServer by ESP32Async<\/a><\/li>\n\n\n\n
- ESPAsyncTCP by ESP32Async<\/a><\/li>\n<\/ul>\n\n\n\n
You can install these libraries using the Arduino Library Manager. Go to Sketch <\/strong>> Include Library<\/strong> > Manage Libraries<\/strong> and search for the libraries’ names.<\/p>\n\n\n\n
Arduino_JSON Library<\/h3>\n\n\n\n
You need to install the Arduino_JSON library<\/a>. You can install this library in the Arduino IDE Library Manager. Just go to\u00a0Sketch\u00a0<\/strong>>\u00a0Include Library<\/strong>\u00a0>\u00a0Manage Libraries<\/strong>\u00a0and search for the library name “Arduino_JSON”, and select the option by Arduino<\/strong>.<\/p>\n\n\n\n
Parts Required<\/h2>\n\n\n\n
To follow this tutorial, you need multiple ESP8266 boards. We’ll use three ESP8266 boards. You also need:<\/p>\n\n\n\n
- \n
- 3x ESP8266\u00a0<\/a>(read\u00a0Best ESP8266 development boards<\/a>)<\/li>\n\n\n\n
- 2x BME280 sensor<\/a> – BME280 guide for ESP8266<\/a><\/li>\n\n\n\n
- Breadboard<\/a><\/li>\n\n\n\n
- Jumper wires<\/a><\/li>\n<\/ul>\n\n\n
You can use the preceding links or go directly to MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p>
![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\n\n\n\nGetting the Receiver Board MAC Address<\/h2>\n\n\n\n
To send messages via ESP-NOW, you need to know the receiver board\u2019s MAC address<\/a>. Each board has a unique MAC address (learn how to Get and Change the ESP8266 MAC Address<\/a>).<\/p>\n\n\n\n
Upload the following code to your ESP8266 receiver board to get its MAC address.<\/p>\n\n\n
\/*\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/get-change-esp32-esp8266-mac-address-arduino\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files. \n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*\/\n#ifdef ESP32\n #include <WiFi.h>\n #include <esp_wifi.h>\n#else\n #include <ESP8266WiFi.h>\n#endif\n\nvoid setup(){\n Serial.begin(115200);\n\n Serial.print("ESP Board MAC Address: ");\n #ifdef ESP32\n WiFi.mode(WIFI_STA);\n WiFi.STA.begin();\n uint8_t baseMac[6];\n esp_err_t ret = esp_wifi_get_mac(WIFI_IF_STA, baseMac);\n if (ret == ESP_OK) {\n Serial.printf("%02x:%02x:%02x:%02x:%02x:%02x\\n",\n baseMac[0], baseMac[1], baseMac[2],\n baseMac[3], baseMac[4], baseMac[5]);\n } else {\n Serial.println("Failed to read MAC address");\n }\n #else\n Serial.println(WiFi.macAddress());\n #endif\n}\n \nvoid loop(){\n\n}\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
After uploading the code, press the RST\/EN button, and the MAC address should be displayed on the Serial Monitor. <\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-MAC-Address-Serial-Monitor.png?resize=601%2C445&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nESP8266 Receiver (ESP-NOW + Web Server)<\/h2>\n\n\n\n
The ESP8266 NodeMCU receiver board receives the packets from the sender boards and hosts a web server to display the latest received readings.<\/p>\n\n\n\n
Upload the following code to your receiver board – the code is prepared to receive readings from two different boards.<\/p>\n\n\n
\/*\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp8266-esp-now-wi-fi-web-server\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*\/\n\n#include <espnow.h>\n#include <ESP8266WiFi.h>\n#include "ESPAsyncWebServer.h"\n#include "ESPAsyncTCP.h"\n#include <Arduino_JSON.h>\n\n\/\/ Replace with your network credentials (STATION)\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\n\/\/ Structure example to receive data\n\/\/ Must match the sender structure\ntypedef struct struct_message {\n int id;\n float temp;\n float hum;\n unsigned int readingId;\n} struct_message;\n\nstruct_message incomingReadings;\n\nJSONVar board;\n\nAsyncWebServer server(80);\nAsyncEventSource events("\/events");\n\n\/\/ callback function that will be executed when data is received\nvoid OnDataRecv(uint8_t * mac_addr, uint8_t *incomingData, uint8_t len) { \n \/\/ Copies the sender mac address to a string\n char macStr[18];\n Serial.print("Packet received from: ");\n snprintf(macStr, sizeof(macStr), "%02x:%02x:%02x:%02x:%02x:%02x",\n mac_addr[0], mac_addr[1], mac_addr[2], mac_addr[3], mac_addr[4], mac_addr[5]);\n Serial.println(macStr);\n memcpy(&incomingReadings, incomingData, sizeof(incomingReadings));\n \n board["id"] = incomingReadings.id;\n board["temperature"] = incomingReadings.temp;\n board["humidity"] = incomingReadings.hum;\n board["readingId"] = String(incomingReadings.readingId);\n String jsonString = JSON.stringify(board);\n events.send(jsonString.c_str(), "new_readings", millis());\n \n Serial.printf("Board ID %u: %u bytes\\n", incomingReadings.id, len);\n Serial.printf("t value: %4.2f \\n", incomingReadings.temp);\n Serial.printf("h value: %4.2f \\n", incomingReadings.hum);\n Serial.printf("readingID value: %d \\n", incomingReadings.readingId);\n Serial.println();\n}\n\nconst char index_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE HTML><html>\n<head>\n <title>ESP-NOW DASHBOARD<\/title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <link rel="stylesheet" href="https:\/\/use.fontawesome.com\/releases\/v5.7.2\/css\/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">\n <link rel="icon" href="data:,">\n <style>\n html {font-family: Arial; display: inline-block; text-align: center;}\n h1 { font-size: 2rem;}\n body { margin: 0;}\n .topnav { overflow: hidden; background-color: #2f4468; color: white; font-size: 1.7rem; }\n .content { padding: 20px; }\n .card { background-color: white; box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5); }\n .cards { max-width: 700px; margin: 0 auto; display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }\n .reading { font-size: 2.8rem; }\n .timestamp { color: #bebebe; font-size: 1rem; }\n .card-title{ font-size: 1.2rem; font-weight : bold; }\n .card.temperature { color: #B10F2E; }\n .card.humidity { color: #50B8B4; }\n <\/style>\n<\/head>\n<body>\n <div class="topnav">\n <h1>ESP-NOW DASHBOARD<\/h1>\n <\/div>\n <div class="content">\n <div class="cards">\n <div class="card temperature">\n <p class="card-title"><i class="fas fa-thermometer-half"><\/i> BOARD #1 - TEMPERATURE<\/p><p><span class="reading"><span id="t1"><\/span> °C<\/span><\/p><p class="timestamp">Last Reading: <span id="rt1"><\/span><\/p>\n <\/div>\n <div class="card humidity">\n <p class="card-title"><i class="fas fa-tint"><\/i> BOARD #1 - HUMIDITY<\/p><p><span class="reading"><span id="h1"><\/span> %<\/span><\/p><p class="timestamp">Last Reading: <span id="rh1"><\/span><\/p>\n <\/div>\n <div class="card temperature">\n <p class="card-title"><i class="fas fa-thermometer-half"><\/i> BOARD #2 - TEMPERATURE<\/p><p><span class="reading"><span id="t2"><\/span> °C<\/span><\/p><p class="timestamp">Last Reading: <span id="rt2"><\/span><\/p>\n <\/div>\n <div class="card humidity">\n <p class="card-title"><i class="fas fa-tint"><\/i> BOARD #2 - HUMIDITY<\/p><p><span class="reading"><span id="h2"><\/span> %<\/span><\/p><p class="timestamp">Last Reading: <span id="rh2"><\/span><\/p>\n <\/div>\n <\/div>\n <\/div>\n<script>\nfunction getDateTime() {\n var currentdate = new Date();\n var datetime = currentdate.getDate() + "\/"\n + (currentdate.getMonth()+1) + "\/"\n + currentdate.getFullYear() + " at "\n + currentdate.getHours() + ":"\n + currentdate.getMinutes() + ":"\n + currentdate.getSeconds();\n return datetime;\n}\nif (!!window.EventSource) {\n var source = new EventSource('\/events');\n \n source.addEventListener('open', function(e) {\n console.log("Events Connected");\n }, false);\n source.addEventListener('error', function(e) {\n if (e.target.readyState != EventSource.OPEN) {\n console.log("Events Disconnected");\n }\n }, false);\n \n source.addEventListener('message', function(e) {\n console.log("message", e.data);\n }, false);\n \n source.addEventListener('new_readings', function(e) {\n console.log("new_readings", e.data);\n var obj = JSON.parse(e.data);\n document.getElementById("t"+obj.id).innerHTML = obj.temperature.toFixed(2);\n document.getElementById("h"+obj.id).innerHTML = obj.humidity.toFixed(2);\n document.getElementById("rt"+obj.id).innerHTML = getDateTime();\n document.getElementById("rh"+obj.id).innerHTML = getDateTime();\n }, false);\n}\n<\/script>\n<\/body>\n<\/html>)rawliteral";\n\nvoid setup() {\n \/\/ Initialize Serial Monitor\n Serial.begin(115200);\n\n \/\/ Set the device as a Station and Soft Access Point simultaneously\n WiFi.mode(WIFI_AP_STA);\n \n \/\/ Set device as a Wi-Fi Station\n WiFi.begin(ssid, password);\n while (WiFi.status() != WL_CONNECTED) {\n delay(1000);\n Serial.println("Setting as a Wi-Fi Station..");\n }\n Serial.print("Station IP Address: ");\n Serial.println(WiFi.localIP());\n Serial.print("Wi-Fi Channel: ");\n Serial.println(WiFi.channel());\n\n \/\/ Init ESP-NOW\n if (esp_now_init() != 0) {\n Serial.println("Error initializing ESP-NOW");\n return;\n }\n \n \/\/ Once ESPNow is successfully Init, we will register for recv CB to\n \/\/ get recv packer info\n esp_now_register_recv_cb(OnDataRecv);\n\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/html", index_html);\n });\n \n events.onConnect([](AsyncEventSourceClient *client){\n if(client->lastId()){\n Serial.printf("Client reconnected! Last message ID that it got is: %u\\n", client->lastId());\n }\n \/\/ send event with message "hello!", id current millis\n \/\/ and set reconnect delay to 1 second\n client->send("hello!", NULL, millis(), 10000);\n });\n server.addHandler(&events);\n server.begin();\n}\n \nvoid loop() {\n static unsigned long lastEventTime = millis();\n static const unsigned long EVENT_INTERVAL_MS = 5000;\n if ((millis() - lastEventTime) > EVENT_INTERVAL_MS) {\n events.send("ping",NULL,millis());\n lastEventTime = millis();\n }\n}\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
How the Code Works<\/h3>\n\n\n\n
First, include the necessary libraries.<\/p>\n\n\n\n
#include <espnow.h>\n#include <ESP8266WiFi.h>\n#include \"ESPAsyncWebServer.h\"\n#include \"ESPAsyncTCP.h\"\n#include <Arduino_JSON.h><\/code><\/pre>\n\n\n\nThe Arduino_JSON<\/span> library<\/a> is needed because we’ll create a JSON variable with the data received from each board. This JSON variable will be used to send all the needed information to the web page as you’ll see later in this project. <\/p>\n\n\n\n
Insert your network credentials on the following lines so that the ESP8266 can connect to your local network.<\/p>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nData Structure<\/h4>\n\n\n\n
Then, create a structure that contains the data we’ll receive. We called this structure struct_message<\/span> and it contains the board ID, temperature and humidity readings, and the reading ID.<\/p>\n\n\n\n
typedef struct struct_message {\n int id;\n float temp;\n float hum;\n int readingId;\n} struct_message;<\/code><\/pre>\n\n\n\nCreate a new variable of type struct_message<\/span> that is called incomingReadings<\/span> that will store the variables values.<\/p>\n\n\n\n
struct_message incomingReadings;<\/code><\/pre>\n\n\n\nCreate a JSON variable called board<\/span>.<\/p>\n\n\n\n
JSONVar board;<\/code><\/pre>\n\n\n\nCreate an Async Web Server on port 80.<\/p>\n\n\n\n
AsyncWebServer server(80);<\/code><\/pre>\n\n\n\nCreate Event Source<\/h3>\n\n\n\n
To automatically display the information on the web server when a new reading arrives, we’ll use Server-Sent Events (SSE).<\/p>\n\n\n\n
The following line creates a new event source on \/events<\/span>.<\/p>\n\n\n\n
AsyncEventSource events(\"\/events\");<\/code><\/pre>\n\n\n\nServer-Sent Events allow a web page (client) to get updates from a server. We’ll use this to automatically display new readings on the web server page when a new ESP-NOW packet arrives.<\/p>\n\n\n\n
Important: <\/strong> Server-sent events are not supported on Internet Explorer.<\/p>\n\n\n\n
OnDataRecv() function<\/h3>\n\n\n\n
The OnDataRecv()<\/span> function will be executed when you receive a new ESP-NOW packet.<\/p>\n\n\n\n
void OnDataRecv(uint8_t * mac_addr, uint8_t *incomingData, uint8_t len) { \n<\/code><\/pre>\n\n\n\nInside that function, print the sender’s MAC address:<\/p>\n\n\n\n
char macStr[18];\nSerial.print(\"Packet received from: \");\nsnprintf(macStr, sizeof(macStr), \"%02x:%02x:%02x:%02x:%02x:%02x\",\n mac_addr[0], mac_addr[1], mac_addr[2], mac_addr[3], mac_addr[4], mac_addr[5]);\nSerial.println(macStr);<\/code><\/pre>\n\n\n\nCopy the information in the incomingData<\/span> variable into the incomingReadings<\/span> structure variable.<\/p>\n\n\n\n
memcpy(&incomingReadings, incomingData, sizeof(incomingReadings));<\/code><\/pre>\n\n\n\nThen, create a JSON String variable with the received information (jsonString<\/span> variable):<\/p>\n\n\n\n
board[\"id\"] = incomingReadings.id;\nboard[\"temperature\"] = incomingReadings.temp;\nboard[\"humidity\"] = incomingReadings.hum;\nboard[\"readingId\"] = String(incomingReadings.readingId);\nString jsonString = JSON.stringify(board);<\/code><\/pre>\n\n\n\nHere’s an example on how the jsonString<\/span> variable may look like after receiving the readings:<\/p>\n\n\n\n
board = {\n \"id\": \"1\",\n \"temperature\": \"24.32\",\n \"humidity\" = \"65.85\",\n \"readingId\" = \"2\"\n}<\/code><\/pre>\n\n\n\nAfter gathering all the received data on the jsonString<\/span> variable, send that information to the browser as an event (“new_readings”<\/span>).<\/p>\n\n\n\n
events.send(jsonString.c_str(), \"new_readings\", millis());<\/code><\/pre>\n\n\n\nLater, we’ll see how to handle these events on the client side. <\/p>\n\n\n\n
Finally, print the received information on the Arduino IDE Serial Monitor for debugging purposes:<\/p>\n\n\n\n
Serial.printf(\"Board ID %u: %u bytes\\n\", incomingReadings.id, len);\nSerial.printf(\"t value: %4.2f \\n\", incomingReadings.temp);\nSerial.printf(\"h value: %4.2f \\n\", incomingReadings.hum);\nSerial.printf(\"readingID value: %d \\n\", incomingReadings.readingId);\nSerial.println();<\/code><\/pre>\n\n\n\nBuilding the Web Page<\/h3>\n\n\n\n
The index_html<\/span> variable contains all the HTML, CSS and JavaScript to build the web page. We won’t go into details on how the HTML and CSS works. We’ll just take a look at how to handle the events sent by the server.<\/p>\n\n\n\n
Handle Events<\/h4>\n\n\n\n
Create a new EventSource<\/span> object and specify the URL of the page sending the updates. In our case, it’s \/events<\/span>.<\/p>\n\n\n\n
if (!!window.EventSource) {\n var source = new EventSource('\/events');<\/code><\/pre>\n\n\n\nOnce you’ve instantiated an event source, you can start listening for messages from the server with addEventListener()<\/span>.<\/p>\n\n\n\n
These are the default event listeners, as shown here in the AsyncWebServer documentation<\/a>.<\/p>\n\n\n\n
source.addEventListener('open', function(e) {\n console.log(\"Events Connected\");\n}, false);\nsource.addEventListener('error', function(e) {\n if (e.target.readyState != EventSource.OPEN) {\n console.log(\"Events Disconnected\");\n }\n}, false);\n\nsource.addEventListener('message', function(e) {\n console.log(\"message\", e.data);\n}, false);<\/code><\/pre>\n\n\n\nThen, add the event listener for “new_readings”<\/span>.<\/p>\n\n\n\n
source.addEventListener('new_readings', function(e) {<\/code><\/pre>\n\n\n\nWhen the ESP8266 receives a new packet, it sends a JSON string with the readings as an event (“new_readings”<\/span>) to the client. The following lines handle what happens when the browser receives that event.<\/p>\n\n\n\n
console.log(\"new_readings\", e.data);\nvar obj = JSON.parse(e.data);\ndocument.getElementById(\"t\"+obj.id).innerHTML = obj.temperature.toFixed(2);\ndocument.getElementById(\"h\"+obj.id).innerHTML = obj.humidity.toFixed(2);\ndocument.getElementById(\"rt\"+obj.id).innerHTML = getDateTime();\ndocument.getElementById(\"rh\"+obj.id).innerHTML = getDateTime();<\/code><\/pre>\n\n\n\nBasically, print the new readings on the browser console, and put the received data into the elements with the corresponding id on the web page. We also update the date and time the readings were received by calling the getDateTime()<\/span> JavaScript function.<\/p>\n\n\n\n
function getDateTime() {\n var currentdate = new Date();\n var datetime = currentdate.getDate() + \"\/\"\n + (currentdate.getMonth()+1) + \"\/\"\n + currentdate.getFullYear() + \" at \"\n + currentdate.getHours() + \":\"\n + currentdate.getMinutes() + \":\"\n + currentdate.getSeconds();\n return datetime;\n}<\/code><\/pre>\n\n\n\nsetup()<\/h3>\n\n\n\n
In the setup()<\/span>, set the ESP8266 receiver as an access point and Wi-Fi station:<\/p>\n\n\n\n
WiFi.mode(WIFI_AP_STA);<\/code><\/pre>\n\n\n\nThe following lines connect the ESP8266 to your local network and print the IP address and the Wi-Fi channel:<\/p>\n\n\n\n
\/\/ Set device as a Wi-Fi Station\nWiFi.begin(ssid, password);\nwhile (WiFi.status() != WL_CONNECTED) {\n delay(1000);\n Serial.println(\"Setting as a Wi-Fi Station..\");\n}\nSerial.print(\"Station IP Address: \");\nSerial.println(WiFi.localIP());\nSerial.print(\"Wi-Fi Channel: \");\nSerial.println(WiFi.channel());<\/code><\/pre>\n\n\n\nInitialize ESP-NOW.<\/p>\n\n\n\n
if (esp_now_init() != 0) {\n Serial.println(\"Error initializing ESP-NOW\");\n return;\n}<\/code><\/pre>\n\n\n\nRegister for the OnDataRecv<\/span> callback function, so that it is executed when a new ESP-NOW packet arrives.<\/p>\n\n\n\n
esp_now_register_recv_cb(OnDataRecv);<\/code><\/pre>\n\n\n\nHandle Requests<\/h3>\n\n\n\n
When you access the ESP8266 IP address on the root \/<\/span> URL, send the text that is stored on the index_html<\/span> variable to build the web page.<\/p>\n\n\n\n
server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send_P(200, \"text\/html\", index_html);\n});<\/code><\/pre>\n\n\n\nServer Event Source<\/h3>\n\n\n\n
Set up the event source on the server.<\/p>\n\n\n\n
events.onConnect([](AsyncEventSourceClient *client){\n if(client->lastId()){\n Serial.printf(\"Client reconnected! Last message ID that it got is: %u\\n\", client->lastId());\n }\n \/\/ send event with message \"hello!\", id current millis\n \/\/ and set reconnect delay to 1 second\n client->send(\"hello!\", NULL, millis(), 10000);\n);\nserver.addHandler(&events);<\/code><\/pre>\n\n\n\nFinally, start the server.<\/p>\n\n\n\n
server.begin();<\/code><\/pre>\n\n\n\nloop()<\/h3>\n\n\n\n
In the loop()<\/span>, send a ping every 5 seconds. This is used to check on the client side, if the server is still running (these lines are not mandatory).<\/p>\n\n\n\n
static unsigned long lastEventTime = millis();\nstatic const unsigned long EVENT_INTERVAL_MS = 5000;\nif ((millis() - lastEventTime) > EVENT_INTERVAL_MS) {\n events.send(\"ping\",NULL,millis());\n lastEventTime = millis();\n}<\/code><\/pre>\n\n\n\nThe following diagram summarizes how the Server-sent Events work on this project and how it updates the values without refreshing the web page. <\/p>\n\n\n
\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/11\/ESP-NOW-Web-Server-with-Server-Sent-Events-ESP8266-NodeMCU.png?resize=937%2C854&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nAfter uploading the code to the receiver board, press the on-board EN\/RST button. The ESP8266 IP address should be printed on the Serial Monitor as well as the Wi-Fi channel.<\/p>\n\n\n
\n![\"ESP-NOW](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP-NOW-IP-Address-Wi-Fi-channel-Serial-Monitor.png?resize=669%2C413&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nESP8266 Sender Circuit<\/h2>\n\n\n\n
The ESP8266 sender boards are connected to a BME280 sensor. Wire the sensor to the default ESP8266 I2C pins:<\/p>\n\n\n\n
- GPIO 5<\/span> (D1) -> SCL<\/li>
- GPIO 4<\/span> (D2) -> SDA<\/li><\/ul>\n\n\n
\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/07\/ESP8266-NodeMCU-BME280-Sensor-Temperature-Humidity-Pressure-Wiring-Diagram-Circuit.png?resize=675%2C531&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nESP8266 Sender Code (ESP-NOW)<\/h2>\n\n\n\n
Each sender board will send a structure via ESP-NOW that contains the board ID (so that you can identify which board sent the readings), the temperature, the humidity and the reading ID. The reading ID is an int number to know how many messages were sent.<\/p>\n\n\n
\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/11\/ESP-NOW-Send-Sensor-Readings-Structures-ESP8266.jpg?resize=900%2C643&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nUpload the following code to each of your sender boards. Don\u2019t forget to increment the id<\/span> number for each sender board and insert your SSID in the WIFI_SSID<\/span> variable.<\/p>\n\n\n
\/*\n Rui Santos\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp8266-esp-now-wi-fi-web-server\/\n \n Permission is hereby granted, free of charge, to any person obtaining a copy\n of this software and associated documentation files.\n \n The above copyright notice and this permission notice shall be included in all\n copies or substantial portions of the Software.\n*\/\n\n#include <espnow.h>\n#include <ESP8266WiFi.h>\n#include <Adafruit_BME280.h>\n#include <Adafruit_Sensor.h>\n\n\/\/ Set your Board ID (ESP32 Sender #1 = BOARD_ID 1, ESP32 Sender #2 = BOARD_ID 2, etc)\n#define BOARD_ID 2\n\nAdafruit_BME280 bme; \n\n\/\/MAC Address of the receiver \nuint8_t broadcastAddress[] = {0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF};\n\n\/\/Structure example to send data\n\/\/Must match the receiver structure\ntypedef struct struct_message {\n int id;\n float temp;\n float hum;\n int readingId;\n} struct_message;\n\n\/\/Create a struct_message called myData\nstruct_message myData;\n\nunsigned long previousMillis = 0; \/\/ Stores last time temperature was published\nconst long interval = 10000; \/\/ Interval at which to publish sensor readings\n\nunsigned int readingId = 0;\n\n\/\/ Insert your SSID\nconstexpr char WIFI_SSID[] = "REPLACE_WITH_YOUR_SSID";\n\nint32_t getWiFiChannel(const char *ssid) {\n if (int32_t n = WiFi.scanNetworks()) {\n for (uint8_t i=0; i<n; i++) {\n if (!strcmp(ssid, WiFi.SSID(i).c_str())) {\n return WiFi.channel(i);\n }\n }\n }\n return 0;\n}\n\nvoid initBME(){\n if (!bme.begin(0x76)) {\n Serial.println("Could not find a valid BME280 sensor, check wiring!");\n while (1);\n }\n}\n\nfloat readTemperature() {\n float t = bme.readTemperature();\n return t;\n}\n\nfloat readHumidity() {\n float h = bme.readHumidity();\n return h;\n}\n\n\/\/ Callback when data is sent\nvoid OnDataSent(uint8_t *mac_addr, uint8_t sendStatus) {\n Serial.print("Last Packet Send Status: ");\n if (sendStatus == 0){\n Serial.println("Delivery success");\n }\n else{\n Serial.println("Delivery fail");\n }\n}\n \nvoid setup() {\n \/\/Init Serial Monitor\n Serial.begin(115200);\n initBME(); \n\n \/\/ Set device as a Wi-Fi Station and set channel\n WiFi.mode(WIFI_STA);\n\n int32_t channel = getWiFiChannel(WIFI_SSID);\n\n WiFi.printDiag(Serial); \/\/ Uncomment to verify channel number before\n wifi_promiscuous_enable(1);\n wifi_set_channel(channel);\n wifi_promiscuous_enable(0);\n WiFi.printDiag(Serial); \/\/ Uncomment to verify channel change after\n\n \/\/ Init ESP-NOW\n if (esp_now_init() != 0) {\n Serial.println("Error initializing ESP-NOW");\n return;\n }\n\n \/\/ Once ESPNow is successfully Init, we will register for Send CB to\n \/\/ get the status of Trasnmitted packet\n esp_now_set_self_role(ESP_NOW_ROLE_CONTROLLER);\n\n esp_now_register_send_cb(OnDataSent);\n \n esp_now_add_peer(broadcastAddress, ESP_NOW_ROLE_SLAVE, 1, NULL, 0);\n}\n \nvoid loop() {\n unsigned long currentMillis = millis();\n if (currentMillis - previousMillis >= interval) {\n \/\/ Save the last time a new reading was published\n previousMillis = currentMillis;\n \/\/Set values to send\n myData.id = BOARD_ID;\n myData.temp = readTemperature();\n myData.hum = readHumidity();\n myData.readingId = readingId++;\n \n esp_now_send(broadcastAddress, (uint8_t *) &myData, sizeof(myData));\n\n Serial.print("loop");\n }\n}\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
How the Code Works<\/h3>\n\n\n\n
Start by importing the required libraries:<\/p>\n\n\n\n
#include <espnow.h>\n#include <ESP8266WiFi.h>\n#include <Adafruit_BME280.h>\n#include <Adafruit_Sensor.h>\n<\/code><\/pre>\n\n\n\nSet Board ID<\/h4>\n\n\n\n
Define the ESP8266 sender board ID, for example set BOARD_ID 1<\/span> for ESP8266 Sender #1, etc…<\/p>\n\n\n\n
#define BOARD_ID 1<\/code><\/pre>\n\n\n\nBME280 Sensor<\/h4>\n\n\n\n
Create an Adafruit_BME280<\/span> object called bme<\/span>.<\/p>\n\n\n\n
Adafruit_BME280 bme;<\/code><\/pre>\n\n\n\nReceiver’s MAC Address<\/h4>\n\n\n\n
Insert the receiver’s MAC address on the next line (for example):<\/p>\n\n\n\n
uint8_t broadcastAddress[] = {0x30, 0xAE, 0xA4, 0x15, 0xC7, 0xFC};<\/code><\/pre>\n\n\n\nData Structure<\/h4>\n\n\n\n
Then, create a structure that contains the data we want to send. The struct_message<\/span> contains the board ID, temperature reading, humidity reading, and the reading ID.<\/p>\n\n\n\n
typedef struct struct_message {\n int id;\n float temp;\n float hum;\n int readingId;\n} struct_message;<\/code><\/pre>\n\n\n\nCreate a new variable of type struct_message<\/span> that is called myData<\/span> that stores the variables’ values.<\/p>\n\n\n\n
struct_message myData;<\/code><\/pre>\n\n\n\nTimer Interval<\/h4>\n\n\n\n
Create some auxiliary timer variables to publish the readings every 10 seconds. You can change the delay time on the interval<\/span> variable.<\/p>\n\n\n\n
unsigned long previousMillis = 0; \/\/ Stores last time temperature was published\nconst long interval = 10000; \/\/ Interval at which to publish sensor readings<\/code><\/pre>\n\n\n\nInitialize the readingId<\/span> variable – it keeps track of the number of readings sent.<\/p>\n\n\n\n
unsigned int readingId = 0;<\/code><\/pre>\n\n\n\nChanging Wi-Fi channel<\/h4>\n\n\n\n
Now, we’ll get the receiver’s Wi-Fi channel. This is useful because it allows us to automatically assign the same Wi-Fi channel to the sender board.<\/p>\n\n\n\n
To do that, you must insert your SSID in the following line:<\/p>\n\n\n\n
constexpr char WIFI_SSID[] = \"REPLACE_WITH_YOUR_SSID\";<\/code><\/pre>\n\n\n\nThen, the getWiFiChannel()<\/span> function scans for your network and gets its channel.<\/p>\n\n\n\n
int32_t getWiFiChannel(const char *ssid) {\n if (int32_t n = WiFi.scanNetworks()) {\n for (uint8_t i=0; i<n; i++) {\n if (!strcmp(ssid, WiFi.SSID(i).c_str())) {\n return WiFi.channel(i);\n }\n }\n }\n return 0;\n}<\/code><\/pre>\n\n\n\nThis snippet of code was proposed by Stephane (one of our readers). You can see his complete example here<\/a>.<\/em><\/p>\n\n\n\n
Initialize BME280 Sensor<\/h4>\n\n\n\n
The initBME()<\/span> function initializes the BME280 sensor.<\/p>\n\n\n\n
void initBME(){\n if (!bme.begin(0x76)) {\n Serial.println(\"Could not find a valid BME280 sensor, check wiring!\");\n while (1);\n }\n}<\/code><\/pre>\n\n\n\nReading Temperature<\/h4>\n\n\n\n
The readTemperature()<\/span> function reads and returns the temperature from the BME280 sensor.<\/p>\n\n\n\n
float readTemperature() {\n float t = bme.readTemperature();\n return t;\n}<\/code><\/pre>\n\n\n\nReading Humidity<\/h4>\n\n\n\n
The readHumidity()<\/span> function reads and returns the humidity from the BME280 sensor.<\/p>\n\n\n\n
float readHumidity() {\n float h = bme.readHumidity();\n return h;\n}<\/code><\/pre>\n\n\n\nNote: <\/strong> to learn more about getting temperature and humidity from the BME280 sensor, read: ESP8266 with BME280 using Arduino IDE (Pressure, Temperature, Humidity)<\/a>.<\/p>\n\n\n\n
OnDataSent Callback Function<\/h4>\n\n\n\n
The OnDataSent()<\/span> callback function will be executed when a message is sent. In this case, this function prints if the message was successfully delivered or not.<\/p>\n\n\n\n
- GPIO 4<\/span> (D2) -> SDA<\/li><\/ul>\n\n\n
- 2x BME280 sensor<\/a> – BME280 guide for ESP8266<\/a><\/li>\n\n\n\n
- ESPAsyncTCP by ESP32Async<\/a><\/li>\n<\/ul>\n\n\n\n
- ESPAsyncWebServer by ESP32Async<\/a><\/li>\n\n\n\n
- You can set up the same Wi-Fi channel manually, or you can add a simple spinet of code on the sender to set its Wi-Fi channel to the same of the receiver board.<\/li>\n<\/ul>\n\n\n\n
- ESP-NOW Two-Way Communication Between ESP8266 NodeMCU Boards<\/a><\/li>\n\n\n\n