![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP8266-NodeMCU-Web-Server-Server-Sent-Events-SSE-Update-Sensor-Readings-Automatically-Arduino.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nAs 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:<\/p>\n\n\n\n
- \n
- ESP8266 NodeMCU with BME280 Sensor using Arduino IDE (Pressure, Temperature, Humidity)<\/a><\/li>\n<\/ul>\n\n\n\n
We also have a similar Server-Sent Events guide for the ESP32<\/a>.<\/p>\n\n\n\n
Introducing Server-Sent Events (SSE)<\/h2>\n\n\n\n
Server-Sent Events (SSE) allows the client to receive automatic updates from a server via HTTP connection.<\/p>\n\n\n
\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP32-ESP8266-Server-Sent-Events-How-it-Works.png?resize=740%2C772&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThe 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\u2019t send any data to the server after the initial handshake.<\/p>\n\n\n\n
This is useful to send updated sensor readings to the browser. Whenever a new reading is available, the ESP8266 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.<\/p>\n\n\n\n
Important: <\/strong> Server-Sent Events (SSE) are not supported on Internet Explorer.<\/p>\n\n\n\n
Project Overview<\/h2>\n\n\n\n
Here’s the web page we’ll build for this project.<\/p>\n\n\n
\n![\"BME280](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/BME28-Web-Server-with-Server-Sent-Events-Overview.png?resize=790%2C441&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n- \n
- The ESP8266 web server displays three cards with BME280 temperature, humidity and pressure readings;<\/li>\n\n\n\n
- The ESP8266 gets new readings from the sensor every 30 seconds;<\/li>\n\n\n\n
- Whenever a new reading is available, the board (server) sends it to the client using server-sent events;<\/li>\n\n\n\n
- The client receives the data and updates the web page accordingly;<\/li>\n\n\n\n
- This allows the web page to be updated automatically whenever new readings are available.<\/li>\n<\/ul>\n\n\n\n
How it Works?<\/h3>\n\n\n\n
The following diagram summarizes how Server-Sent Events work to update the web page.<\/p>\n\n\n
\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP32-BME280-Web-Server-Server-Sent-Events-How-it-Works.png?resize=877%2C825&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n- \n
- The client initiates the SSE connection and the server uses the event source protocol on the \/events URL to send updates to the client;<\/li>\n\n\n\n
- The ESP8266 gets new sensor readings;<\/li>\n\n\n\n
- It sends the readings as events with the following names to the client: ‘temperature’<\/span>, ‘humidity’<\/span> and ‘pressure’<\/span>;<\/li>\n\n\n\n
- The client has event listeners for the events sent by the server and receives the updated sensor readings on those events;<\/li>\n\n\n\n
- It updates the web page with the newest readings.<\/li>\n<\/ol>\n\n\n\n
Preparing Arduino IDE<\/h2>\n\n\n\n
We\u2019ll program the ESP8266 board using Arduino IDE, so make sure you have it installed in your Arduino IDE.<\/p>\n\n\n\n
- \n
- Installing the ESP8266 NodeMCU Board in Arduino IDE (Windows, Mac OS X, Linux)<\/a><\/li>\n<\/ul>\n\n\n\n
Installing Libraries \u2013 Async Web Server<\/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
Installing Libraries – BME280 Sensor<\/h3>\n\n\n\n
To get readings from the BME280 sensor module, we’ll use the\u00a0Adafruit_BME280 library<\/a>. You also need to install the Adafruit_Sensor library<\/a>. <\/p>\n\n\n\n
You can install these libraries using the Arduino Library Manager. Go to\u00a0Sketch\u00a0<\/strong>>\u00a0Include Library<\/strong>\u00a0>\u00a0Manage Libraries<\/strong>\u00a0and search for the libraries’ names.<\/p>\n\n\n\n
To learn more about the BME280 sensor, read our guide: ESP8266 with BME280 Sensor using Arduino IDE (Pressure, Temperature, Humidity)<\/a>.<\/p>\n\n\n\n
Building the Circuit<\/h2>\n\n\n\n
To exemplify how to use server-sent events with the ESP8266, we’ll send sensor readings from a BME280 sensor to the browser. So, you need to wire a BME280 sensor to your ESP8266.<\/p>\n\n\n\n
Parts Required<\/h3>\n\n\n\n
To complete this tutorial you need the following parts:<\/p>\n\n\n\n
- \n
- BME280 sensor module<\/a><\/li>\n\n\n\n
- ESP8266<\/a> (read <\/span>Best ESP8266 development boards<\/a>)<\/span><\/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\nSchematic – ESP8266 with BME280 using I2C<\/h2>\n\n\n\n
We\u2019re going to use I2C communication with the BME280 sensor module. For that, wire the sensor to the ESP8266 SDA<\/span> and SCL<\/span> pins, as shown in the following schematic diagram. <\/p>\n\n\n
\n![\"Schematic](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP8266-BME280-Arduino-IDE.png?resize=705%2C532&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nRecommended reading:<\/strong> ESP8266 Pinout Reference Guide<\/a><\/p>\n\n\n\n
Code for ESP8266 Web Server using Server-Sent Events (SSE)<\/h2>\n\n\n\n
Copy the following code to your Arduino IDE.<\/p>\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp8266-nodemcu-web-server-sent-events-sse\/\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 <ESP8266WiFi.h>\n#include <ESPAsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <Adafruit_BME280.h>\n#include <Adafruit_Sensor.h>\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\n\n\/\/ Create an Event Source on \/events\nAsyncEventSource events("\/events");\n\n\/\/ Timer variables\nunsigned long lastTime = 0; \nunsigned long timerDelay = 30000;\n\n\/\/ Create a sensor object\nAdafruit_BME280 bme; \/\/ BME280 connect to ESP32 I2C (GPIO 21 = SDA, GPIO 22 = SCL)\n\nfloat temperature;\nfloat humidity;\nfloat pressure;\n\n\/\/ Init BME280\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\nvoid getSensorReadings(){\n temperature = bme.readTemperature();\n \/\/ Convert temperature to Fahrenheit\n \/\/temperature = 1.8 * bme.readTemperature() + 32;\n humidity = bme.readHumidity();\n pressure = bme.readPressure()\/ 100.0F;\n}\n\n\/\/ Initialize WiFi\nvoid initWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n Serial.print("Connecting to WiFi ..");\n while (WiFi.status() != WL_CONNECTED) {\n Serial.print('.');\n delay(1000);\n }\n Serial.println(WiFi.localIP());\n}\n\nString processor(const String& var){\n getSensorReadings();\n \/\/Serial.println(var);\n if(var == "TEMPERATURE"){\n return String(temperature);\n }\n else if(var == "HUMIDITY"){\n return String(humidity);\n }\n else if(var == "PRESSURE"){\n return String(pressure);\n }\n return String();\n}\n\nconst char index_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE HTML><html>\n<head>\n <title>ESP Web Server<\/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 p { font-size: 1.2rem;}\n body { margin: 0;}\n .topnav { overflow: hidden; background-color: #50B8B4; color: white; font-size: 1rem; }\n .content { padding: 20px; }\n .card { background-color: white; box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5); }\n .cards { max-width: 800px; margin: 0 auto; display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }\n .reading { font-size: 1.4rem; }\n <\/style>\n<\/head>\n<body>\n <div class="topnav">\n <h1>BME280 WEB SERVER (SSE)<\/h1>\n <\/div>\n <div class="content">\n <div class="cards">\n <div class="card">\n <p><i class="fas fa-thermometer-half" style="color:#059e8a;"><\/i> TEMPERATURE<\/p><p><span class="reading"><span id="temp">%TEMPERATURE%<\/span> °C<\/span><\/p>\n <\/div>\n <div class="card">\n <p><i class="fas fa-tint" style="color:#00add6;"><\/i> HUMIDITY<\/p><p><span class="reading"><span id="hum">%HUMIDITY%<\/span> %<\/span><\/p>\n <\/div>\n <div class="card">\n <p><i class="fas fa-angle-double-down" style="color:#e1e437;"><\/i> PRESSURE<\/p><p><span class="reading"><span id="pres">%PRESSURE%<\/span> hPa<\/span><\/p>\n <\/div>\n <\/div>\n <\/div>\n<script>\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('temperature', function(e) {\n console.log("temperature", e.data);\n document.getElementById("temp").innerHTML = e.data;\n }, false);\n \n source.addEventListener('humidity', function(e) {\n console.log("humidity", e.data);\n document.getElementById("hum").innerHTML = e.data;\n }, false);\n \n source.addEventListener('pressure', function(e) {\n console.log("pressure", e.data);\n document.getElementById("pres").innerHTML = e.data;\n }, false);\n}\n<\/script>\n<\/body>\n<\/html>)rawliteral";\n\nvoid setup() {\n Serial.begin(115200);\n initWiFi();\n initBME();\n\n \/\/ Handle Web Server\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/html", index_html, processor);\n });\n\n \/\/ Handle Web Server Events\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 if ((millis() - lastTime) > timerDelay) {\n getSensorReadings();\n Serial.printf("Temperature = %.2f \u00baC \\n", temperature);\n Serial.printf("Humidity = %.2f \\n", humidity);\n Serial.printf("Pressure = %.2f hPa \\n", pressure);\n Serial.println();\n\n \/\/ Send Events to the Web Server with the Sensor Readings\n events.send("ping",NULL,millis());\n events.send(String(temperature).c_str(),"temperature",millis());\n events.send(String(humidity).c_str(),"humidity",millis());\n events.send(String(pressure).c_str(),"pressure",millis());\n \n lastTime = millis();\n }\n}\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
Insert your network credentials in the following variables and the code will work straight away.<\/p>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nHow the Code Works<\/h2>\n\n\n\n
Continue reading to learn how the code works or skip to the Demonstration<\/a> section.<\/p>\n\n\n\n
Including Libraries<\/h3>\n\n\n\n
The Adafruit_Sensor<\/span> and Adafruit_BME280<\/span> libraries are needed to interface with the BME280 sensor.<\/p>\n\n\n\n
#include <Adafruit_BME280.h>\n#include <Adafruit_Sensor.h><\/code><\/pre>\n\n\n\nThe WiFi<\/span>, ESPAsyncWebServer<\/span> and AsyncTCP<\/span> libraries are used to create the web server.<\/p>\n\n\n\n
#include <WiFi.h>\n#include \"ESPAsyncWebServer.h\"<\/code><\/pre>\n\n\n\nNetwork Credentials<\/h3>\n\n\n\n
Insert your network credentials in the following variables, so that the ESP8266 can connect to your local network using Wi-Fi.<\/p>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nAsyncWebServer and AsyncEventSource<\/h3>\n\n\n\n
Create an AsyncWebServer<\/span> object on port 80.<\/p>\n\n\n\n
AsyncWebServer server(80);<\/code><\/pre>\n\n\n\nThe following line creates a new event source on \/events<\/span>.<\/p>\n\n\n\n
AsyncEventSource events(\"\/events\");<\/code><\/pre>\n\n\n\nDeclaring Variables<\/h3>\n\n\n\n
The lastTime<\/span> and the timerDelay<\/span> variables will be used to update sensor readings every X number of seconds. As an example, we’ll get new sensor readings every 30 seconds (30000 milliseconds). You can change that delay time in the timerDelay<\/span> variable.<\/p>\n\n\n\n
unsigned long lastTime = 0;\nunsigned long timerDelay = 30000;<\/code><\/pre>\n\n\n\nCreate an Adafruit_BME280<\/span> object called bme<\/span> on the default ESP8266 I2C pins.<\/p>\n\n\n\n
Adafruit_BME280 bme;<\/code><\/pre>\n\n\n\nThe temperature<\/span>, humidity<\/span> and pressure<\/span> float variables will be used to hold BME280 sensor readings.<\/p>\n\n\n\n
float temperature;\nfloat humidity;\nfloat pressure;<\/code><\/pre>\n\n\n\nInitialize BME280<\/h3>\n\n\n\n
The following function can be called to initialize 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\nGet BME280 Readings<\/h3>\n\n\n\n
The getSensorReading()<\/span> function gets temperature, humidity and pressure readings from the BME280 sensor and saves them on the temperature<\/span>, humidity<\/span> and pressure<\/span> variables.<\/p>\n\n\n\n
void getSensorReadings(){\n temperature = bme.readTemperature();\n \/\/ Convert temperature to Fahrenheit\n \/\/temperature = 1.8 * bme.readTemperature() + 32;\n humidity = bme.readHumidity();\n pressure = bme.readPressure()\/ 100.0F;\n}<\/code><\/pre>\n\n\n\nInitialize Wi-Fi<\/h3>\n\n\n\n
The following function sets the ESP8266 as a Wi-Fi station and connects to your router using the ssid and password defined earlier.<\/p>\n\n\n\n
void initWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n Serial.print(\"Connecting to WiFi ..\");\n while (WiFi.status() != WL_CONNECTED) {\n Serial.print('.');\n delay(1000);\n }\n Serial.println(WiFi.localIP());\n}<\/code><\/pre>\n\n\n\nProcessor<\/h3>\n\n\n\n
The processor()<\/span> function replaces any placeholders on the HTML text used to build the web page with the current sensor readings before sending it to the browser.<\/p>\n\n\n\n
String processor(const String& var){\n getSensorReadings();\n \/\/Serial.println(var);\n if(var == \"TEMPERATURE\"){\n return String(temperature);\n }\n else if(var == \"HUMIDITY\"){\n return String(humidity);\n }\n else if(var == \"PRESSURE\"){\n return String(pressure);\n }\n}<\/code><\/pre>\n\n\n\nThis allows us to display the current sensor readings on the web page when you access it for the first time. Otherwise, you would see a blank space until new readings were available (which can take some time depending on the delay time you’ve defined on the code).<\/p>\n\n\n\n
Building 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. <\/p>\n\n\n\n
Note: <\/strong>for the simplicity of this tutorial, we\u2019re placing everything needed to build the web page on the index_html variable that we use on the Arduino sketch. Note that it may be more practical to have separated HTML, CSS and JavaScript files that then you upload to the ESP8266 filesystem and reference them on the code.<\/p>\n\n\n\n
Here\u2019s the content index_html<\/span> variable:<\/p>\n\n\n\n
<!DOCTYPE HTML>\n<html>\n<head>\n <title>ESP Web Server<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n <link rel=\"icon\" href=\"data:,\">\n <style>\n html {\n font-family: Arial; \n display: inline-block; \n text-align: center;\n }\n p { \n font-size: 1.2rem;\n }\n body { \n margin: 0;\n }\n .topnav { \n overflow: hidden; \n background-color: #50B8B4; \n color: white; \n font-size: 1rem; \n }\n .content { \n padding: 20px; \n }\n .card { \n background-color: white; \n box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5); \n }\n .cards { \n max-width: 800px; \n margin: 0 auto; \n display: grid; \n grid-gap: 2rem; \n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }\n .reading { \n font-size: 1.4rem; \n }\n <\/style>\n<\/head>\n<body>\n <div class=\"topnav\">\n <h1>BME280 WEB SERVER (SSE)<\/h1>\n <\/div>\n <div class=\"content\">\n <div class=\"cards\">\n <div class=\"card\">\n <p><i class=\"fas fa-thermometer-half\" style=\"color:#059e8a;\"><\/i> TEMPERATURE<\/p>\n <p><span class=\"reading\"><span id=\"temp\">%TEMPERATURE%<\/span> °C<\/span><\/p>\n <\/div>\n <div class=\"card\">\n <p><i class=\"fas fa-tint\" style=\"color:#00add6;\"><\/i> HUMIDITY<\/p>\n <p><span class=\"reading\"><span id=\"hum\">%HUMIDITY%<\/span> %<\/span><\/p>\n <\/div>\n <div class=\"card\">\n <p><i class=\"fas fa-angle-double-down\" style=\"color:#e1e437;\"><\/i> PRESSURE<\/p><p><span class=\"reading\"><span id=\"pres\">%PRESSURE%<\/span> hPa<\/span><\/p>\n <\/div>\n <\/div>\n <\/div>\n<script>\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('temperature', function(e) {\n console.log(\"temperature\", e.data);\n document.getElementById(\"temp\").innerHTML = e.data;\n }, false);\n\n source.addEventListener('humidity', function(e) {\n console.log(\"humidity\", e.data);\n document.getElementById(\"hum\").innerHTML = e.data;\n }, false);\n\n source.addEventListener('pressure', function(e) {\n console.log(\"pressure\", e.data);\n document.getElementById(\"pres\").innerHTML = e.data;\n }, false);\n}\n<\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\nWe won\u2019t go into detail on how the HTML and CSS works. We\u2019ll just take a look at how to handle the events sent by the server.<\/p>\n\n\n\n
CSS<\/h3>\n\n\n\n
Between the <style><\/span><\/span> <\/style><\/span><\/span> tags we include the styles to style the web page using CSS. Feel free to change it to make the web page look as you wish. We won’t explain how the CSS for this web page works because it is not relevant for this tutorial.<\/p>\n\n\n\n
<style>\n html {\n font-family: Arial; \n display: inline-block; \n text-align: center;\n }\n p { \n font-size: 1.2rem;\n }\n body { \n margin: 0;\n }\n .topnav { \n overflow: hidden; \n background-color: #50B8B4; \n color: white; \n font-size: 1rem; \n }\n .content { \n padding: 20px; \n }\n .card { \n background-color: white; \n box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5); \n }\n .cards { \n max-width: 800px; \n margin: 0 auto; \n display: grid; \n grid-gap: 2rem; \n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }\n .reading { \n font-size: 1.4rem; \n }\n<\/style><\/code><\/pre>\n\n\n\nHTML<\/h3>\n\n\n\n
Between the <body><\/span><\/span> <\/body><\/span><\/span> tags we add the web page content that is visible to the user.<\/p>\n\n\n\n
<body>\n <div class=\"topnav\">\n <h1>BME280 WEB SERVER (SSE)<\/h1>\n <\/div>\n <div class=\"content\">\n <div class=\"cards\">\n <div class=\"card\">\n <p><i class=\"fas fa-thermometer-half\" style=\"color:#059e8a;\"><\/i> TEMPERATURE<\/p>\n <p><span class=\"reading\"><span id=\"temp\">%TEMPERATURE%<\/span> °C<\/span><\/p>\n <\/div>\n <div class=\"card\">\n <p><i class=\"fas fa-tint\" style=\"color:#00add6;\"><\/i> HUMIDITY<\/p>\n <p><span class=\"reading\"><span id=\"hum\">%HUMIDITY%<\/span> %<\/span><\/p>\n <\/div>\n <div class=\"card\">\n <p><i class=\"fas fa-angle-double-down\" style=\"color:#e1e437;\"><\/i> PRESSURE<\/p><p><span class=\"reading\"><span id=\"pres\">%PRESSURE%<\/span> hPa<\/span><\/p>\n <\/div>\n <\/div>\n <\/div><\/code><\/pre>\n\n\n\nThere’s a heading 1 with the content “BME280 WEB SERVER (SSE)”. That’s the text that shows up on the top bar. Feel free to modify that text.<\/p>\n\n\n\n
<h1>BME280 WEB SERVER (SSE)<\/h1><\/code><\/pre>\n\n\n\nThen, we display the sensor readings in separated div tags. Let’s take a quick look at the paragraphs that displays the temperature:<\/p>\n\n\n\n
<p><i class=\"fas fa-thermometer-half\" style=\"color:#059e8a;\"><\/i> TEMPERATURE<\/p>\n<p><span class=\"reading\"><span id=\"temp\">%TEMPERATURE%<\/span> °C<\/span><\/p><\/code><\/pre>\n\n\n\nThe first paragraph simply displays the “TEMPERATURE” text. We define the color and also an icon.<\/p>\n\n\n\n
On the second paragraph, you can see that the %TEMPERATURE%<\/span> placeholder is surrounded by <span id=”temp”><\/span><\/span> <\/span><\/span><\/span> tags. The HTML id<\/span> attribute is used to specify a unique id for an HTML element.<\/p>\n\n\n\n
It is used to point to a specific style or it can be used by JavaScript to access and manipulate the element with that specific id. That’s what we’re going to do. For instance, when the client receives a new event with the latest temperature reading, it updates the HTML element with the id “temp<\/span>” with the new reading.<\/p>\n\n\n\n
A similar process is done to update the other readings.<\/p>\n\n\n\n
JavaScript – EventSource<\/h3>\n\n\n\n
The JavaScript goes between the <script><\/span><\/span> <\/script><\/span><\/span> tags. It is responsible for initializing an EventSource connection with the server and handle the events received from the server.<\/p>\n\n\n\n
<script>\nif (!!window.EventSource) {\n var source = new EventSource('\/events');\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('temperature', function(e) {\n console.log(\"temperature\", e.data);\n document.getElementById(\"temp\").innerHTML = e.data;\n }, false);\n\n source.addEventListener('humidity', function(e) {\n console.log(\"humidity\", e.data);\n document.getElementById(\"hum\").innerHTML = e.data;\n }, false);\n\n source.addEventListener('pressure', function(e) {\n console.log(\"pressure\", e.data);\n document.getElementById(\"pres\").innerHTML = e.data;\n }, false);\n}\n<\/script><\/code><\/pre>\n\n\n\nLet’s take a look at how this works.<\/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\u2019s \/events<\/span>.<\/p>\n\n\n\n
if (!!window.EventSource) {\n var source = new EventSource('\/events');<\/code><\/pre>\n\n\n\nOnce you\u2019ve 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);\n\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 \u201ctemperature<\/span>\u201d.<\/p>\n\n\n\n
source.addEventListener('temperature', function(e) {<\/code><\/pre>\n\n\n\nWhen a new temperature reading is available, the ESP8266 sends an event (\u201ctemperature<\/span>\u201d) to the client. The following lines handle what happens when the browser receives that event.<\/p>\n\n\n\n
console.log(\"temperature\", e.data);\ndocument.getElementById(\"temp\").innerHTML = e.data;<\/code><\/pre>\n\n\n\nBasically, print the new readings on the browser console, and put the received data into the element with the corresponding id (“temp<\/span>“) on the web page.<\/p>\n\n\n\n
A similar processor is done for humidity and pressure.<\/p>\n\n\n\n
source.addEventListener('humidity', function(e) {\n console.log(\"humidity\", e.data);\n document.getElementById(\"hum\").innerHTML = e.data;\n}, false);\n \nsource.addEventListener('pressure', function(e) {\n console.log(\"pressure\", e.data);\n document.getElementById(\"pres\").innerHTML = e.data;\n}, false);\n \nsource.addEventListener('gas', function(e) {\n console.log(\"gas\", e.data);\n document.getElementById(\"gas\").innerHTML = e.data;\n}, false);<\/code><\/pre>\n\n\n\nsetup()<\/h3>\n\n\n\n
In the setup()<\/span>, initialize the Serial Monitor, initialize Wi-Fi and the BME280 sensor.<\/p>\n\n\n\n
Serial.begin(115200);\ninitWiFi();\ninitBME();<\/code><\/pre>\n\n\n\nHandle Requests<\/h4>\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 and pass the processor<\/span> as argument, so that all placeholders are replaced with the latest sensor readings.<\/p>\n\n\n\n
server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send_P(200, \"text\/html\", index_html, processor);\n});<\/code><\/pre>\n\n\n\nServer Event Source<\/h4>\n\n\n\n
Set up the event source on the server.<\/p>\n\n\n\n
\/\/ Handle Web Server Events\nevents.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>, get new sensor readings:<\/p>\n\n\n\n
getSensorReadings();<\/code><\/pre>\n\n\n\nPrint the new readings in the Serial Monitor.<\/p>\n\n\n\n
Serial.printf(\"Temperature = %.2f \u00baC \\n\", temperature);\nSerial.printf(\"Humidity = %.2f % \\n\", humidity);\nSerial.printf(\"Pressure = %.2f hPa \\n\", pressure);\nSerial.println();<\/code><\/pre>\n\n\n\nFinally, send events to the browser with the newest sensor readings to update the web page.<\/p>\n\n\n\n
\/\/ Send Events to the Web Server with the Sensor Readings\nevents.send(\"ping\",NULL,millis());\nevents.send(String(temperature).c_str(),\"temperature\",millis());\nevents.send(String(humidity).c_str(),\"humidity\",millis());\nevents.send(String(pressure).c_str(),\"pressure\",millis());<\/code><\/pre>\n\n\n\nDemonstration<\/h2>\n\n\n\n
After inserting your network credentials on the ssid<\/span> and password<\/span> variables, you can upload the code to your board. Don’t forget to check if you have the right board and COM port selected.<\/p>\n\n\n\n
After uploading the code, open the Serial Monitor at a baud rate of 115200 and press the on-board EN\/RST button. The ESP IP address should be printed.<\/p>\n\n\n
\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/Server-Sent-Events-ESP32-Web-Server-Serial-Monitor-Sensor-Readings.png?resize=669%2C494&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nOpen a browser on your local network and insert the ESP8266 IP address. You should get access to the web page to monitor the sensor readings.<\/p>\n\n\n
\n<\/figure><\/div>\n\n\nThe readings are updated automatically every 30 seconds.<\/p>\n\n\n\n
At the same time, you should get new sensor readings on the Serial Monitor as shown in the previous print screen. Additionally, you can check if the client is receiving the events. On your browser, open the console by pressing Ctrl<\/strong>+Shift<\/strong>+J<\/strong>.<\/p>\n\n\n
\n![\"Server-Sent](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/Server-Sent-Events-Browser-Console-ESP2-Web-Server.png?resize=809%2C559&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWrapping Up<\/h2>\n\n\n\n
In this tutorial you’ve learned how to use Server-Sent Events with the ESP8266. Server-Sent Events allow a web page (client) to get updates from a server. This can be used to automatically display new sensor readings on the web server page when they are available.<\/p>\n\n\n\n
We have a similar tutorial but using the BME680 environmental sensor. You can check the tutorial on the following link:<\/p>\n\n\n\n
- \n
- ESP8266 NodeMCU Web Server with BME680 – Weather Station (Arduino IDE)<\/a><\/li>\n<\/ul>\n\n\n\n
Instead of Server-Sent Events, you can also use the WebSocket protocol<\/a> to keep the web page updated. Take a look at the following tutorial to learn how to set up a WebSocket server with the ESP8266:<\/p>\n\n\n\n
- \n
- ESP8266 NodeMCU WebSocket Server: Control Outputs (Arduino IDE)<\/a><\/span><\/li>\n<\/ul>\n\n\n\n
Learn more about the ESP8266 with our resources:<\/p>\n\n\n\n
- \n
- Home Automation Using ESP8266<\/span><\/a><\/li>\n\n\n\n
- MicroPython Programming with ESP32 and ESP8266<\/a><\/li>\n\n\n\n
- More ESP8266 NodeMCU Projects and Guides\u2026<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
This tutorial shows how to use Server-Sent Events (SSE) in an ESP8266 NodeMCU Web Server programmed with Arduino IDE. SSE allows the browser to receive automatic updates from a server … <\/p>\n
- MicroPython Programming with ESP32 and ESP8266<\/a><\/li>\n\n\n\n
- Home Automation Using ESP8266<\/span><\/a><\/li>\n\n\n\n
- ESP8266 NodeMCU WebSocket Server: Control Outputs (Arduino IDE)<\/a><\/span><\/li>\n<\/ul>\n\n\n\n
- ESP8266<\/a> (read <\/span>Best ESP8266 development boards<\/a>)<\/span><\/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