![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/07\/ESP8266-NodeMCU-BME680-Gas-sensor-humidity-barometric-pressure-ambient-temperature-gas-air-quality-Arduino-IDE-Web-Server.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nTo build the web server we\u2019ll use the ESP Async Web Server library that provides an easy way to build an asynchronous web server.<\/p>\n\n\n\n
BME680 Environmental Sensor<\/h2>\n\n\n\n
The BME680 is an environmental sensor that combines gas, temperature, humidity and pressure sensors. The gas sensor can detect a broad range of gases like volatile organic compounds (VOC). For this reason, the BME680 can be used in indoor air quality control.<\/p>\n\n\n
![\"BME680](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/07\/BME680-Gas-sensor-humidity-barometric-pressure-ambient-temperature-gas-air-quality-front.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThe BME680 contains a MOX (Metal-oxide) sensor that detects VOCs in the air. This sensor gives you a qualitative idea of the sum of VOCs\/contaminants<\/strong> in the surrounding air. As a raw signal, the BME680 outputs resistance values. These values change due to variations in VOC concentrations:<\/p>\n\n\n For more information about the BME680, read our getting started guide: ESP8266 NodeMCU: BME680 Environmental Sensor using Arduino IDE (Gas, Pressure, Humidity, Temperature)<\/a>.<\/p>\n\n\n\n To complete this tutorial you need the following parts:<\/p>\n\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> The BME680 can communicate using I2C or SPI communication protocols. In this tutorial, we’ll use I2C communication protocol.<\/p>\n\n\n\n Follow the next schematic diagram to wire the BME680 to the ESP8266 using the default I2C pins.<\/p>\n\n\n\n Recommended reading: ESP8266 Pinout Reference: Which GPIO pins should you use?<\/a><\/p>\n\n\n\n We’ll program the ESP8266 board using Arduino IDE. So, make sure you have the ESP8266 add-on installed. Follow the next tutorial:<\/p>\n\n\n\n You also need to install the following libraries.<\/p>\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 Open your Arduino IDE and copy the following code. To make it work, you need to insert your network credentials: SSID and password.<\/p>\n\n\n View 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 Read this section to learn how the code works, or skip to the next section<\/a>.<\/p>\n\n\n\n Start by including the necessary libraries. The Wire<\/span> library is needed for I2C communication protocol. We also include the SPI<\/span> library if you want to use SPI communication instead. <\/p>\n\n\n\n The Adafruit_Sensor<\/span> and Adafruit_BME680<\/span> libraries are needed to interface with the BME680 sensor.<\/p>\n\n\n\n The WiFi<\/span> and ESPAsyncWebServer<\/span> libraries are used to create the web server.<\/p>\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 Create an Adafruit_BME680<\/span> object called bme<\/span> on the default ESP8266 I2C pins.<\/p>\n\n\n\n If you want to use SPI communication instead, you need to define the ESP8266 SPI pins on the following lines (to uncomment remove the \/*<\/span> and *\/<\/span>):<\/p>\n\n\n\n And then, create an Adafruit_BME680<\/span> object using those pins (to uncomment remove the \/\/<\/span>).<\/p>\n\n\n\n The temperature<\/span>, humidity<\/span>, pressure<\/span> and gasResistance<\/span> float variables will be used to hold BME680 sensor readings.<\/p>\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 Create an Async Web Server on port 80.<\/p>\n\n\n\n To automatically display the information on the web server when a new reading arrives, we\u2019ll 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 Server-Sent Events allow a web page (client) to get updates from a server. We\u2019ll use this to automatically display new readings on the web server page when new BME680 readings are available.<\/p>\n\n\n\n Important: <\/strong> Server-sent events are not supported on Internet Explorer.<\/p>\n\n\n\n The getBME680Reading()<\/span> function gets gas, temperature, humidity and pressure readings from the BME680 sensor and saves them on the gasResistance<\/span>, temperature<\/span>, humidity<\/span> and pressure<\/span> variables.<\/p>\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.<\/p>\n\n\n\n This 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 The index_html<\/span> variable contains all the HTML, CSS and JavaScript to build the web page. We 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 Let’s take a quick look at the line that displays the temperature:<\/p>\n\n\n\n You can see that the %TEMPERATURE%<\/span> placeholder is surrounded by <span id=”temp”><\/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. <\/p>\n\n\n\n For instance, when the web server receives a new event with the latest temperature reading, we’ll update 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 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 Once 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 Then, add the event listener for \u201ctemperature<\/span>\u201d.<\/p>\n\n\n\n When 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 Basically, 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, pressure and gas resistance.<\/p>\n\n\n\n In the setup()<\/span>, initialize the Serial Monitor.<\/p>\n\n\n\n Connect the ESP8266 to your local network and print the ESP8266 IP address.<\/p>\n\n\n\n Initialize the BME680 sensor.<\/p>\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 Set up the event source on the server.<\/p>\n\n\n\n Finally, start the server.<\/p>\n\n\n\n In the loop()<\/span>, get new sensor readings:<\/p>\n\n\n\n Print the new readings in the Serial Monitor.<\/p>\n\n\n\n Finally, send events to the browser with the newest sensor readings to update the web page.<\/p>\n\n\n\n The following diagram summarizes how Server-Sent Events work to update the web page.<\/p>\n\n\n Now, upload the code to your ESP8266. Make sure you have the right board and COM port selected.<\/p>\n\n\n\n After uploading, open the Serial Monitor at a baud rate of 115200. Press the ESP8266 on-board RST\/EN button. The IP address should be printed in the serial monitor.<\/p>\n\n\n Open a browser in your local network and type the ESP8266 IP address. You should get access to the ESP8266 web server with the latest BME680 readings.<\/p>\n\n\n The readings are updated automatically using Server-Sent Events.<\/p>\n\n\n In this tutorial you’ve learned how to build an asynchronous web server weather station with the ESP8266 to display BME680 sensor readings – gas (air quality), temperature, humidity and pressure – and how to update the readings automatically on the web page using Server-Sent Events.<\/p>\n\n\n\n We have other web server tutorials that you may like:<\/p>\n\n\n\n We hope you\u2019ve found this project interesting. Learn more about the ESP8266 with our resources:<\/p>\n\n\n\n Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":" This tutorial shows how to build a web server weather station with the ESP8266 NodeMCU to display sensor readings from the BME680 environmental sensor: gas (air quality), temperature, humidity and … <\/p>\n![\"BME680](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/07\/BME680-Gas-Sensor-Resistance-How-It-Works.jpg?resize=1112%2C726&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
Parts Required<\/h2>\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/07\/ESP8266-NodeMCU-Board-BME680-Gas-sensor-circuit-wiring-diagram-schematics-1.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![](\"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 BME680<\/h2>\n\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/07\/ESP8266-BME680-Environmental-Sensor-Wiring-Diagram-I2C-1.png?resize=831%2C531&quality=100&strip=all&ssl=1\")
<\/figure>\n\n\n\nPreparing Arduino IDE<\/h2>\n\n\n\n
\n
\n
ESP8266 BME680 Web Server Code<\/h2>\n\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp8266-nodemcu-bme680-sensor-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\n#include <Wire.h>\n#include <SPI.h>\n#include <Adafruit_Sensor.h>\n#include "Adafruit_BME680.h"\n#include <ESP8266WiFi.h>\n#include "ESPAsyncWebServer.h"\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\n\/\/Uncomment if using SPI\n\/*#define BME_SCK 14\n#define BME_MISO 12\n#define BME_MOSI 13\n#define BME_CS 15*\/\n\nAdafruit_BME680 bme; \/\/ I2C\n\/\/Adafruit_BME680 bme(BME_CS); \/\/ hardware SPI\n\/\/Adafruit_BME680 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK);\n\nfloat temperature;\nfloat humidity;\nfloat pressure;\nfloat gasResistance;\n\nAsyncWebServer server(80);\nAsyncEventSource events("\/events");\n\nunsigned long lastTime = 0; \nunsigned long timerDelay = 30000; \/\/ send readings timer\n\nvoid getBME680Readings(){\n \/\/ Tell BME680 to begin measurement.\n unsigned long endTime = bme.beginReading();\n if (endTime == 0) {\n Serial.println(F("Failed to begin reading :("));\n return;\n }\n if (!bme.endReading()) {\n Serial.println(F("Failed to complete reading :("));\n return;\n }\n temperature = bme.temperature;\n pressure = bme.pressure \/ 100.0;\n humidity = bme.humidity;\n gasResistance = bme.gas_resistance \/ 1000.0;\n}\n\nString processor(const String& var){\n getBME680Readings();\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 else if(var == "GAS"){\n return String(gasResistance);\n }\n return String();\n}\n\nconst char index_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE HTML><html>\n<head>\n <title>BME680 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: #4B1D3F; 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(300px, 1fr)); }\n .reading { font-size: 2.8rem; }\n .card.temperature { color: #0e7c7b; }\n .card.humidity { color: #17bebb; }\n .card.pressure { color: #3fca6b; }\n .card.gas { color: #d62246; }\n <\/style>\n<\/head>\n<body>\n <div class="topnav">\n <h3>BME680 WEB SERVER<\/h3>\n <\/div>\n <div class="content">\n <div class="cards">\n <div class="card temperature">\n <h4><i class="fas fa-thermometer-half"><\/i> TEMPERATURE<\/h4><p><span class="reading"><span id="temp">%TEMPERATURE%<\/span> °C<\/span><\/p>\n <\/div>\n <div class="card humidity">\n <h4><i class="fas fa-tint"><\/i> HUMIDITY<\/h4><p><span class="reading"><span id="hum">%HUMIDITY%<\/span> %<\/span><\/p>\n <\/div>\n <div class="card pressure">\n <h4><i class="fas fa-angle-double-down"><\/i> PRESSURE<\/h4><p><span class="reading"><span id="pres">%PRESSURE%<\/span> hPa<\/span><\/p>\n <\/div>\n <div class="card gas">\n <h4><i class="fas fa-wind"><\/i> GAS<\/h4><p><span class="reading"><span id="gas">%GAS%<\/span> KΩ<\/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 source.addEventListener('gas', function(e) {\n console.log("gas", e.data);\n document.getElementById("gas").innerHTML = e.data;\n }, false);\n}\n<\/script>\n<\/body>\n<\/html>)rawliteral";\n\nvoid setup() {\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.println();\n\n \/\/ Init BME680 sensor\n if (!bme.begin()) {\n Serial.println(F("Could not find a valid BME680 sensor, check wiring!"));\n while (1);\n }\n \/\/ Set up oversampling and filter initialization\n bme.setTemperatureOversampling(BME680_OS_8X);\n bme.setHumidityOversampling(BME680_OS_2X);\n bme.setPressureOversampling(BME680_OS_4X);\n bme.setIIRFilterSize(BME680_FILTER_SIZE_3);\n bme.setGasHeater(320, 150); \/\/ 320*C for 150 ms\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 getBME680Readings();\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.printf("Gas Resistance = %.2f KOhm \\n", gasResistance);\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 events.send(String(gasResistance).c_str(),"gas",millis());\n \n lastTime = millis();\n }\n}\n<\/code><\/pre>\n\tconst 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
Including Libraries<\/h3>\n\n\n\n
#include <Wire.h>\n#include <SPI.h><\/code><\/pre>\n\n\n\n#include <Adafruit_Sensor.h>\n#include \"Adafruit_BME680.h\"<\/code><\/pre>\n\n\n\n#include <ESP8266WiFi.h>\n#include \"ESPAsyncWebServer.h\"<\/code><\/pre>\n\n\n\nNetwork Credentials<\/h3>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nI2C Communication<\/h3>\n\n\n\n
Adafruit_BME680 bme; \/\/ I2C<\/code><\/pre>\n\n\n\n\/*#define BME_SCK 14\n#define BME_MISO 12\n#define BME_MOSI 13\n#define BME_CS 15*\/<\/code><\/pre>\n\n\n\n\/\/Adafruit_BME680 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK);<\/code><\/pre>\n\n\n\nDeclaring Variables<\/h3>\n\n\n\n
float temperature;\nfloat humidity;\nfloat pressure;\nfloat gasResistance;<\/code><\/pre>\n\n\n\nunsigned long lastTime = 0;\nunsigned long timerDelay = 30000;<\/code><\/pre>\n\n\n\nAsyncWebServer server(80);<\/code><\/pre>\n\n\n\nCreate Event Source<\/h3>\n\n\n\n
AsyncEventSource events(\"\/events\");<\/code><\/pre>\n\n\n\nGet BME680 Readings<\/h3>\n\n\n\n
void getBME680Readings(){\n \/\/ Tell BME680 to begin measurement.\n unsigned long endTime = bme.beginReading();\n if (endTime == 0) {\n Serial.println(F(\"Failed to begin reading :(\"));\n return;\n }\n if (!bme.endReading()) {\n Serial.println(F(\"Failed to complete reading :(\"));\n return;\n }\n temperature = bme.temperature;\n pressure = bme.pressure \/ 100.0;\n humidity = bme.humidity;\n gasResistance = bme.gas_resistance \/ 1000.0;\n}<\/code><\/pre>\n\n\n\nProcessor<\/h2>\n\n\n\n
String processor(const String& var){\n getBME680Readings();\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 else if(var == \"GAS\"){\n return String(gasResistance);\n }\n}<\/code><\/pre>\n\n\n\nBuilding the Web Page<\/h3>\n\n\n\n
<h4><i class=\"fas fa-thermometer-half\"><\/i> TEMPERATURE<\/h4><p><span class=\"reading\"><span id=\"temp\">%TEMPERATURE%<\/span> °C<\/span><\/p><\/code><\/pre>\n\n\n\nHandle Events<\/h4>\n\n\n\n
if (!!window.EventSource) {\n var source = new EventSource('\/events');<\/code><\/pre>\n\n\n\nsource.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\nsource.addEventListener('temperature', function(e) {<\/code><\/pre>\n\n\n\nconsole.log(\"temperature\", e.data);\ndocument.getElementById(\"temp\").innerHTML = e.data;<\/code><\/pre>\n\n\n\nsource.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
Serial.begin(115200);<\/code><\/pre>\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.println();<\/code><\/pre>\n\n\n\n\/\/ Init BME680 sensor\nif (!bme.begin()) {\n Serial.println(F(\"Could not find a valid BME680 sensor, check wiring!\"));\n while (1);\n}\n\/\/ Set up oversampling and filter initialization\nbme.setTemperatureOversampling(BME680_OS_8X);\nbme.setHumidityOversampling(BME680_OS_2X);\nbme.setPressureOversampling(BME680_OS_4X);\nbme.setIIRFilterSize(BME680_FILTER_SIZE_3);\nbme.setGasHeater(320, 150); \/\/ 320*C for 150 ms<\/code><\/pre>\n\n\n\nHandle Requests<\/h4>\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
\/\/ 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\nserver.begin();<\/code><\/pre>\n\n\n\nloop()<\/h3>\n\n\n\n
getBME680Readings();<\/code><\/pre>\n\n\n\nSerial.printf(\"Temperature = %.2f \u00baC \\n\", temperature);\nSerial.printf(\"Humidity = %.2f % \\n\", humidity);\nSerial.printf(\"Pressure = %.2f hPa \\n\", pressure);\nSerial.printf(\"Gas Resistance = %.2f KOhm \\n\", gasResistance);\nSerial.println();<\/code><\/pre>\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());\nevents.send(String(gasResistance).c_str(),\"gas\",millis());<\/code><\/pre>\n\n\n\n![\"Update](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/07\/Server-Sent-Events-BME680-Web-server-ESP8266-NodeMCU.jpg?resize=950%2C900&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nUploading the Code<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/07\/ESP32-IP-Address-Serial-Monitor.png?resize=764%2C447&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nDemonstration<\/h2>\n\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/07\/ESP8266-NodeMCU-BME680-Gas-sensor-Web-Server-Demonstration.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/07\/ESP32-ESP8266-NodeMCU-Web-Server-with-BME680-Gas-sensor.jpg?resize=378%2C750&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWrapping Up <\/h2>\n\n\n\n
\n
\n