ESP8266+網頁控制LED

• 本次我們將利用NodeMCU建立網絡服務。用戶通過瀏覽器可以訪問NodeMCU所建立的網頁。通過該網頁，用戶可實現對NodeMCU的控制。

效果演示

首先通過串口，當ESP8266連接WiFi成功之後會獲取網頁的IP地址，將該地址輸入到瀏覽器中。

通過網頁點擊LED按鍵，開發板上的LED進行變化。此時LED燈是滅的，當點下網頁中的LED按鍵，開發板上LED燈亮起來。再按一次LED熄滅。

程序

#include <ESP8266WiFi.h>        // 本程序使用 ESP8266WiFi庫
#include <ESP8266WiFiMulti.h>   //  ESP8266WiFiMulti庫
#include <ESP8266WebServer.h>   //  ESP8266WebServer庫
 
ESP8266WiFiMulti wifiMulti;     // 建立ESP8266WiFiMulti對象,對象名稱是 'wifiMulti'
 
ESP8266WebServer esp8266_server(80);// 建立網絡服務器對象，該對象用於響應HTTP請求。監聽端口（80）
 
void setup(void){
  Serial.begin(9600);   // 啓動串口通訊
 
  pinMode(D4, OUTPUT); //設置內置LED引腳爲輸出模式以便控制LED
  
  //通過addAp函數存儲  WiFi名稱       WiFi密碼
  wifiMulti.addAP("MEIZU", "11111111");  // 這三條語句通過調用函數addAP來記錄3個不同的WiFi網絡信息。
  wifiMulti.addAP("CMCC-yLaQ", "1123456"); // 這3個WiFi網絡名稱和密碼
  wifiMulti.addAP("taichi-maker3", "13572468");
                                                // 此處WiFi信息只是示例，請在使用時將需要連接的WiFi信息填入相應位置。
                                                // 另外這裏只存儲了3個WiFi信息，您可以存儲更多的WiFi信息在此處。
  Serial.println("正在連接Wifi,請稍等：");  
  int i = 0;                                 
  while (wifiMulti.run() != WL_CONNECTED) {  // 此處的wifiMulti.run()是重點。通過wifiMulti.run()，NodeMCU將會在當前
    delay(1000);                             // 環境中搜索addAP函數所存儲的WiFi。如果搜到多個存儲的WiFi那麼NodeMCU
    Serial.print(i++); Serial.print(' ');    // 將會連接信號最強的那一個WiFi信號。
  }                                          // 一旦連接WiFI成功，wifiMulti.run()將會返回“WL_CONNECTED”。這也是
                                             // 此處while循環判斷是否跳出循環的條件。
  
  // WiFi連接成功後將通過串口監視器輸出連接成功信息 
  Serial.println('\n');
  Serial.print("Connected to ");
  Serial.println(WiFi.SSID());              // 通過串口監視器輸出連接的WiFi名稱
  Serial.print("IP address:\t");
  Serial.println(WiFi.localIP());           // 通過串口監視器輸出ESP8266-NodeMCU的IP
 
  esp8266_server.begin();                           // 啓動網站服務
  esp8266_server.on("/", HTTP_GET, handleRoot);     // 設置服務器根目錄即'/'的函數'handleRoot'
  esp8266_server.on("/LED", HTTP_POST, handleLED);  // 設置處理LED控制請求的函數'handleLED'
  esp8266_server.onNotFound(handleNotFound);        // 設置處理404情況的函數'handleNotFound'
 
  Serial.println("HTTP esp8266_server started");//  告知用戶ESP8266網絡服務功能已經啓動
}
 
void loop(void){
  esp8266_server.handleClient();                     // 檢查http服務器訪問
}
 
/*設置服務器根目錄即'/'的函數'handleRoot'
  該函數的作用是每當有客戶端訪問NodeMCU服務器根目錄時，
  NodeMCU都會向訪問設備發送 HTTP 狀態 200 (Ok) 這是send函數的第一個參數。
  同時NodeMCU還會向瀏覽器發送HTML代碼，以下示例中send函數中第三個參數，
  也就是雙引號中的內容就是NodeMCU發送的HTML代碼。該代碼可在網頁中產生LED控制按鈕。 
  當用戶按下按鈕時，瀏覽器將會向NodeMCU的/LED頁面發送HTTP請求，請求方式爲POST。
  NodeMCU接收到此請求後將會執行handleLED函數內容*/
void handleRoot() {       
  esp8266_server.send(200, "text/html", "<form action=\"/LED\" method=\"POST\"><input type=\"submit\" value=\"LED\"></form>");
}
 
//處理LED控制請求的函數'handleLED'
void handleLED() {                          
  digitalWrite(D4,!digitalRead(D4));// 改變LED的點亮或者熄滅狀態
  esp8266_server.sendHeader("Location","/");          // 跳轉回頁面根目錄
  esp8266_server.send(303);                           // 發送Http相應代碼303 跳轉  
}
 
// 設置處理404情況的函數'handleNotFound'
void handleNotFound(){
  esp8266_server.send(404, "text/plain", "404: Not found"); // 發送 HTTP 狀態 404 (未找到頁面) 並向瀏覽器發送文字 "404: Not found"
}

更多內容：
ESP8266—學習進程目錄索引.