描述

在這篇文章中，我們將討論如何使用我們的手機通過使用 ESP8266 NodeMCU Web 服務器來控制我們的電子元件。我們通過手機瀏覽器連接到我們的網絡服務器并控制我們喜歡的任何組件。在這篇文章中，我們使用 LED 和無源蜂鳴器，但這可以擴展到通過繼電器控制高壓電器。

鏈接到我的頁面ESP8266 NodeMCU Web Server：控制手機中的組件

請觀看以下視頻，了解我們將在這篇文章中做什么的演示。

什么是 ESP8266 NodeMCU Web 服務器？

在深入探討如何通過手機控制組件之前，讓我們先討論一下什么是 Web 服務器。

?

?

來自維基百科，“網絡服務器是服務器軟件，或專用于運行該軟件的硬件，可以滿足萬維網上的客戶請求。

在我們的案例中，我們使用 NodeMCU ESP8266 的功能充當我們的 Web 服務器并托管我們的網站。我們在瀏覽器中輸入 Web 服務器的地址時發出“請求”，我們收到了 html 標記形式的“響應”。下圖是我們的瀏覽器發送到我們的 Web 服務器的 HTTP GET 請求的示例。

?

?

NodeMCU ESP8266 Web 服務器接收到這個請求并回復一個 HTML 響應。它還處理我們組件的接口，因此它檢查來自 Web 瀏覽器的請求并采取相應的行動。

ESP8266 芯片及其最新的 ESP32 芯片都是關于 wifi 和連接性的。這使其非常適合我們的物聯網 (IOT) 項目。

接線圖

?

ESP8266 NodeMCU 網絡服務器

?

NodeMCU ESP8266 組件 D1 無源蜂鳴器信號引腳 D7 LED 陽極 GND 面包板 GND 導軌

注意：在 LED 上添加一個 220 歐姆的限流電阻，并確保將蜂鳴器和引導至面包板導軌的接地。

代碼

