![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/07\/ESP32-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: ESP32: 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 ESP32 using the default I2C pins.<\/p>\n\n\n Recommended reading: ESP32 Pinout Reference – Which GPIO pins should you use?<\/a><\/p>\n\n\n\n We’ll program the ESP32 board using Arduino IDE. So, make sure you have the ESP32 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 the Libraries via the Arduino Library Manager. Go to\u00a0Sketch\u00a0<\/strong>>\u00a0Include Library<\/strong>\u00a0>\u00a0Manage Libraries<\/strong>\u00a0and search for the libraries’ names to install them.<\/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 ESP32 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 ESP32 I2C pins.<\/p>\n\n\n\n If you want to use SPI communication instead, you need to define the ESP32 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 ESP32 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 ESP32 to your local network and print the ESP32 IP address.<\/p>\n\n\n\n Initialize the BME680 sensor.<\/p>\n\n\n\n When you access the ESP32 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 ESP32. 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 ESP32 on-board RST\/EN button. The ESP32 IP address should be printed in the serial monitor.<\/p>\n\n\n Open a browser in your local network and type the ESP32 IP address. You should get access to the ESP32 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 ESP32 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 ESP32 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 ESP32 to display sensor readings from the BME680 environmental sensor: gas (air quality), temperature, humidity and pressure. … <\/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
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/07\/ESP32-Board-BME680-Gas-sensor-circuit-wiring-diagram-schematics.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 – ESP32 with BME680<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/07\/ESP32_BME680_Wiring_Diagram_I2C.png?resize=786%2C669&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nPreparing Arduino IDE<\/h2>\n\n\n\n
\n
\n
ESP32 BME680 Web Server Code<\/h2>\n\n\n\n
\/*********\r\n Rui Santos & Sara Santos - Random Nerd Tutorials\r\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-bme680-sensor-arduino\/\r\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\r\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n*********\/\r\n\r\n#include <Wire.h>\r\n#include <SPI.h>\r\n#include <Adafruit_Sensor.h>\r\n#include "Adafruit_BME680.h"\r\n#include <WiFi.h>\r\n#include "ESPAsyncWebServer.h"\r\n\r\n\/\/ Replace with your network credentials\r\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\r\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\r\n\r\n\/\/Uncomment if using SPI\r\n\/*#define BME_SCK 18\r\n#define BME_MISO 19\r\n#define BME_MOSI 23\r\n#define BME_CS 5*\/\r\n\r\nAdafruit_BME680 bme; \/\/ I2C\r\n\/\/Adafruit_BME680 bme(BME_CS); \/\/ hardware SPI\r\n\/\/Adafruit_BME680 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK);\r\n\r\nfloat temperature;\r\nfloat humidity;\r\nfloat pressure;\r\nfloat gasResistance;\r\n\r\nAsyncWebServer server(80);\r\nAsyncEventSource events("\/events");\r\n\r\nunsigned long lastTime = 0; \r\nunsigned long timerDelay = 30000; \/\/ send readings timer\r\n\r\nvoid getBME680Readings(){\r\n \/\/ Tell BME680 to begin measurement.\r\n unsigned long endTime = bme.beginReading();\r\n if (endTime == 0) {\r\n Serial.println(F("Failed to begin reading :("));\r\n return;\r\n }\r\n if (!bme.endReading()) {\r\n Serial.println(F("Failed to complete reading :("));\r\n return;\r\n }\r\n temperature = bme.temperature;\r\n pressure = bme.pressure \/ 100.0;\r\n humidity = bme.humidity;\r\n gasResistance = bme.gas_resistance \/ 1000.0;\r\n}\r\n\r\nString processor(const String& var){\r\n getBME680Readings();\r\n \/\/Serial.println(var);\r\n if(var == "TEMPERATURE"){\r\n return String(temperature);\r\n }\r\n else if(var == "HUMIDITY"){\r\n return String(humidity);\r\n }\r\n else if(var == "PRESSURE"){\r\n return String(pressure);\r\n }\r\n else if(var == "GAS"){\r\n return String(gasResistance);\r\n }\r\n}\r\n\r\nconst char index_html[] PROGMEM = R"rawliteral(\r\n<!DOCTYPE HTML><html>\r\n<head>\r\n <title>BME680 Web Server<\/title>\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n <link rel="stylesheet" href="https:\/\/use.fontawesome.com\/releases\/v5.7.2\/css\/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">\r\n <link rel="icon" href="data:,">\r\n <style>\r\n html {font-family: Arial; display: inline-block; text-align: center;}\r\n p { font-size: 1.2rem;}\r\n body { margin: 0;}\r\n .topnav { overflow: hidden; background-color: #4B1D3F; color: white; font-size: 1.7rem; }\r\n .content { padding: 20px; }\r\n .card { background-color: white; box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5); }\r\n .cards { max-width: 700px; margin: 0 auto; display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }\r\n .reading { font-size: 2.8rem; }\r\n .card.temperature { color: #0e7c7b; }\r\n .card.humidity { color: #17bebb; }\r\n .card.pressure { color: #3fca6b; }\r\n .card.gas { color: #d62246; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class="topnav">\r\n <h3>BME680 WEB SERVER<\/h3>\r\n <\/div>\r\n <div class="content">\r\n <div class="cards">\r\n <div class="card temperature">\r\n <h4><i class="fas fa-thermometer-half"><\/i> TEMPERATURE<\/h4><p><span class="reading"><span id="temp">%TEMPERATURE%<\/span> °C<\/span><\/p>\r\n <\/div>\r\n <div class="card humidity">\r\n <h4><i class="fas fa-tint"><\/i> HUMIDITY<\/h4><p><span class="reading"><span id="hum">%HUMIDITY%<\/span> %<\/span><\/p>\r\n <\/div>\r\n <div class="card pressure">\r\n <h4><i class="fas fa-angle-double-down"><\/i> PRESSURE<\/h4><p><span class="reading"><span id="pres">%PRESSURE%<\/span> hPa<\/span><\/p>\r\n <\/div>\r\n <div class="card gas">\r\n <h4><i class="fas fa-wind"><\/i> GAS<\/h4><p><span class="reading"><span id="gas">%GAS%<\/span> KΩ<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<script>\r\nif (!!window.EventSource) {\r\n var source = new EventSource('\/events');\r\n \r\n source.addEventListener('open', function(e) {\r\n console.log("Events Connected");\r\n }, false);\r\n source.addEventListener('error', function(e) {\r\n if (e.target.readyState != EventSource.OPEN) {\r\n console.log("Events Disconnected");\r\n }\r\n }, false);\r\n \r\n source.addEventListener('message', function(e) {\r\n console.log("message", e.data);\r\n }, false);\r\n \r\n source.addEventListener('temperature', function(e) {\r\n console.log("temperature", e.data);\r\n document.getElementById("temp").innerHTML = e.data;\r\n }, false);\r\n \r\n source.addEventListener('humidity', function(e) {\r\n console.log("humidity", e.data);\r\n document.getElementById("hum").innerHTML = e.data;\r\n }, false);\r\n \r\n source.addEventListener('pressure', function(e) {\r\n console.log("pressure", e.data);\r\n document.getElementById("pres").innerHTML = e.data;\r\n }, false);\r\n \r\n source.addEventListener('gas', function(e) {\r\n console.log("gas", e.data);\r\n document.getElementById("gas").innerHTML = e.data;\r\n }, false);\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>)rawliteral";\r\n\r\nvoid setup() {\r\n Serial.begin(115200);\r\n\r\n \/\/ Set the device as a Station and Soft Access Point simultaneously\r\n WiFi.mode(WIFI_AP_STA);\r\n \r\n \/\/ Set device as a Wi-Fi Station\r\n WiFi.begin(ssid, password);\r\n while (WiFi.status() != WL_CONNECTED) {\r\n delay(1000);\r\n Serial.println("Setting as a Wi-Fi Station..");\r\n }\r\n Serial.print("Station IP Address: ");\r\n Serial.println(WiFi.localIP());\r\n Serial.println();\r\n\r\n \/\/ Init BME680 sensor\r\n if (!bme.begin()) {\r\n Serial.println(F("Could not find a valid BME680 sensor, check wiring!"));\r\n while (1);\r\n }\r\n \/\/ Set up oversampling and filter initialization\r\n bme.setTemperatureOversampling(BME680_OS_8X);\r\n bme.setHumidityOversampling(BME680_OS_2X);\r\n bme.setPressureOversampling(BME680_OS_4X);\r\n bme.setIIRFilterSize(BME680_FILTER_SIZE_3);\r\n bme.setGasHeater(320, 150); \/\/ 320*C for 150 ms\r\n\r\n \/\/ Handle Web Server\r\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\r\n request->send(200, "text\/html", index_html, processor);\r\n });\r\n\r\n \/\/ Handle Web Server Events\r\n events.onConnect([](AsyncEventSourceClient *client){\r\n if(client->lastId()){\r\n Serial.printf("Client reconnected! Last message ID that it got is: %u\\n", client->lastId());\r\n }\r\n \/\/ send event with message "hello!", id current millis\r\n \/\/ and set reconnect delay to 1 second\r\n client->send("hello!", NULL, millis(), 10000);\r\n });\r\n server.addHandler(&events);\r\n server.begin();\r\n}\r\n\r\nvoid loop() {\r\n if ((millis() - lastTime) > timerDelay) {\r\n getBME680Readings();\r\n Serial.printf("Temperature = %.2f \u00baC \\n", temperature);\r\n Serial.printf("Humidity = %.2f % \\n", humidity);\r\n Serial.printf("Pressure = %.2f hPa \\n", pressure);\r\n Serial.printf("Gas Resistance = %.2f KOhm \\n", gasResistance);\r\n Serial.println();\r\n\r\n \/\/ Send Events to the Web Server with the Sensor Readings\r\n events.send("ping",NULL,millis());\r\n events.send(String(temperature).c_str(),"temperature",millis());\r\n events.send(String(humidity).c_str(),"humidity",millis());\r\n events.send(String(pressure).c_str(),"pressure",millis());\r\n events.send(String(gasResistance).c_str(),"gas",millis());\r\n \r\n lastTime = millis();\r\n }\r\n}\r\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 <WiFi.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 18\n#define BME_MISO 19\n#define BME_MOSI 23\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-ESP32-Arduino-IDE.png?resize=926%2C828&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
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/07\/ESP32-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