基礎知識建立
一般來說,我們要使用ESP建立一個網頁,有三種方式。
- 使用TCP/IP 傳輸HTML文本,自行處理進來跟出去的數據。
(大神等級,從0開始自己重新實做一次HTTP協定) - 使用 ESPWebServer 這個Library 建立網頁。
(不推薦,ESPWebServer 為阻斷式,一次只能一個連線) - 使用 ESPAsyncWebServer 這個 Library建立網頁。
(推薦,非阻斷式,可以同時多個連線,功能完整強大)
因此,我們會使用 ESPAsyncWebServer 這個 Library,來幫助我們快速的架出第一個網頁。
相依程式庫
雖然在開發上,ESP8266 與 ESP32的程式碼是一樣的,但是他們相依的Library有些許不同。
ESP8266 | ESP32 |
ESPAsyncTCP | AsyncTCP |
ESPAsyncWebServer | ESPAsyncWebServer |
ESP8266WiFi | WiFi |
因此,在開發時,要注意不要引用錯Library了。
這邊就不再贅述安裝Library的過程,可以參考網路上已經有非常多範例了。
建立第一個 Hello World! 網頁
使用ESPASyncWebServer 開發網頁,非常的簡潔,只須少少幾行即可完成一個基礎的網頁。
我們希望一樣的Code,在ESP8266 / ESP32 都可以運行,因此在我們引用Library時,
要用 巨集if 去判斷現在的環境是ESP8266 還是 ESP32,才可以引用對的Library。
1 2 3 4 5 6 7 8 9 | #include "Arduino.h" #if ESP8266 #include "ESPAsyncTCP.h" #include "ESP8266WiFi.h" #elif ESP32 #include "WiFi.h" #include "AsyncTCP.h" #endif #include <ESPAsyncWebServer.h> |
引用好Library之後,我們要先開啟ESP8266 / ESP32的WiFi,這邊以AP Mode作為示範,AP Mode的IP為192.168.4.1。
若是想讓ESP連接家裡WiFi,之後會有 mDNS 的應用文章,再請各位敬請期待。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #include "Arduino.h" #if ESP8266 #include "ESPAsyncTCP.h" #include "ESP8266WiFi.h" #elif ESP32 #include "WiFi.h" #include "AsyncTCP.h" #endif #include <ESPAsyncWebServer.h> #define WIFI_SSID "ESP_WiFi" // WiFi 名稱 #define WIFI_PASS "12345678" // WiFi 密碼 void setup(){ Serial.begin(115200); WiFi.disconnect(); WiFi.mode(WIFI_AP); // 切換WiFi到AP mode WiFi.softAP(WIFI_SSID,WIFI_PASS); // 打開ESP WiFi熱點 } |
呼叫了 WiFi.softAP(WIFI_SSID,WIFI_PASS); 之後,ESP就會成為一個WiFi熱點,WiFi名稱與密碼可以自行定義
接下來,我們開始實做ASyncWebServer,我們首先要產生一個ASyncWebServer的類別,設為全域變數。
1 | AsyncWebServer server(80); |
Port 指定為 80(HTTP的Port)。
當我們用瀏覽器去存取http://192.168.4.1時,其實瀏覽器就是用GET方法去存取的,
因此我們需要新增一個Get方法,這樣當瀏覽器存取 192.168.4.1時,讓ESP回傳Hello World!,這樣網頁上就會有Hello World!
1 2 3 | server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(200, "text/plain", "Hello World!"); }); |
再新增notFound回傳值,使用者存取其他網頁時,例如 http://192.168.4.1/test,
因為我們還沒有定義”/test”這個Page,因此網頁需回傳404 notFound。
1 2 3 | server.onNotFound([](AsyncWebServerRequest *request){ request->send(404, "text/plain", "not Found!"); }); |
最後,啟動WebServer,開始等候連線。
1 | server.begin(); |
完整程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | #include "Arduino.h" #if ESP8266 #include "ESPAsyncTCP.h" #include "ESP8266WiFi.h" #elif ESP32 #include "WiFi.h" #include "AsyncTCP.h" #endif #include <ESPAsyncWebServer.h> #define WIFI_SSID "ESP_WiFi" // WiFi 名稱 #define WIFI_PASS "12345678" // WiFi 密碼 AsyncWebServer server(80); void setup(){ Serial.begin(115200); WiFi.disconnect(); WiFi.mode(WIFI_AP); // 切換WiFi到AP mode WiFi.softAP(WIFI_SSID,WIFI_PASS); // 打開ESP WiFi熱點 server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(200, "text/plain", "Hello World!"); }); server.onNotFound([](AsyncWebServerRequest *request){ request->send(404, "text/plain", "not Found!"); }); server.begin(); } void loop(){ delay(1); // feed watchdog } |
瀏覽器存取 http://192.168.4.1 取得Hello World!
瀏覽器存取 http://192.168.4.1/test 取得notFound!