該項目的代碼在我的github帳戶中，如下所示。

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
/********** PLEASE CHANGE THIS *************************/
const char* ssid     = "";
const char* password = "";
ESP8266WebServer server(80);
uint8_t LEDPin = D7;
bool LEDStatus = LOW;
uint8_t buzzerPin = D1;
bool buzzerStatus = LOW;
void setup() {
Serial.begin(115200);
pinMode(LEDPin, OUTPUT);
pinMode(buzzerPin, OUTPUT);
Serial.println("Connecting to ");
Serial.println(ssid);
//connect to your local wi-fi network
WiFi.begin(ssid, password);
//check wi-fi is connected to wi-fi network
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: ");  Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.on("/toggleLED", updateLED);
server.on("/toggleBuzzer", updateBuzzerSound);
server.onNotFound(handleNotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
}
void handleRoot() {
server.send(200, "text/html", prepareHTML());
}
void updateLED() {
Serial.println("Updating LED Status....");
LEDStatus = !LEDStatus;
digitalWrite(LEDPin, LEDStatus);
server.send(200, "text/html", prepareHTML());
}
void updateBuzzerSound() {
Serial.println("Updating Buzzer Status....");
buzzerStatus = !buzzerStatus;
if (buzzerStatus)
tone(buzzerPin, 1200);
else
noTone(buzzerPin);
server.send(200, "text/html", prepareHTML());
}
void handleNotFound() {
server.send(404, "text/plain", "Not found");
}
String prepareHTML() {
String html  = ""
""
""
"UTF-8\">"
"viewport\" content="width=device-width, initial-scale=1\">"
""
""
""
""
""
""
"
container\">"
"
hero\">"
"
NodeMCU ESP8266 Web Server
"
"
flex-container\">"
"  
flex-child magenta\">"
"component-label\">LED"
"  
"
"  
flex-child green\">"
"
grid-child green\">"
"
display: inline\">"
"
onoffswitch\">";
if (LEDStatus)
html = html + "checkbox\" name="onoffswitch\" class="onoffswitch-checkbox\" id="ledSwitch\" tabindex="0\" checked onclick="window.location.href='toggleLED'\">";
else
html = html + "checkbox\" name="onoffswitch\" class="onoffswitch-checkbox\" id="ledSwitch\" tabindex="0\" onclick="window.location.href='toggleLED'\">";
html = html +
"onoffswitch-label\" for="ledSwitch\">"
"onoffswitch-inner\">"
"onoffswitch-switch\">"
""
"
"
"
"
"
"
"  
"
"
"
"
flex-container\">"
"  
flex-child magenta\">"
"component-label\">Buzzer"
"  
"
"  
flex-child green\">"
"
grid-child green\">"
"
display: inline\">"
"
onoffswitch\">";
if (buzzerStatus)
html = html + "checkbox\" name="onoffswitch\" class="onoffswitch-checkbox\" id="buzzerSwitch\" tabindex="0\" checked onclick="window.location.href='toggleBuzzer'\">";
else
html = html +     "checkbox\" name="onoffswitch\" class="onoffswitch-checkbox\" id="buzzerSwitch\" tabindex="0\" onclick="window.location.href='toggleBuzzer'\">";
html = html +
"onoffswitch-label\" for="buzzerSwitch\">"
"onoffswitch-inner\">"
"onoffswitch-switch\">"
""
"
"
"
"
"
"
"  
"
"
"
"
"
"
"
""
"";
return html;
}

讓我們逐行討論代碼。

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>


/********** PLEASE CHANGE THIS *************************/
const char* ssid     = "";
const char* password = "";

包括必要的頭文件。我們正在使用ESP8266 Core for Arduino對我們的 NodeMCU 進行編程。如果您不知道這是如何完成的，請查看我關于如何安裝此插件的步驟的另一篇文章。請更改 ssid 和密碼以匹配您的 wifi 設置。

ESP8266WebServer server(80);

uint8_t LEDPin = D7;
bool LEDStatus = LOW;

uint8_t buzzerPin = D1;
bool buzzerStatus = LOW;

我們在這里制作了一個 ESP8266 NodeMCU Web 服務器，因此我們定義了一個可以同時處理一個客戶端的服務器。有關更多詳細信息，請參閱ESP8266 Arduino Core github 項目上的以下鏈接。我們定義了 LED 引腳和蜂鳴器引腳，并將兩個組件的初始狀態設置為低電平。

void setup() {
Serial.begin(115200);
pinMode(LEDPin, OUTPUT);
pinMode(buzzerPin, OUTPUT);

Serial.println("Connecting to ");
Serial.println(ssid);

//connect to your local wi-fi network
WiFi.begin(ssid, password);

//check wi-fi is connected to wi-fi network
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

server.on("/", handleRoot);
server.on("/toggleLED", updateLED);
server.on("/toggleBuzzer", updateBuzzerSound);
server.onNotFound(handleNotFound);

server.begin();
Serial.println("HTTP server started");
}

我們首先將引腳設置為輸出，然后連接到我們的 Wifi。之后，我們為我們的 Web 服務器設置 url 目標。我們定義了三個 url 鏈接，我們將使用它們來訪問我們的 web 服務器。對于每個鏈接，我們設置了一個函數，一旦請求該 url，就會調用該函數。

• http:/// -> 顯示我們的根頁面
• http:///toggleLED -> 切換我們的 LED 值
• http:///toggleBuzzer -> 打開和關閉蜂鳴器。

void loop() {
server.handleClient();
}

服務器等待來自我們手機的任何 GET 請求。它只接受一個同時的客戶。稍后我們將創建一篇文章，使其更具動態性并處理更多請求。

void handleRoot() {
server.send(200, "text/html", prepareHTML());
}

void updateLED() {
Serial.println("Updating LED Status....");
LEDStatus = !LEDStatus;
digitalWrite(LEDPin, LEDStatus);
server.send(200, "text/html", prepareHTML());
}

void updateBuzzerSound() {
Serial.println("Updating Buzzer Status....");
buzzerStatus = !buzzerStatus;
if (buzzerStatus)
tone(buzzerPin, 1200);
else
noTone(buzzerPin);

server.send(200, "text/html", prepareHTML());
}

void handleNotFound() {
server.send(404, "text/plain", "Not found");
}

當調用我們 Web 服務器中的特定 url 時調用的函數。每個函數都會調用prepareHTML()方法，該方法會返回一個 HTML 標記。

?

ESP8266 NodeMCU Web 服務器 HTML 輸出

?

handleRoot函數創建初始 html，并在客戶端調用我們的默認 Web 服務器 IP 地址和端口時顯示。

當我們滑動LED 切換按鈕時會調用updateLED 。它將 LED 的輸出設置為 HIGH 或 LOW

updateBuzzerSound在我們滑動Buzzer 切換按鈕時被調用。它調用tone和noTone函數來控制無源蜂鳴器。

當訪問的 url 不等于我們的根頁面、toggleLED 或 toggleBuzzer 時會調用 handleNotFound，并且只會在我們的瀏覽器中返回一條文本消息。

String prepareHTML() {
String html  = "html>"
"<html>"
"<head>"
"<meta charset=\"UTF-8">"
"<meta name=\"viewport" content=\"width=device-width, initial-scale=1\">"
"<title>NodeMCU ESP8266 Web Servertitle>"
.
.
.

函數prepareHTML()是有趣的部分，因為這是我們創建 html 頁面并使用級聯樣式表 (css) 和 Javascript 來創建用戶界面的地方。如果您想查看原始代碼，請單擊此鏈接。我使用mincss框架為我們的頁面設置樣式，以便它在我們的手機中看起來不錯。為了創建滑動切換按鈕，我使用了https://proto.io/freebies/onoff/ ，這是一種使用純 CSS 的 html 用戶界面。所有權利都屬于他們，因為他們想出了這么好的工具和 html UI。沒有侵犯版權，因為我在谷歌上搜索過！

這個函數中有趣的部分就在這行中。

if (LEDStatus)
html = html + ""checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="ledSwitch" tabindex="0" checked onclick="window.location.href='toggleLED'">";
else
html = html + ""checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="ledSwitch" tabindex="0" onclick="window.location.href='toggleLED'">";
if (buzzerStatus)
html = html + ""checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="buzzerSwitch" tabindex="0" checked onclick="window.location.href='toggleBuzzer'">";
else
html = html +     ""checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="buzzerSwitch" tabindex="0" onclick="window.location.href='toggleBuzzer'">";

注意“ checked ”屬性。如果存在此屬性，則表示切換滑塊按鈕為ON ，否則為OFF 。

我們添加了一個“onclick ”屬性并使用 javascript 向我們預定義的toggleLED和toggleBuzzer url 端點發出 GET 請求。

而已！

快樂探索！

如果你喜歡我的帖子，那么請考慮分享這個。謝謝！