![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/04\/ESP32-Websocket-Server-Sensor-Readings.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nTo learn more about building web servers with the ESP32 from scratch, check out our eBook: Build Web Servers with the ESP32 and ESP8266<\/a>.<\/p>\n\n\n\n Table of Contents<\/strong><\/p>\n\n\n\n Throughout this tutorial, we’ll cover the following main topics:<\/p>\n\n\n\n We have a similar tutorial for the ESP8266 board: ESP8266 NodeMCU WebSocket Server: Display Sensor Readings<\/a><\/p>\n\n\n\n A WebSocket is a persistent connection between a client and a server that allows bidirectional communication between both parties using a TCP connection. This means you can send data from the client to the server and from the server to the client at any given time. <\/p>\n\n\n The client establishes a WebSocket connection with the server through a process known as WebSocket handshake<\/em>. The handshake starts with an HTTP request\/response, allowing servers to handle HTTP connections as well as WebSocket connections on the same port. Once the connection is established, the client and the server can send WebSocket data in full duplex mode.<\/p>\n\n\n\n Using the WebSockets protocol, the server (ESP32 board) can send information to the client or to all clients without being requested. This also allows us to send information to the web browser when a change occurs.<\/p>\n\n\n\n This change can be something that happened on the web page (you clicked a button) or something that happened on the ESP32 side like pressing a physical button on a circuit, or new sensor readings available.<\/p>\n\n\n\n Learn how to control the ESP32 outputs via WebSocket protocol: ESP32 WebSocket Server: Control Outputs (Arduino IDE)<\/a>.<\/p>\n\n\n\n Here’s the web page we’ll build for this project.<\/p>\n\n\n Before proceeding with this tutorial, make sure you check all the following prerequisites.<\/p>\n\n\n\n To follow this project you need:<\/p>\n\n\n\n For this example, we’ll use a BME280 sensor, but you can use any other sensor you’re familiar with.<\/p>\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> We\u2019ll program the ESP32 using Arduino IDE. So, you must have the ESP32 add-on installed. Follow the next tutorial if you haven\u2019t already:<\/p>\n\n\n\n If you want to use VS Code with the PlatformIO extension, follow the next tutorial instead to learn how to program the ESP32:<\/p>\n\n\n\n To upload the HTML, CSS, and JavaScript files needed to build this project to the ESP32 flash memory (LittleFS), we\u2019ll use a plugin for Arduino IDE: LittleFS<\/strong> Filesystem uploader<\/strong>. Follow the next tutorial to install the filesystem uploader plugin if you haven’t already:<\/p>\n\n\n\n If you\u2019re using VS Code with the PlatformIO extension, read the following tutorial to learn how to upload files to the filesystem:<\/p>\n\n\n\n To build this project, you need to install the following libraries:<\/p>\n\n\n\n You can install the first two libraries using the Arduino Library Manager. Go to Sketch <\/strong>> Include Library<\/strong> > Manage Libraries<\/strong> and search for the library name.<\/p>\n\n\n\n To demonstrate how to display sensor readings on a web server with the ESP32, we’ll send sensor readings from a BME280 sensor to the browser. You need to wire a BME280 sensor to your ESP32, but you can also use any other sensor you’re familiar with.<\/p>\n\n\n\n We\u2019re going to use I2C communication with the BME280 sensor module. For that, wire the sensor to the default ESP32 SCL (GPIO 22<\/span>) and SDA (GPIO 21<\/span>) pins, as shown in the following schematic diagram.<\/p>\n\n\n Recommended reading: ESP32 Pinout Reference: Which GPIO pins should you use?<\/a><\/p>\n\n\n\n To keep the project organized and make it easier to understand, we\u2019ll create four files to build the web server:<\/p>\n\n\n\n You should save the HTML, CSS, and JavaScript files inside a folder called data<\/strong> <\/em>inside the Arduino sketch folder, as shown in the previous diagram. We\u2019ll upload these files to the ESP32 filesystem (LittleFS).<\/p>\n\n\n\n You can download all project files:<\/strong><\/p>\n\n\n\n Copy the following to the index.html<\/span> file.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n We won’t go into much detail about the content of the HTML file. Just the relevant parts.<\/p>\n\n\n\n The following lines display a card for the temperature.<\/p>\n\n\n\n The temperature will show up in the following paragraph between the <span><\/span> tags. Notice that you need a unique id for that HTML tag so that later we know how to refer to this HTML element. In this case, the unique id is temperature<\/span>.<\/p>\n\n\n\n We do a similar procedure for the humidity and pressure. The unique ids for the HTML elements where we’ll display the humidity and pressure are humidity<\/span> and pressure<\/span>.<\/p>\n\n\n\n Copy the following to the style.css<\/span> file. Feel free to change it to make the web page look as you wish. We won\u2019t explain how the CSS for this web page works because it is not relevant for this tutorial.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Copy the following to the script.js<\/span> file.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Here\u2019s a list of what this code does:<\/p>\n\n\n\n Let\u2019s take a look at this JavaScript code to see how it works.<\/p>\n\n\n\n The gateway is the entry point to the WebSocket interface. window.location.hostname<\/span> gets the current page address (the web server IP address).<\/p>\n\n\n\n Create a new global variable called websocket<\/span>.<\/p>\n\n\n\n Add an event listener that will call the onload<\/span> function when the web page loads.<\/p>\n\n\n\n The onload()<\/span> function calls the initWebSocket()<\/span> function to initialize a WebSocket connection with the server.<\/p>\n\n\n\n The initWebSocket()<\/span> function initializes a WebSocket connection on the gateway defined earlier. We also assign several callback functions for when the WebSocket connection is opened, closed, or when a message is received. <\/p>\n\n\n\n Note that when the WebSocket connection is open, we’ll call the getReadings<\/span> function.<\/p>\n\n\n\n The getReadings()<\/span> function sends a message to the server getReadings<\/span> to get the current sensor readings. Then, we must handle what happens when we receive that message on the server side (ESP32).<\/p>\n\n\n\n We handle the messages received via WebSocket protocol on the onMessage()<\/span> function.<\/p>\n\n\n\n The server sends the readings in JSON format, for example:<\/p>\n\n\n\n The onMessage()<\/span> function simply goes through all the key values (temperature<\/span>, humidity<\/span>, and pressure<\/span>) and places them in the corresponding places on the HTML page. In this case, the keys have the same name as the ids we’ve defined on the HTML page. So, we can simply do something like this:<\/p>\n\n\n\n Copy the following code to your Arduino IDE.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n\n
\n
Introducing WebSocket Protocol<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP3-ESP82662-WebSocket-Server-How-it-Works-f.png?resize=727%2C785&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nProject Overview<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/04\/ESP-Websocket-Server-Display-Sensor-Readings-Web-Browser-ESP32.png?resize=787%2C419&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
How does it work?<\/h3>\n\n\n\n
\n
\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/04\/Websocket-Server-ESP32-sensor-readings-how-it-works-1.png?resize=1024%2C286&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/04\/Websocket-Server-ESP32-sensor-readings-how-it-works.png?resize=1024%2C286&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nPrerequisites<\/h2>\n\n\n\n
1) Parts Required<\/h3>\n\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\n2) Arduino IDE and ESP32 Boards Add-on<\/h3>\n\n\n\n
\n
\n
3) Filesystem Uploader Plugin<\/h3>\n\n\n\n
\n
\n
4) Libraries<\/h3>\n\n\n\n
\n
Building the Circuit<\/h2>\n\n\n\n
Schematic Diagram<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP32-BME280-Sensor-Temperature-Humidity-Pressure-Wiring-Diagram-Circuit_f.png?resize=675%2C670&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nOrganizing Your Files<\/h2>\n\n\n\n
\n
![\"Organizing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/folder-structure.png?resize=601%2C358&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
HTML File<\/h2>\n\n\n\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <title>ESP IOT DASHBOARD<\/title>\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n <link rel="icon" type="image\/png" href="favicon.png">\r\n <link rel="stylesheet" type="text\/css" href="style.css">\r\n <\/head>\r\n <body>\r\n <div class="topnav">\r\n <h1>SENSOR READINGS (WEBSOCKET)<\/h1>\r\n <\/div>\r\n <div class="content">\r\n <div class="card-grid">\r\n <div class="card">\r\n <p class="card-title"><i class="fas fa-thermometer-threequarters" style="color:#059e8a;"><\/i> Temperature<\/p>\r\n <p class="reading"><span id="temperature"><\/span> °C<\/p>\r\n <\/div>\r\n <div class="card">\r\n <p class="card-title"> Humidity<\/p>\r\n <p class="reading"><span id="humidity"><\/span> %<\/p>\r\n <\/div>\r\n <div class="card">\r\n <p class="card-title"> Pressure<\/p>\r\n <p class="reading"><span id="pressure"><\/span> hpa<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <script src="script.js"><\/script>\r\n <\/body>\r\n<\/html><\/code><\/pre>\n\t<div class=\"card\">\n <p class=\"card-title\"><i class=\"fas fa-thermometer-threequarters\" style=\"color:#059e8a;\"><\/i> Temperature<\/p>\n <p class=\"reading\"><span id=\"temperature\"><\/span> °C<\/p>\n<\/div><\/code><\/pre>\n\n\n\n<span id=\"temperature<\/strong>\"><\/span><\/code><\/pre>\n\n\n\n<div class=\"card\">\n <p class=\"card-title\"> Humidity<\/p>\n <p class=\"reading\"><span id=\"humidity<\/strong>\"><\/span> %<\/p>\n<\/div>\n<div class=\"card\">\n <p class=\"card-title\"> Pressure<\/p>\n <p class=\"reading\"><span id=\"pressure<\/strong>\"><\/span> hpa<\/p>\n<\/div><\/code><\/pre>\n\n\n\nCSS File<\/h2>\n\n\n\n
html {\r\n font-family: Arial, Helvetica, sans-serif;\r\n display: inline-block;\r\n text-align: center;\r\n}\r\nh1 {\r\n font-size: 1.8rem;\r\n color: white;\r\n}\r\n.topnav {\r\n overflow: hidden;\r\n background-color: #0A1128;\r\n}\r\nbody {\r\n margin: 0;\r\n}\r\n.content {\r\n padding: 50px;\r\n}\r\n.card-grid {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-gap: 2rem;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n}\r\n.card {\r\n background-color: white;\r\n box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);\r\n}\r\n.card-title {\r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n color: #034078\r\n}\r\n.reading {\r\n font-size: 1.2rem;\r\n color: #1282A2;\r\n}<\/code><\/pre>\n\tJavaScript File<\/h2>\n\n\n\n
\r\nvar gateway = `ws:\/\/${window.location.hostname}\/ws`;\r\nvar websocket;\r\n\/\/ Init web socket when the page loads\r\nwindow.addEventListener('load', onload);\r\n\r\nfunction onload(event) {\r\n initWebSocket();\r\n}\r\n\r\nfunction getReadings(){\r\n websocket.send("getReadings");\r\n}\r\n\r\nfunction initWebSocket() {\r\n console.log('Trying to open a WebSocket connection\u2026');\r\n websocket = new WebSocket(gateway);\r\n websocket.onopen = onOpen;\r\n websocket.onclose = onClose;\r\n websocket.onmessage = onMessage;\r\n}\r\n\r\n\/\/ When websocket is established, call the getReadings() function\r\nfunction onOpen(event) {\r\n console.log('Connection opened');\r\n getReadings();\r\n}\r\n\r\nfunction onClose(event) {\r\n console.log('Connection closed');\r\n setTimeout(initWebSocket, 2000);\r\n}\r\n\r\n\/\/ Function that receives the message from the ESP32 with the readings\r\nfunction onMessage(event) {\r\n console.log(event.data);\r\n var myObj = JSON.parse(event.data);\r\n var keys = Object.keys(myObj);\r\n\r\n for (var i = 0; i < keys.length; i++){\r\n var key = keys[i];\r\n document.getElementById(key).innerHTML = myObj[key];\r\n }\r\n}<\/code><\/pre>\n\t\n
var gateway = ws:\/\/${window.location.hostname}\/ws;<\/code><\/pre>\n\n\n\nvar websocket;<\/code><\/pre>\n\n\n\nwindow.addEventListener('load', onload);<\/code><\/pre>\n\n\n\nfunction onload(event) {\n initWebSocket();\n}<\/code><\/pre>\n\n\n\nfunction initWebSocket() {\n console.log('Trying to open a WebSocket connection\u2026');\n websocket = new WebSocket(gateway);\n websocket.onopen = onOpen;\n websocket.onclose = onClose;\n websocket.onmessage = onMessage;\n}<\/code><\/pre>\n\n\n\nfunction onOpen(event) {\n console.log('Connection opened');\n getReadings();\n}<\/code><\/pre>\n\n\n\nfunction getReadings(){\n websocket.send(\"getReadings\");\n}<\/code><\/pre>\n\n\n\n\/\/ Function that receives the message from the ESP32 with the readings\nfunction onMessage(event) {\n console.log(event.data);\n var myObj = JSON.parse(event.data);\n var keys = Object.keys(myObj);\n\n for (var i = 0; i < keys.length; i++){\n var key = keys[i];\n document.getElementById(key).innerHTML = myObj[key];\n }\n}<\/code><\/pre>\n\n\n\n{\n temperature: 20;\n humidity: 50;\n pressure: 1023;\n}<\/code><\/pre>\n\n\n\nfor (var i = 0; i < keys.length; i++){\n var key = keys[i];\n document.getElementById(key).innerHTML = myObj[key];\n}<\/code><\/pre>\n\n\n\nCode for ESP32 WebSocket Server (Sensor Readings)<\/h2>\n\n\n\n
\/*********\r\n Rui Santos & Sara Santos - Random Nerd Tutorials\r\n Complete instructions at https:\/\/RandomNerdTutorials.com\/esp32-websocket-server-sensor\/\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#include <Arduino.h>\r\n#include <WiFi.h>\r\n#include <AsyncTCP.h>\r\n#include <ESPAsyncWebServer.h>\r\n#include "LittleFS.h"\r\n#include <Arduino_JSON.h>\r\n#include <Adafruit_BME280.h>\r\n#include <Adafruit_Sensor.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\/\/ Create AsyncWebServer object on port 80\r\nAsyncWebServer server(80);\r\n\r\n\/\/ Create a WebSocket object\r\nAsyncWebSocket ws("\/ws");\r\n\r\n\/\/ Json Variable to Hold Sensor Readings\r\nJSONVar readings;\r\n\r\n\/\/ Timer variables\r\nunsigned long lastTime = 0;\r\nunsigned long timerDelay = 30000;\r\n\r\n\/\/ Create a sensor object\r\nAdafruit_BME280 bme;\r\n\r\n\/\/ Init BME280\r\nvoid initBME(){\r\n if (!bme.begin(0x76)) {\r\n Serial.println("Could not find a valid BME280 sensor, check wiring!");\r\n while (1);\r\n }\r\n}\r\n\r\n\/\/ Get Sensor Readings and return JSON object\r\nString getSensorReadings(){\r\n readings["temperature"] = String(bme.readTemperature());\r\n readings["humidity"] = String(bme.readHumidity());\r\n readings["pressure"] = String(bme.readPressure()\/100.0F);\r\n String jsonString = JSON.stringify(readings);\r\n return jsonString;\r\n}\r\n\r\n\/\/ Initialize LittleFS\r\nvoid initLittleFS() {\r\n if (!LittleFS.begin(true)) {\r\n Serial.println("An error has occurred while mounting LittleFS");\r\n }\r\n Serial.println("LittleFS mounted successfully");\r\n}\r\n\r\n\/\/ Initialize WiFi\r\nvoid initWiFi() {\r\n WiFi.mode(WIFI_STA);\r\n WiFi.begin(ssid, password);\r\n Serial.print("Connecting to WiFi ..");\r\n while (WiFi.status() != WL_CONNECTED) {\r\n Serial.print('.');\r\n delay(1000);\r\n }\r\n Serial.println(WiFi.localIP());\r\n}\r\n\r\nvoid notifyClients(String sensorReadings) {\r\n ws.textAll(sensorReadings);\r\n}\r\n\r\nvoid handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {\r\n AwsFrameInfo *info = (AwsFrameInfo*)arg;\r\n if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {\r\n \/\/data[len] = 0;\r\n \/\/String message = (char*)data;\r\n \/\/ Check if the message is "getReadings"\r\n \/\/if (strcmp((char*)data, "getReadings") == 0) {\r\n \/\/if it is, send current sensor readings\r\n String sensorReadings = getSensorReadings();\r\n Serial.print(sensorReadings);\r\n notifyClients(sensorReadings);\r\n \/\/}\r\n }\r\n}\r\n\r\nvoid onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) {\r\n switch (type) {\r\n case WS_EVT_CONNECT:\r\n Serial.printf("WebSocket client #%u connected from %s\\n", client->id(), client->remoteIP().toString().c_str());\r\n break;\r\n case WS_EVT_DISCONNECT:\r\n Serial.printf("WebSocket client #%u disconnected\\n", client->id());\r\n break;\r\n case WS_EVT_DATA:\r\n handleWebSocketMessage(arg, data, len);\r\n break;\r\n case WS_EVT_PONG:\r\n case WS_EVT_ERROR:\r\n break;\r\n }\r\n}\r\n\r\nvoid initWebSocket() {\r\n ws.onEvent(onEvent);\r\n server.addHandler(&ws);\r\n}\r\n\r\nvoid setup() {\r\n Serial.begin(115200);\r\n initBME();\r\n initWiFi();\r\n initLittleFS();\r\n initWebSocket();\r\n\r\n \/\/ Web Server Root URL\r\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request) {\r\n request->send(LittleFS, "\/index.html", "text\/html");\r\n });\r\n\r\n server.serveStatic("\/", LittleFS, "\/");\r\n\r\n \/\/ Start server\r\n server.begin();\r\n}\r\n\r\nvoid loop() {\r\n if ((millis() - lastTime) > timerDelay) {\r\n String sensorReadings = getSensorReadings();\r\n Serial.print(sensorReadings);\r\n notifyClients(sensorReadings);\r\n lastTime = millis();\r\n }\r\n ws.cleanupClients();\r\n}\r\n<\/code><\/pre>\n\tHow the Code Works<\/h3>\n\n\n\n