![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP32-WebSocket-Server-Control-Outputs-Arduino-IDE.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThe ESP32 will be programmed using Arduino IDE and the ESPAsyncWebServer. We also have a similar WebSocket guide for the ESP8266<\/a>.<\/p>\n\n\n\n If you\u2019ve been following some of our previous web server projects like this one<\/a>, you may have noticed that if you have several tabs (in the same or on different devices) opened at the same time, the state doesn\u2019t update in all tabs automatically unless you refresh the web page. To solve this issue, we can use WebSocket protocol \u2013 all clients can be notified when a change occurs and update the web page accordingly.<\/p>\n\n\n\n This tutorial was based on a project created and documented by one of our readers (St\u00e9phane Calderoni). You can read his excellent tutorial here<\/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.<\/p>\n\n\n\n Here’s the web page we’ll build for this project.<\/p>\n\n\n The following image describes what happens when click on the “Toggle” button.<\/p>\n\n\n Here’s what happens when you click on the “Toggle” button:<\/p>\n\n\n\n We\u2019ll program the ESP32<\/a> board using Arduino IDE, so make sure you have it installed in your Arduino IDE.<\/p>\n\n\n\n We’ll build the web server using the following libraries:<\/p>\n\n\n\n You can install these libraries in the Arduino Library Manager. Open the Library Manager by clicking the Library icon at the left sidebar.<\/p>\n\n\n\n Search for ESPAsyncWebServer<\/span> and install the ESPAsyncWebServer by ESP32Async<\/strong>.<\/p>\n\n\n Then, install the AsyncTCP library. Search for AsyncTCP<\/span> and install the AsyncTCP by ESP32Async<\/strong>.<\/p>\n\n\n Copy the following code to your Arduino IDE.<\/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 Continue reading to learn how the code works or skip to the Demonstration<\/a> section.<\/p>\n\n\n\n Import the necessary libraries to build the web server.<\/p>\n\n\n\n Insert your network credentials in the following variables:<\/p>\n\n\n\nIntroducing WebSocket<\/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\/2020\/10\/ESP32-WebSocket-Web-Server-Control-Outputs-Web-Page.png?resize=924%2C506&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
How it Works?<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP32-WebSocket-Web-Server-Update-All-Clients.png?resize=867%2C791&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
Preparing Arduino IDE<\/h2>\n\n\n\n
\n
Installing Libraries \u2013 Async Web Server<\/h3>\n\n\n\n
\n
![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-ESPAsyncWebServer-Library-ArduinoIDE-2-f.png?resize=666%2C586&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-AsyncTCP-Library-ArduinoIDE.png?resize=722%2C586&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nCode for ESP32 WebSocket Server<\/h2>\n\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-websocket-server-arduino\/\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*********\/\n\n\/\/ Import required libraries\n#include <WiFi.h>\n#include <AsyncTCP.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\nbool ledState = 0;\nconst int ledPin = 2;\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\nAsyncWebSocket ws("\/ws");\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="icon" href="data:,">\n <style>\n html {\n font-family: Arial, Helvetica, sans-serif;\n text-align: center;\n }\n h1 {\n font-size: 1.8rem;\n color: white;\n }\n h2{\n font-size: 1.5rem;\n font-weight: bold;\n color: #143642;\n }\n .topnav {\n overflow: hidden;\n background-color: #143642;\n }\n body {\n margin: 0;\n }\n .content {\n padding: 30px;\n max-width: 600px;\n margin: 0 auto;\n }\n .card {\n background-color: #F8F7F9;;\n box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);\n padding-top:10px;\n padding-bottom:20px;\n }\n .button {\n padding: 15px 50px;\n font-size: 24px;\n text-align: center;\n outline: none;\n color: #fff;\n background-color: #0f8b8d;\n border: none;\n border-radius: 5px;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-tap-highlight-color: rgba(0,0,0,0);\n }\n \/*.button:hover {background-color: #0f8b8d}*\/\n .button:active {\n background-color: #0f8b8d;\n box-shadow: 2 2px #CDCDCD;\n transform: translateY(2px);\n }\n .state {\n font-size: 1.5rem;\n color:#8c8c8c;\n font-weight: bold;\n }\n <\/style>\n<title>ESP Web Server<\/title>\n<meta name="viewport" content="width=device-width, initial-scale=1">\n<link rel="icon" href="data:,">\n<\/head>\n<body>\n <div class="topnav">\n <h1>ESP WebSocket Server<\/h1>\n <\/div>\n <div class="content">\n <div class="card">\n <h2>Output - GPIO 2<\/h2>\n <p class="state">state: <span id="state">%STATE%<\/span><\/p>\n <p><button id="button" class="button">Toggle<\/button><\/p>\n <\/div>\n <\/div>\n<script>\n var gateway = `ws:\/\/${window.location.hostname}\/ws`;\n var websocket;\n window.addEventListener('load', onLoad);\n function initWebSocket() {\n console.log('Trying to open a WebSocket connection...');\n websocket = new WebSocket(gateway);\n websocket.onopen = onOpen;\n websocket.onclose = onClose;\n websocket.onmessage = onMessage; \/\/ <-- add this line\n }\n function onOpen(event) {\n console.log('Connection opened');\n }\n function onClose(event) {\n console.log('Connection closed');\n setTimeout(initWebSocket, 2000);\n }\n function onMessage(event) {\n var state;\n if (event.data == "1"){\n state = "ON";\n }\n else{\n state = "OFF";\n }\n document.getElementById('state').innerHTML = state;\n }\n function onLoad(event) {\n initWebSocket();\n initButton();\n }\n function initButton() {\n document.getElementById('button').addEventListener('click', toggle);\n }\n function toggle(){\n websocket.send('toggle');\n }\n<\/script>\n<\/body>\n<\/html>\n)rawliteral";\n\nvoid notifyClients() {\n ws.textAll(String(ledState));\n}\n\nvoid handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {\n AwsFrameInfo *info = (AwsFrameInfo*)arg;\n if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {\n data[len] = 0;\n if (strcmp((char*)data, "toggle") == 0) {\n ledState = !ledState;\n notifyClients();\n }\n }\n}\n\nvoid onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type,\n void *arg, uint8_t *data, size_t len) {\n switch (type) {\n case WS_EVT_CONNECT:\n Serial.printf("WebSocket client #%u connected from %s\\n", client->id(), client->remoteIP().toString().c_str());\n break;\n case WS_EVT_DISCONNECT:\n Serial.printf("WebSocket client #%u disconnected\\n", client->id());\n break;\n case WS_EVT_DATA:\n handleWebSocketMessage(arg, data, len);\n break;\n case WS_EVT_PONG:\n case WS_EVT_ERROR:\n break;\n }\n}\n\nvoid initWebSocket() {\n ws.onEvent(onEvent);\n server.addHandler(&ws);\n}\n\nString processor(const String& var){\n Serial.println(var);\n if(var == "STATE"){\n if (ledState){\n return "ON";\n }\n else{\n return "OFF";\n }\n }\n return String();\n}\n\nvoid setup(){\n \/\/ Serial port for debugging purposes\n Serial.begin(115200);\n\n pinMode(ledPin, OUTPUT);\n digitalWrite(ledPin, LOW);\n \n \/\/ Connect to Wi-Fi\n WiFi.begin(ssid, password);\n while (WiFi.status() != WL_CONNECTED) {\n delay(1000);\n Serial.println("Connecting to WiFi..");\n }\n\n \/\/ Print ESP Local IP Address\n Serial.println(WiFi.localIP());\n\n initWebSocket();\n\n \/\/ Route for root \/ web page\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/html", index_html, processor);\n });\n\n \/\/ Start server\n server.begin();\n}\n\nvoid loop() {\n ws.cleanupClients();\n digitalWrite(ledPin, ledState);\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
Importing Libraries<\/h3>\n\n\n\n
#include <WiFi.h>\n#include <AsyncTCP.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\nGPIO Output<\/h3>\n\n\n\n