![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP8266-NodeMCU-ESPAsyncWebServer-library-control-outputs-web-server-Arduino.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nYou might also like:<\/strong> ESP32 Async Web Server \u2013 Control Outputs with Arduino IDE (ESPAsyncWebServer library)<\/a><\/p>\n\n\n\n To build the web server we\u2019ll use the\u00a0ESPAsyncWebServer library<\/a>\u00a0that provides an easy way to build an asynchronous web server. Building an asynchronous web server has several advantages as mentioned in the library GitHub page, such as:<\/p>\n\n\n\n Take a look at the\u00a0library documentation on its GitHub page<\/a>.<\/p>\n\n\n\n In this tutorial we’ll control three outputs. As an example, we’ll control LEDs. So, 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> Before proceeding to the code, wire 3 LEDs to the ESP8266. We’re connecting the LEDs to GPIOs 5, 4 and 2, but you can use any other GPIOs (read ESP8266 NodeMCU GPIO Reference Guide<\/a>).<\/p>\n\n\n We’ll build the web server using 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 To better understand the code, let’s see how the web server works.<\/p>\n\n\n Let’s see what happens when you toggle the buttons. We’ll see the example for GPIO 2. It works similarly for the other buttons.<\/p>\n\n\n\n 1.<\/strong> In the first scenario, you toggle the button to turn GPIO 2 on. When that happens, it makes an HTTP GET request on the \/update?output=2<\/strong>&state=1<\/strong><\/span> URL. Based on that URL, we change the state of GPIO 2 to 1 (HIGH<\/strong>) and turn the LED on.<\/p>\n\n\n\n 2.<\/strong> In the second example, when you toggle the button to turn GPIO 2 off. When that happens, make an HTTP GET request on the \/update?output=2<\/strong>&state=0<\/strong><\/span> URL. Based on that URL, we change the state of GPIO 2 to 0 (LOW<\/strong>) and turn the LED off.<\/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 In this section we\u2019ll explain how the code works. Keep reading if you want to learn more or jump to the Demonstration section to see the final result.<\/p>\n\n\n\n First, import the required libraries. You need to include the WiFi<\/span>, ESPAsyncWebserver<\/span> and the ESPAsyncTCP<\/span> libraries.<\/p>\n\n\n\n Insert your network credentials in the following variables, so that the ESP8266 can connect to your local network.<\/p>\n\n\n\n To check the parameters passed on the URL (GPIO number and its state), we create two variables, one for the output and other for the state. <\/p>\n\n\n\n Remember that the ESP8266 receives requests like this: \/update?output<\/strong>=2&state<\/strong>=0<\/span><\/p>\n\n\n\n Create an AsyncWebServer<\/span> object on port 80.<\/p>\n\n\n\n All the HTML text with styles and JavaScript is stored in the index_html<\/span> variable. Now we\u2019ll go through the HTML text and see what each part does.<\/p>\n\n\n\n The title goes inside the <title><\/span> and <\/tile><\/span> tags. The title is exactly what it sounds like: the title of your document, which shows up in your web browser\u2019s title bar. In this case, it is “ESP Web Server”.<\/p>\n\n\n\n The following <meta><\/span> tag makes your web page responsive in any browser (laptop, tablet or smartphone).<\/p>\n\n\n\n The next line prevents requests on the favicon. In this case, we don’t have a favicon. The favicon is the website icon that shows next to the title in the web browser tab. If we don’t add the following line, the ESP will receive a request for the favicon every time we access the web server.<\/p>\n\n\n\n Between the <style><\/style> <\/span>tags, we add some CSS to style the web page. We won’t go into detail on how this CSS styling works.<\/p>\n\n\n\n Inside the <body><\/body><\/span> tags is where we add the web page content.<\/p>\n\n\n\n The <h2><\/h2><\/span> tags add a heading to the web page. In this case, the \u201cESP Web Server\u201d text, but you can add any other text.<\/p>\n\n\n\n After the heading, we have the buttons. The way the buttons show up on the web page (red: if the GPIO is on; or gray: if the GPIO is off) varies depending on the current GPIO state. <\/p>\n\n\n\n When you access the web server page, you want it to show the right current GPIO states. So, instead of adding the HTML text to build the buttons, we’ll add a placeholder %BUTTONPLACEHOLDER%<\/span>. This palceholder will then be replaced with the actual HTML text to build the buttons with the right states, when the web page is loaded.<\/p>\n\n\n\n Then, there’s some JavaScript that is responsible to make an HTTP GET request<\/a> when you toggle the buttons as we’ve explained previously.<\/p>\n\n\n\n Here’s the line that makes the request:<\/p>\n\n\n\n element.id<\/span> returns the id of an HTML element. The id of each button will be the GPIO controlled as we’ll see in the next section:<\/p>\n\n\n\n Now, we need to create the processor()<\/span> function, that replaces the placeholders in the HTML text with what we define. <\/p>\n\n\n\n When the web page is requested, check if the HTML has any placeholders. If it finds the %BUTTONPLACEHOLDER%<\/span> placeholder, it returns the HTML text to create the buttons.<\/p>\n\n\n\n You can easily delete or add more lines to create more buttons.<\/p>\n\n\n\n Let’s take a look at how the buttons are created. We create a String variable called buttons<\/span> that contains the HTML text to build the buttons. We concatenate the HTML text with the current output state so that the toggle button is either gray or red. The current output state is returned by the outputState(<GPIO>)<\/span> function (it accepts as argument the GPIO number). See below:<\/p>\n\n\n\n The \\ is used so that we can pass “” inside the String.<\/p>\n\n\n\n The outputState()<\/span> function returns either “checked”<\/span> if the GPIO is on or and empty field “”<\/span> if the GPIO is off.<\/p>\n\n\n\n So, the HTML text for GPIO 2 when it is on, would be:<\/p>\n\n\n\n Let\u2019s break this down into smaller sections to understand how it works.<\/p>\n\n\n\n In HTML, a toggle switch is an input type. The <input><\/span> tag specifies an input field where the user can enter data. The toggle switch is an input field of type checkbox<\/span>. There are many other input field types.<\/p>\n\n\n\n The checkbox can be checked or not. When it is check, you have something as follows:<\/p>\n\n\n\n The onchange<\/span> is an event attribute that occurs when we change the value of the element (the checkbox). Whenever you check or uncheck the toggle switch, it calls the toggleCheckbox()<\/span> JavaScript function for that specific element id (this<\/span>).<\/p>\n\n\n\n The id<\/span> specifies a unique id for that HTML element. The id allows us to manipulate the element using JavaScript or CSS.<\/p>\n\n\n\n In the setup()<\/span> initialize the Serial Monitor for debugging purposes.<\/p>\n\n\n\n Set the GPIOs you want to control as outputs using the pinMode()<\/span> function and set them to LOW when the ESP8266 first starts. If you’ve added more GPIOs, do the same procedure.<\/p>\n\n\n\n Connect to your local network and print the ESP8266 IP address.<\/p>\n\n\n\n In the setup()<\/span>, you need to handle what happens when the ESP8266 receives requests. As we’ve seen previously, you receive a request of this type:<\/p>\n\n\n\n So, we check if the request contains the PARAM_INPUT1<\/span> variable value (output<\/span>) and the PARAM_INPUT2<\/span>(state<\/span>) and save the corresponding values on the input1Message<\/span> and input2Message<\/span> variables.<\/p>\n\n\n\n Then, we control the corresponding GPIO with the corresponding state (the inputMessage1<\/span> variable saves the GPIO number and the inputMessage2<\/span> saves the state – 0 or 1)<\/p>\n\n\n\n Here’s the complete code to handle the HTTP GET \/update<\/strong> request:<\/p>\n\n\n\n Finally, start the server:<\/p>\n\n\n\n After uploading the code to your ESP8266, open the Serial Monitor at a baud rate of 115200. Press the on-board RST\/EN button. You should get its IP address.<\/p>\n\n\n\n Open a browser and type the ESP IP address. You’ll get access to a similar web page.<\/p>\n\n\n Press the toggle buttons to control the ESP GPIOs. At the same time, you should get the following messages in the Serial Monitor to help you debug your code.<\/p>\n\n\n You can also access the web server from a browser in your smartphone. Whenever you open the web server, it shows the current GPIO states. Red indicates the GPIO is on, and gray that the GPIO is off.<\/p>\n\n\n In this tutorial you’ve learned how to create an asynchronous web server with the ESP8266 NodeMCU to control its outputs using toggle switches. Whenever you open the web page, it shows the updated GPIO states.<\/p>\n\n\n\n We have other web server examples using the ESPAsyncWebServer library that you may like:<\/p>\n\n\n\n We hope you found this tutorial useful. If you have any questions, post a comment below and we\u2019ll try to get back to you.<\/p>\n\n\n\n If you like ESP8266, you might consider enrolling in our eBook “Home Automation using ESP8266<\/a>“. You can also access our free ESP8266 resources here<\/a>.<\/p>\n\n\n\n Thank you for reading.<\/p>\n","protected":false},"excerpt":{"rendered":" In this tutorial you’ll learn how to build an asynchronous web server with the ESP8266 NodeMCU board to control its outputs. The board will be programmed using Arduino IDE, and … <\/p>\nAsynchronous Web Server<\/h2>\n\n\n\n
\n
Parts Required<\/h2>\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\nSchematic<\/h2>\n\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP8266-NodeMCU-Arduino-Outputs-Async-ESPAsyncWebServer-library-wiring-schematic-diagram.png?resize=534%2C808&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nInstalling Libraries \u2013 ESP Async Web Server<\/h2>\n\n\n\n
\n
Project Overview<\/h2>\n\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP8266-NodeMCU-Async-Web-Server-Control-Outputs.png?resize=300%2C595&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
How it Works?<\/h3>\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP8266-NodeMCU-Async-Web-Server-Project-Overview-ESPAsyncWebServer-Library.png?resize=900%2C408&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nCode for ESP Async Web Server<\/h2>\n\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp8266-nodemcu-async-web-server-espasyncwebserver-library\/\n The above copyright notice and this permission notice shall be included in all\n copies or substantial portions of the Software.\n*********\/\n\n\/\/ Import required libraries\n#include <ESP8266WiFi.h>\n#include <ESPAsyncTCP.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\nconst char* PARAM_INPUT_1 = "output";\nconst char* PARAM_INPUT_2 = "state";\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\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 {font-family: Arial; display: inline-block; text-align: center;}\n h2 {font-size: 3.0rem;}\n p {font-size: 3.0rem;}\n body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}\n .switch {position: relative; display: inline-block; width: 120px; height: 68px} \n .switch input {display: none}\n .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}\n .slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px}\n input:checked+.slider {background-color: #b30000}\n input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}\n <\/style>\n<\/head>\n<body>\n <h2>ESP Web Server<\/h2>\n %BUTTONPLACEHOLDER%\n<script>function toggleCheckbox(element) {\n var xhr = new XMLHttpRequest();\n if(element.checked){ xhr.open("GET", "\/update?output="+element.id+"&state=1", true); }\n else { xhr.open("GET", "\/update?output="+element.id+"&state=0", true); }\n xhr.send();\n}\n<\/script>\n<\/body>\n<\/html>\n)rawliteral";\n\n\/\/ Replaces placeholder with button section in your web page\nString processor(const String& var){\n \/\/Serial.println(var);\n if(var == "BUTTONPLACEHOLDER"){\n String buttons = "";\n buttons += "<h4>Output - GPIO 5<\/h4><label class=\\"switch\\"><input type=\\"checkbox\\" onchange=\\"toggleCheckbox(this)\\" id=\\"5\\" " + outputState(5) + "><span class=\\"slider\\"><\/span><\/label>";\n buttons += "<h4>Output - GPIO 4<\/h4><label class=\\"switch\\"><input type=\\"checkbox\\" onchange=\\"toggleCheckbox(this)\\" id=\\"4\\" " + outputState(4) + "><span class=\\"slider\\"><\/span><\/label>";\n buttons += "<h4>Output - GPIO 2<\/h4><label class=\\"switch\\"><input type=\\"checkbox\\" onchange=\\"toggleCheckbox(this)\\" id=\\"2\\" " + outputState(2) + "><span class=\\"slider\\"><\/span><\/label>";\n return buttons;\n }\n return String();\n}\n\nString outputState(int output){\n if(digitalRead(output)){\n return "checked";\n }\n else {\n return "";\n }\n}\n\nvoid setup(){\n \/\/ Serial port for debugging purposes\n Serial.begin(115200);\n\n pinMode(5, OUTPUT);\n digitalWrite(5, LOW);\n pinMode(4, OUTPUT);\n digitalWrite(4, LOW);\n pinMode(2, OUTPUT);\n digitalWrite(2, 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 \/\/ Route for root \/ web page\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/html", index_html, processor);\n });\n\n \/\/ Send a GET request to <ESP_IP>\/update?output=<inputMessage1>&state=<inputMessage2>\n server.on("\/update", HTTP_GET, [] (AsyncWebServerRequest *request) {\n String inputMessage1;\n String inputMessage2;\n \/\/ GET input1 value on <ESP_IP>\/update?output=<inputMessage1>&state=<inputMessage2>\n if (request->hasParam(PARAM_INPUT_1) && request->hasParam(PARAM_INPUT_2)) {\n inputMessage1 = request->getParam(PARAM_INPUT_1)->value();\n inputMessage2 = request->getParam(PARAM_INPUT_2)->value();\n digitalWrite(inputMessage1.toInt(), inputMessage2.toInt());\n }\n else {\n inputMessage1 = "No message sent";\n inputMessage2 = "No message sent";\n }\n Serial.print("GPIO: ");\n Serial.print(inputMessage1);\n Serial.print(" - Set to: ");\n Serial.println(inputMessage2);\n request->send(200, "text\/plain", "OK");\n });\n\n \/\/ Start server\n server.begin();\n}\n\nvoid loop() {\n\n}\n<\/code><\/pre>\n\tHow the Code Works<\/h2>\n\n\n\n
Importing libraries<\/h3>\n\n\n\n
#include <ESP8266WiFi.h>\n#include <ESPAsyncTCP.h>\n#include <ESPAsyncWebServer.h><\/code><\/pre>\n\n\n\nSetting your network 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\nInput Parameters<\/h3>\n\n\n\n
const char* PARAM_INPUT_1 = \"output\";\nconst char* PARAM_INPUT_2 = \"state\";<\/code><\/pre>\n\n\n\nAsyncWebServer object<\/h3>\n\n\n\n
AsyncWebServer server(80);<\/code><\/pre>\n\n\n\nBuilding the Web Page<\/h3>\n\n\n\n
<title>ESP Web Server<\/title><\/code><\/pre>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/05\/ESP32-Web-Server-Title.png?resize=365%2C167&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><\/code><\/pre>\n\n\n\n<link rel=\"icon\" href=\"data:,\"><\/code><\/pre>\n\n\n\n<style>\n html {font-family: Arial; display: inline-block; text-align: center;}\n h2 {font-size: 3.0rem;}\n p {font-size: 3.0rem;}\n body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}\n .switch {position: relative; display: inline-block; width: 120px; height: 68px} \n .switch input {display: none}\n .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}\n .slider:before {position: absolute; content: \"\"; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px}\n input:checked+.slider {background-color: #b30000}\n input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}\n<\/style><\/code><\/pre>\n\n\n\nHTML Body<\/h4>\n\n\n\n
<h2>ESP Web Server<\/h2><\/code><\/pre>\n\n\n\n%BUTTONPLACEHOLDER%<\/code><\/pre>\n\n\n\nJavaScript<\/h3>\n\n\n\n
<script>function toggleCheckbox(element) {\n var xhr = new XMLHttpRequest();\n if(element.checked){ xhr.open(\"GET\", \"\/update?output=\"+element.id+\"&state=1\", true); }\n else { xhr.open(\"GET\", \"\/update?output=\"+element.id+\"&state=0\", true); }\n xhr.send();\n}\n<\/script><\/code><\/pre>\n\n\n\nif(element.checked){ xhr.open(\"GET\", \"\/update?output=\"+element.id+\"&state=1\", true); }<\/code><\/pre>\n\n\n\n\n
Processor<\/h3>\n\n\n\n
String processor(const String& var){\n \/\/Serial.println(var);\n if(var == \"BUTTONPLACEHOLDER\"){\n String buttons = \"\";\n buttons += \"<h4>Output - GPIO 5<\/h4><label class=\\\"switch\\\"><input type=\\\"checkbox\\\" onchange=\\\"toggleCheckbox(this)\\\" id=\\\"5\\\" \" + outputState(5) + \"><span class=\\\"slider\\\"><\/span><\/label>\";\n buttons += \"<h4>Output - GPIO 4<\/h4><label class=\\\"switch\\\"><input type=\\\"checkbox\\\" onchange=\\\"toggleCheckbox(this)\\\" id=\\\"4\\\" \" + outputState(4) + \"><span class=\\\"slider\\\"><\/span><\/label>\";\n buttons += \"<h4>Output - GPIO 2<\/h4><label class=\\\"switch\\\"><input type=\\\"checkbox\\\" onchange=\\\"toggleCheckbox(this)\\\" id=\\\"2\\\" \" + outputState(2) + \"><span class=\\\"slider\\\"><\/span><\/label>\";\n return buttons;\n }\n return String();\n}<\/code><\/pre>\n\n\n\nbuttons += \"<h4>Output - GPIO 2<\/h4><label class=\\\"switch\\\"><input type=\\\"checkbox\\\" onchange=\\\"toggleCheckbox(this)\\\" id=\\\"2\\\" \" + outputState(2) + \"><span class=\\\"slider\\\"><\/span><\/label>\";<\/code><\/pre>\n\n\n\nString outputState(int output){\n if(digitalRead(output)){\n return \"checked\";\n }\n else {\n return \"\";\n }\n}<\/code><\/pre>\n\n\n\n<h4>Output - GPIO 2<\/h4>\n<label class=\"switch\">\n<input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"2\" checked><span class=\"slider\"><\/span>\n<\/label><\/code><\/pre>\n\n\n\n<input type=\"checkbox\"><\/code><\/pre>\n\n\n\n<input type=\"checkbox\" checked><\/code><\/pre>\n\n\n\n<input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"2\" checked><\/code><\/pre>\n\n\n\nsetup()<\/h3>\n\n\n\n
Serial.begin(115200);<\/code><\/pre>\n\n\n\npinMode(2, OUTPUT);\npinMode(5, OUTPUT);\ndigitalWrite(5, LOW);\npinMode(4, OUTPUT);\ndigitalWrite(4, LOW);\npinMode(2, OUTPUT);\ndigitalWrite(2, LOW);<\/code><\/pre>\n\n\n\nWiFi.begin(ssid, password);\nwhile (WiFi.status() != WL_CONNECTED) {\n delay(1000);\n Serial.println(\"Connecting to WiFi..\");\n}\n\n\/\/ Print ESP Local IP Address\nSerial.println(WiFi.localIP());<\/code><\/pre>\n\n\n\n<ESP_IP>\/update?output=<inputMessage1>&state=<inputMessage2><\/code><\/pre>\n\n\n\nif (request->hasParam(PARAM_INPUT_1) && request->hasParam(PARAM_INPUT_2)) {\n inputMessage1 = request->getParam(PARAM_INPUT_1)->value();\n inputMessage2 = request->getParam(PARAM_INPUT_2)->value();<\/code><\/pre>\n\n\n\ndigitalWrite(inputMessage1.toInt(), inputMessage2.toInt());<\/code><\/pre>\n\n\n\nserver.on(\"\/update\", HTTP_GET, [] (AsyncWebServerRequest *request) {\n String inputMessage1;\n String inputMessage2;\n \/\/ GET input1 value on <ESP_IP>\/update?output=<inputMessage1>&state=<inputMessage2>\n if (request->hasParam(PARAM_INPUT_1) && request->hasParam(PARAM_INPUT_2)) {\n inputMessage1 = request->getParam(PARAM_INPUT_1)->value();\n inputMessage2 = request->getParam(PARAM_INPUT_2)->value();\n digitalWrite(inputMessage1.toInt(), inputMessage2.toInt());\n }\n else {\n inputMessage1 = \"No message sent\";\n inputMessage2 = \"No message sent\";\n }\n Serial.print(\"GPIO: \");\n Serial.print(inputMessage1);\n Serial.print(\" - Set to: \");\n Serial.println(inputMessage2);\n request->send(200, \"text\/plain\", \"OK\");\n});<\/code><\/pre>\n\n\n\nserver.begin();<\/code><\/pre>\n\n\n\nDemonstration<\/h2>\n\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP8266-NodeMCU-Async-Web-Server-Web-Browser-Switch-Buttons-Serial-Monitor.png?resize=894%2C573&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP8266-NodeMCU-Async-Web-Server-Arduino-IDE-Serial-Monitor.png?resize=859%2C423&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP8266-NodeMCU-Async-Web-Server-Web-Browser-Switch-Buttons-Serial-Monitor-Mobile-Responsive.png?resize=543%2C735&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWrapping Up<\/h2>\n\n\n\n
\n