ESP32 Web Server using Server-Sent Events (Update Sensor Readings Automatically)

This tutorial shows how to use Server-Sent Events (SSE) in an ESP32 Web Server programmed with Arduino IDE. SSE allows the browser to receive automatic updates from a server via HTTP connection. This is useful to send updated sensor readings to the browser, for example. Whenever a new reading is available, the ESP32 sends it to the client and the web page can be updated automatically without the need to make additional requests.
As an example, we’ll build a web server that displays sensor readings from a BME280 temperature, humidity and pressure sensor. To learn more about the BME280, read our guide:
ESP32 with BME280 Sensor using Arduino IDE (Pressure, Temperature, Humidity)
We also have a similar
Server-Sent Events guide for the ESP8266
Introducing Server-Sent Events (SSE)
Server-Sent Events (SSE) allows the client to receive automatic updates from a server via HTTP connection.
The client initiates the SSE connection and the server uses the event source protocol to send updates to the client. The client will receive updates from the server, but it can’t send any data to the server after the initial handshake.
This is useful to send updated sensor readings to the browser. Whenever a new reading is available, the ESP32 sends it to the client and the web page can be updated automatically without the need for further requests. Instead of sensor readings, you can send any data that might be useful for your project like GPIO states, notifications when motion is detected, etc.
Important:
Server-Sent Events (SSE) are not supported on Internet Explorer.
Project Overview
Here’s the web page we’ll build for this project.
The ESP32 web server displays three cards with BME280 temperature, humidity and pressure readings;
The ESP32 gets new readings from the sensor every 30 seconds;
Whenever a new reading is available, the board (server) sends it to the client using server-sent events;
The client receives the data and updates the web page accordingly;
This allows the web page to be updated automatically whenever new readings are available.
How it Works?
The following diagram summarizes how Server-Sent Events work to update the web page.
The client initiates the SSE connection and the server uses the event source protocol on the /events URL to send updates to the client;
The ESP32 gets new sensor readings;
It sends the readings as events with the following names to the client:
‘temperature’
‘humidity’
and
‘pressure’
;
The client has event listeners for the events sent by the server and receives the updated sensor readings on those events;
It updates the web page with the newest readings.
Preparing Arduino IDE
We’ll program the
ESP32
board using Arduino IDE, so make sure you have it installed in your Arduino IDE.
Installing the ESP32 Board in Arduino IDE (Windows, Mac OS X, Linux)
Installing Libraries – Async Web Server
To build the web server we’ll use the
ESPAsyncWebServer
(by ESP32Async) library. This library needs the
AsyncTCP
(by ESP32Async).
You can install these libraries in the Arduino Library Manager. Open the Library Manager by clicking the Library icon at the left sidebar.
ESPAsyncWebServer
and install the
ESPAsyncWebServer by ESP32Async
Then, install the AsyncTCP library. Search for
AsyncTCP
and install the
AsyncTCP by ESP32Async
Installing Libraries – BME280 Sensor
To get readings from the BME280 sensor module, we’ll use the
Adafruit_BME280 library
. You also need to install the
Adafruit_Sensor library
You can also install those libraries via the Arduino IDE Library Manager.
To learn more about the BME280 sensor, read our guide:
ESP32 with BME280 Sensor using Arduino IDE (Pressure, Temperature, Humidity)
Building the Circuit
To exemplify how to use server-sent events with the ESP32, we’ll send sensor readings from a BME280 sensor to the browser. So, you need to wire a BME280 sensor to your ESP32.
Parts Required
To complete this tutorial you need the following parts:
BME280 sensor module
ESP32
(read
Best ESP32 development boards
)
Breadboard
Jumper wires
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!
Schematic Diagram
We’re going to use I2C communication with the BME280 sensor module. For that, wire the sensor to the default ESP32 SCL (
GPIO 22
) and SDA (
GPIO 21
) pins, as shown in the following schematic diagram.
Recommended reading:
ESP32 Pinout Reference: Which GPIO pins should you use?
Code for ESP32 Web Server using Server-Sent Events (SSE)
Copy the following code to your Arduino IDE.
/*********
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 `AsyncTCP.h`
#include `ESPAsyncWebServer.h`
#include `Adafruit_BME280.h`
#include `Adafruit_Sensor.h`

// Replace with your network credentials
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";
const char* password = \"REPLACE_WITH_YOUR_PASSWORD\";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

// Create an Event Source on /events
AsyncEventSource events(\"/events\");

// Timer variables
unsigned long lastTime = 0;
unsigned long timerDelay = 30000;

// Create a sensor object
Adafruit_BME280 bme; // BME280 connect to ESP32 I2C (GPIO 21 = SDA, GPIO 22 = SCL)

float temperature;
float humidity;
float pressure;

// Init BME280
void initBME(){
if (!bme.begin(0x76)) {
Serial.println(\"Could not find a valid BME280 sensor, check wiring!\");
while (1);
}
}

void getSensorReadings(){
temperature = bme.readTemperature();
// Convert temperature to Fahrenheit
//temperature = 1.8 * bme.readTemperature() + 32;
humidity = bme.readHumidity();
pressure = bme.readPressure()/ 100.0F;
}

// Initialize WiFi
void initWiFi() {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print(\"Connecting to WiFi ..\");
while (WiFi.status() != WL_CONNECTED) {
Serial.print('.');
delay(1000);
}
Serial.println(WiFi.localIP());
}

String processor(const String& var){
getSensorReadings();
//Serial.println(var);
if(var == \"TEMPERATURE\"){
return String(temperature);
}
else if(var == \"HUMIDITY\"){
return String(humidity);
}
else if(var == \"PRESSURE\"){
return String(pressure);
}
return String();
}

const char index_html[] PROGMEM = R\"rawliteral(
<!DOCTYPE HTML><html>
<head>
<title>ESP Web Server</title>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<link rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.7.2/css/all.css\" integrity=\"sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr\" crossorigin=\"anonymous\">
<link rel=\"icon\" href=\"data:,\">
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
p { font-size: 1.2rem;}
body { margin: 0;}
.topnav { overflow: hidden; background-color: #50B8B4; color: white; font-size: 1rem; }
.content { padding: 20px; }
.card { background-color: white; box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5); }
.cards { max-width: 800px; margin: 0 auto; display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.reading { font-size: 1.4rem; }
</style>
</head>
<body>
<div class=\"topnav\">
BME280 WEB SERVER (SSE)</h1>
</div>
<div class=\"content\">
<div class=\"cards\">
<div class=\"card\">
<i class=\"fas fa-thermometer-half\" style=\"color:#059e8a;\"></i> TEMPERATURE</p><span class=\"reading\"><span id=\"temp\">%TEMPERATURE%</span> °C</span></p>