{"id":96320,"date":"2020-04-22T17:08:40","date_gmt":"2020-04-22T17:08:40","guid":{"rendered":"https:\/\/randomnerdtutorials.com\/?p=96320"},"modified":"2025-03-17T12:11:12","modified_gmt":"2025-03-17T12:11:12","slug":"esp32-esp8266-relay-web-server","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp32-esp8266-relay-web-server\/","title":{"rendered":"ESP32\/ESP8266 Relay Module Web Server using Arduino IDE (1, 2, 4, 8, 16 Channels)"},"content":{"rendered":"\n<p>This tutorial is a step-by-step guide that covers how to build a standalone ESP32 or ESP8266 NodeMCU Web Server that controls any relay module. We&#8217;ll create an <a href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-arduino-ide\/\">ESP32<\/a>\/<a href=\"https:\/\/randomnerdtutorials.com\/esp8266-web-server\/\">ESP8266 Web Server<\/a> that is mobile responsive and it can be accessed with any device with a browser in your local network.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-Relay-Module-Tutorial-project-web-server-featured.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 NodeMCU Relay Module Web Server using Arduino IDE 1 2 4 8 16 Channels\" class=\"wp-image-91705\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-Relay-Module-Tutorial-project-web-server-featured.jpg?w=1280&amp;quality=100&amp;strip=all&amp;ssl=1 1280w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-Relay-Module-Tutorial-project-web-server-featured.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-Relay-Module-Tutorial-project-web-server-featured.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-Relay-Module-Tutorial-project-web-server-featured.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Introducing Relays<\/h2>\n\n\n\n<p>A relay is an electrically operated switch and like any other switch, it that can be turned on or off, letting the current go through or not. It can be controlled with low voltages, like the 3.3V provided by the ESP GPIOs and allows us to control high voltages like 12V, 24V or mains voltage (230V in Europe and 120V in the US).<\/p>\n\n\n\n<p>There are different relay modules with a different number of channels. You can find relay modules with one, two, four, eight and even sixteen channels. The number of channels determines the number of outputs you can control.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-1-2-4-8-ch-channel-modules.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Relay modules with different number of channels\" class=\"wp-image-91706\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-1-2-4-8-ch-channel-modules.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-1-2-4-8-ch-channel-modules.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p><strong>Get a relay module<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/5v-2-channel-relay-module-optocoupler\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">5V 2-channel relay module<\/a> (with optocoupler)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.banggood.com\/2Pcs-5V-1-Channel-Level-Trigger-Optocoupler-Relay-Module-For-Arduino-p-1366337.html?p=MA240439985285201910\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">5V 1-channel relay module<\/a> (with optocoupler) <\/li>\n\n\n\n<li><a href=\"https:\/\/www.banggood.com\/5V-8-Channel-Relay-Module-Board-For-Arduino-PIC-AVR-DSP-ARM-p-74110.html?p=MA240439985285201910\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">5V 8-channel relay module<\/a> (with optocoupler) <\/li>\n\n\n\n<li><a aria-label=\"5V 16-channel relay module (opens in a new tab)\" href=\"https:\/\/www.banggood.com\/BESTEP-16-Channel-5V-Relay-Module-LM2596-With-Optocoupler-Protection-Low-Level-Trigger-For-Auduino-p-1390338.html?p=MA240439985285201910&amp;cur_warehouse=CN\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">5V 16-channel relay module<\/a> (with optocoupler)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.banggood.com\/BESTEP-1-Channel-3_3V-Low-Level-Trigger-Relay-Module-Optocoupler-Isolation-Terminal-For-Arduino-p-1355736.html?p=MA240439985285201910\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">3.3V 1-channel relay module<\/a> (with optocoupler)<\/li>\n<\/ul>\n\n\n\n<p>For an in-depth guide on how a relay module works, read:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-relay-module-ac-web-server\/\">Guide: ESP32 Relay Module \u2013 Control AC Appliances using Arduino IDE (Web Server)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-relay-module-ac-web-server\/\">Guide: ESP8266 NodeMCU Relay Module \u2013 Control AC Appliances using Arduino IDE (Web Server)<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Control Relay Modules with Multiple Channels using an ESP32\/ESP8266 Web Server<\/h2>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"450\" height=\"900\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-relay-web-server.png?resize=450%2C900&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Control Multiple Relays with ESP8266 Web Server\" class=\"wp-image-91725\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-relay-web-server.png?w=450&amp;quality=100&amp;strip=all&amp;ssl=1 450w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-relay-web-server.png?resize=150%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 150w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/figure><\/div>\n\n\n<p>With this web server code, you can control as many relays as you want via web server whether they are configured as normally opened or as normally closed. You just need to change a few lines of code to define the number of relays you want to control and the pin assignment.<\/p>\n\n\n\n<p><strong>Installing the ESPAsyncWebServer, AsyncTCP, and ESPAsyncTCP Libraries<\/strong><\/p>\n\n\n\n<p>To build the web server you need to install the following libraries:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>ESP32:<\/strong>&nbsp;install the&nbsp;<a href=\"https:\/\/github.com\/ESP32Async\/ESPAsyncWebServer\" target=\"_blank\" rel=\"noopener\" title=\"\">ESPAsyncWebServer<\/a> and the&nbsp;<a href=\"https:\/\/github.com\/ESP32Async\/AsyncTCP\" target=\"_blank\" rel=\"noopener\" title=\"\">AsyncTCP&nbsp;<\/a>libraries&nbsp;(by ESP32Async).<\/li>\n\n\n\n<li><strong>ESP8266:<\/strong>&nbsp;install the&nbsp;<a href=\"https:\/\/github.com\/ESP32Async\/ESPAsyncWebServer\" target=\"_blank\" rel=\"noopener\" title=\"\">ESPAsyncWebServer<\/a>&nbsp;and the&nbsp;<a href=\"https:\/\/github.com\/ESP32Async\/ESPAsyncTCP\" target=\"_blank\" rel=\"noopener\" title=\"\">ESPAsyncTCP<\/a>&nbsp;libraries (by ESP32Async).<\/li>\n<\/ul>\n\n\n\n<p>You can install those libraries in the Arduino IDE Library Manager. Go to <strong>Sketch <\/strong>&gt; <strong>Include Library<\/strong> &gt; <strong>Manage Libraries<\/strong> and search for the libraries&#8217; names.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code<\/h3>\n\n\n\n<p>After installing the required libraries, copy the following code to your Arduino IDE.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos &amp; Sara Santos - Random Nerd Tutorials\n  Complete project details at https:\/\/RandomNerdTutorials.com\/esp8266-relay-module-ac-web-server\/\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 &quot;ESP8266WiFi.h&quot;\n#include &quot;ESPAsyncWebServer.h&quot;\n\n\/\/ Set to true to define Relay as Normally Open (NO)\n#define RELAY_NO    true\n\n\/\/ Set number of relays\n#define NUM_RELAYS  5\n\n\/\/ Assign each GPIO to a relay\nint relayGPIOs[NUM_RELAYS] = {5, 4, 14, 12, 13};\n\n\/\/ Replace with your network credentials\nconst char* ssid = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\nconst char* PARAM_INPUT_1 = &quot;relay&quot;;  \nconst char* PARAM_INPUT_2 = &quot;state&quot;;\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\n\nconst char index_html[] PROGMEM = R&quot;rawliteral(\n&lt;!DOCTYPE HTML&gt;&lt;html&gt;\n&lt;head&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n  &lt;style&gt;\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: 34px}\n    .slider:before {position: absolute; content: &quot;&quot;; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px}\n    input:checked+.slider {background-color: #2196F3}\n    input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h2&gt;ESP Web Server&lt;\/h2&gt;\n  %BUTTONPLACEHOLDER%\n&lt;script&gt;function toggleCheckbox(element) {\n  var xhr = new XMLHttpRequest();\n  if(element.checked){ xhr.open(&quot;GET&quot;, &quot;\/update?relay=&quot;+element.id+&quot;&amp;state=1&quot;, true); }\n  else { xhr.open(&quot;GET&quot;, &quot;\/update?relay=&quot;+element.id+&quot;&amp;state=0&quot;, true); }\n  xhr.send();\n}&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n)rawliteral&quot;;\n\n\/\/ Replaces placeholder with button section in your web page\nString processor(const String&amp; var){\n  \/\/Serial.println(var);\n  if(var == &quot;BUTTONPLACEHOLDER&quot;){\n    String buttons =&quot;&quot;;\n    for(int i=1; i&lt;=NUM_RELAYS; i++){\n      String relayStateValue = relayState(i);\n      buttons+= &quot;&lt;h4&gt;Relay #&quot; + String(i) + &quot; - GPIO &quot; + relayGPIOs[i-1] + &quot;&lt;\/h4&gt;&lt;label class=\\&quot;switch\\&quot;&gt;&lt;input type=\\&quot;checkbox\\&quot; onchange=\\&quot;toggleCheckbox(this)\\&quot; id=\\&quot;&quot; + String(i) + &quot;\\&quot; &quot;+ relayStateValue +&quot;&gt;&lt;span class=\\&quot;slider\\&quot;&gt;&lt;\/span&gt;&lt;\/label&gt;&quot;;\n    }\n    return buttons;\n  }\n  return String();\n}\n\nString relayState(int numRelay){\n  if(RELAY_NO){\n    if(digitalRead(relayGPIOs[numRelay-1])){\n      return &quot;&quot;;\n    }\n    else {\n      return &quot;checked&quot;;\n    }\n  }\n  else {\n    if(digitalRead(relayGPIOs[numRelay-1])){\n      return &quot;checked&quot;;\n    }\n    else {\n      return &quot;&quot;;\n    }\n  }\n  return &quot;&quot;;\n}\n\nvoid setup(){\n  \/\/ Serial port for debugging purposes\n  Serial.begin(115200);\n\n  \/\/ Set all relays to off when the program starts - if set to Normally Open (NO), the relay is off when you set the relay to HIGH\n  for(int i=1; i&lt;=NUM_RELAYS; i++){\n    pinMode(relayGPIOs[i-1], OUTPUT);\n    if(RELAY_NO){\n      digitalWrite(relayGPIOs[i-1], HIGH);\n    }\n    else{\n      digitalWrite(relayGPIOs[i-1], LOW);\n    }\n  }\n  \n  \/\/ Connect to Wi-Fi\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(1000);\n    Serial.println(&quot;Connecting to WiFi..&quot;);\n  }\n\n  \/\/ Print ESP8266 Local IP Address\n  Serial.println(WiFi.localIP());\n\n  \/\/ Route for root \/ web page\n  server.on(&quot;\/&quot;, HTTP_GET, [](AsyncWebServerRequest *request){\n    request-&gt;send(200, &quot;text\/html&quot;, index_html, processor);\n  });\n\n  \/\/ Send a GET request to &lt;ESP_IP&gt;\/update?relay=&lt;inputMessage&gt;&amp;state=&lt;inputMessage2&gt;\n  server.on(&quot;\/update&quot;, HTTP_GET, [] (AsyncWebServerRequest *request) {\n    String inputMessage;\n    String inputParam;\n    String inputMessage2;\n    String inputParam2;\n    \/\/ GET input1 value on &lt;ESP_IP&gt;\/update?relay=&lt;inputMessage&gt;\n    if (request-&gt;hasParam(PARAM_INPUT_1) &amp; request-&gt;hasParam(PARAM_INPUT_2)) {\n      inputMessage = request-&gt;getParam(PARAM_INPUT_1)-&gt;value();\n      inputParam = PARAM_INPUT_1;\n      inputMessage2 = request-&gt;getParam(PARAM_INPUT_2)-&gt;value();\n      inputParam2 = PARAM_INPUT_2;\n      if(RELAY_NO){\n        Serial.print(&quot;NO &quot;);\n        digitalWrite(relayGPIOs[inputMessage.toInt()-1], !inputMessage2.toInt());\n      }\n      else{\n        Serial.print(&quot;NC &quot;);\n        digitalWrite(relayGPIOs[inputMessage.toInt()-1], inputMessage2.toInt());\n      }\n    }\n    else {\n      inputMessage = &quot;No message sent&quot;;\n      inputParam = &quot;none&quot;;\n    }\n    Serial.println(inputMessage + inputMessage2);\n    request-&gt;send(200, &quot;text\/plain&quot;, &quot;OK&quot;);\n  });\n  \/\/ Start server\n  server.begin();\n}\n  \nvoid loop() {\n\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP8266\/ESP8266_Relay_Module_Web_Server.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Define Relay Configuration<\/h3>\n\n\n\n<p>Modify the following variable to indicate whether you&#8217;re using your relays in normally open (NO) or normally closed (NC) configuration. Set the <span class=\"rnthl rntliteral\">RELAY_NO<\/span> variable to <span class=\"rnthl rntliteral\">true<\/span> for normally open os set to <span class=\"rnthl rntliteral\">false<\/span> for normally closed.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#define RELAY_NO true<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Define Number of Relays (Channels)<\/h3>\n\n\n\n<p>You can define the number of relays you want to control on the <span class=\"rnthl rntliteral\">NUM_RELAYS<\/span> variable. For demonstration purposes, we&#8217;re setting it to 5.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#define NUM_RELAYS 5<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Define Relays Pin Assignment<\/h3>\n\n\n\n<p>In the following array variable you can define the ESP GPIOs that will control the relays.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>int relayGPIOs&#091;NUM_RELAYS] = {5, 4, 14, 12, 13};<\/code><\/pre>\n\n\n\n<p>The number of relays set on the <span class=\"rnthl rntliteral\">NUM_RELAYS<\/span> variable needs to match the number of GPIOs assigned in the <span class=\"rnthl rntliteral\">relayGPIOs<\/span> array.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Network Credentials<\/h3>\n\n\n\n<p>Insert your network credentials in the following variables.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* ssid     = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Wiring a Relay Module to an ESP Board<\/h2>\n\n\n\n<p>For demonstration purposes, we\u2019re controlling 5 relay channels. Wire the ESP boards to the relay module as shown in the next schematic diagrams.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">ESP32 Wiring<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-pinout-8channels-esp32.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1168\" height=\"984\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-pinout-8channels-esp32.png?resize=1168%2C984&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 8-channel relay module wiring diagram schematic\" class=\"wp-image-91889\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-pinout-8channels-esp32.png?w=1168&amp;quality=100&amp;strip=all&amp;ssl=1 1168w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-pinout-8channels-esp32.png?resize=300%2C253&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-pinout-8channels-esp32.png?resize=1024%2C863&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-pinout-8channels-esp32.png?resize=768%2C647&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1168px) 100vw, 1168px\" \/><\/a><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">ESP8266 NodeMCU Wiring<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-pinout-8channels-esp8266.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1040\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-pinout-8channels-esp8266.png?resize=1200%2C1040&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ES8266 8-channel relay module wiring diagram schematic\" class=\"wp-image-91892\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-pinout-8channels-esp8266.png?w=1218&amp;quality=100&amp;strip=all&amp;ssl=1 1218w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-pinout-8channels-esp8266.png?resize=300%2C260&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-pinout-8channels-esp8266.png?resize=1024%2C888&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Relay-pinout-8channels-esp8266.png?resize=768%2C666&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a><\/figure><\/div>\n\n\n<p class=\"rntbox rntcred\"><strong>Warning: <\/strong> most relay projects deal with mains voltage. Misuse can result in serious injuries. If you&#8217;re not familiar with mains voltage ask someone who is to help you out. While programming the ESP or wiring your circuit make sure everything is disconnected from mains voltage. Alternatively, you can use a 12V power source to control 12V appliances.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Demonstration<\/h2>\n\n\n\n<p>After making the necessary changes, upload the code to your ESP. Open the Serial Monitor at a baud rate of 115200 and press the ESP RST button to get its IP address (<em>make sure that you circuit is unplugged from mains voltage<\/em>).<\/p>\n\n\n\n<p>Open a browser in your local network and type the ESP IP address to get access to the web server. You should get something as follows with as many buttons as the number of relays you&#8217;ve defined in your code.<\/p>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"900\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-relay-web-server.png?resize=450%2C900&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 NodeMCU Relay Web Server Mobile web browser\" class=\"wp-image-91725\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-relay-web-server.png?w=450&amp;quality=100&amp;strip=all&amp;ssl=1 450w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-relay-web-server.png?resize=150%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 150w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/figure><\/div>\n\n\n<p>Now, you can use the buttons to control your relays remotely using your smartphone.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-Relay-Module-Tutorial-project-example-off.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Relay Module Control Web Server using Arduino IDE\" class=\"wp-image-91717\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-Relay-Module-Tutorial-project-example-off.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-Relay-Module-Tutorial-project-example-off.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Enclosure for Safety<\/h3>\n\n\n\n<p>For a final project, make sure you place your relay module and ESP inside an enclosure to avoid any AC pins exposed.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/01\/enclosure-for-relay-module.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Enclosure for Relay Module\" class=\"wp-image-92448\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/01\/enclosure-for-relay-module.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/01\/enclosure-for-relay-module.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Watch the Video<\/h3>\n\n\n\n<p>Watch the following video for a complete tutorial and live demonstration.<\/p>\n\n\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/giACxpN0cGc?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>Using relays with the ESP is a great way to control AC household appliances remotely. You can also read our complete guides to learn more about relay modules:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-relay-module-ac-web-server\/\">ESP32 Relay Module \u2013 Control AC Appliances using Arduino IDE (Web Server)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-relay-module-ac-web-server\/\">ESP8266 NodeMCU Relay Module \u2013 Control AC Appliances using Arduino IDE (Web Server)<\/a><\/li>\n<\/ul>\n\n\n\n<p>Learn more about the ESP boards with our resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/home-automation-using-esp8266\/\">Home Automation using ESP8266<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp32\/\">Free ESP32 Projects, Tutorials and Guides<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp8266\/\">Free ESP8266 NodeMCU Projects, Tutorials and Guides<\/a><\/li>\n<\/ul>\n\n\n\n<p>Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial is a step-by-step guide that covers how to build a standalone ESP32 or ESP8266 NodeMCU Web Server that controls any relay module. We&#8217;ll create an ESP32\/ESP8266 Web Server &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP32\/ESP8266 Relay Module Web Server using Arduino IDE (1, 2, 4, 8, 16 Channels)\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-relay-web-server\/#more-96320\" aria-label=\"Read more about ESP32\/ESP8266 Relay Module Web Server using Arduino IDE (1, 2, 4, 8, 16 Channels)\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":91809,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[265,214,246,300,240,264],"tags":[],"class_list":["post-96320","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp8266-project","category-esp8266","category-esp8266-arduino-ide","category-0-esp8266","category-esp8266-projects","category-project"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP8266-Relay-Module-Tutorial-project-web-server-featured.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/96320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=96320"}],"version-history":[{"count":2,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/96320\/revisions"}],"predecessor-version":[{"id":168080,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/96320\/revisions\/168080"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/91809"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=96320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=96320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=96320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}