ESP Arduino 網頁架設手把手教學 – 用ESPAsyncWebServer建立你的第一個網頁

基礎知識建立

一般來說,我們要使用ESP建立一個網頁,有三種方式。

  • 使用TCP/IP 傳輸HTML文本,自行處理進來跟出去的數據。
    (大神等級,從0開始自己重新實做一次HTTP協定)
  • 使用 ESPWebServer 這個Library 建立網頁。
    (不推薦,ESPWebServer 為阻斷式,一次只能一個連線)
  • 使用 ESPAsyncWebServer 這個 Library建立網頁。
    (推薦,非阻斷式,可以同時多個連線,功能完整強大)

因此,我們會使用 ESPAsyncWebServer 這個 Library,來幫助我們快速的架出第一個網頁。

相依程式庫

雖然在開發上,ESP8266 與 ESP32的程式碼是一樣的,但是他們相依的Library有些許不同。

 

ESP8266ESP32
ESPAsyncTCPAsyncTCP
ESPAsyncWebServerESPAsyncWebServer
ESP8266WiFiWiFi

因此,在開發時,要注意不要引用錯Library了。
這邊就不再贅述安裝Library的過程,可以參考網路上已經有非常多範例了。

建立第一個 Hello World! 網頁

使用ESPASyncWebServer 開發網頁,非常的簡潔,只須少少幾行即可完成一個基礎的網頁。

我們希望一樣的Code,在ESP8266 / ESP32 都可以運行,因此在我們引用Library時,
要用 巨集if 去判斷現在的環境是ESP8266 還是 ESP32,才可以引用對的Library。

引用好Library之後,我們要先開啟ESP8266 / ESP32的WiFi,這邊以AP Mode作為示範,AP Mode的IP為192.168.4.1。
若是想讓ESP連接家裡WiFi,之後會有 mDNS 的應用文章,再請各位敬請期待。

呼叫了 WiFi.softAP(WIFI_SSID,WIFI_PASS); 之後,ESP就會成為一個WiFi熱點,WiFi名稱與密碼可以自行定義

接下來,我們開始實做ASyncWebServer,我們首先要產生一個ASyncWebServer的類別,設為全域變數。

Port 指定為 80(HTTP的Port)。

當我們用瀏覽器去存取http://192.168.4.1時,其實瀏覽器就是用GET方法去存取的,

因此我們需要新增一個Get方法,這樣當瀏覽器存取 192.168.4.1時,讓ESP回傳Hello World!,這樣網頁上就會有Hello World!

再新增notFound回傳值,使用者存取其他網頁時,例如 http://192.168.4.1/test,
因為我們還沒有定義”/test”這個Page,因此網頁需回傳404 notFound。

最後,啟動WebServer,開始等候連線。

完整程式碼

瀏覽器存取 http://192.168.4.1  取得Hello World!

瀏覽器存取 http://192.168.4.1/test 取得notFound!


發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料