凶王的部落

前面提及到SPIFFS及ESP32 AsyncWebServer 的重要及優勢,現在可以用不同的原件來控制SEVER端的LED了,接下來鳩是接收SERVER端的

感測器的數值了,以往最簡單的做法就是瘋狂GET然後瘋狂刷新,這樣雖然也看到了數值但當你東西一多時你的網頁就等於是瘋狂的閃頻而已,

更不用說現在哪有網頁沒有按鈕的,你一直閃頻是要怎麼按按鈕?所以這就是局部刷新的重要性了

這個範例跟之前一樣網頁端也是用JQ來做處理的,他的功能很簡單,我用了三個SPAN來顯示不同區間的亂數0-100, 0-500 ,0-1000來確保多個數值處裡不會有問題

要抄要改也會比較明白,最下面我會放上下載專案的連結,

不過還是建議先看之前的這兩篇說明比較好,不然會卡住

SPIFFS: https://karta146831.pixnet.net/blog/post/334863831-esp32--%E5%A4%96%E6%8E%9Bspiffs-%E5%AE%89%E8%A3%9D%E6%95%99%E5%AD%B8

ESP8266 ESP32 AsyncWebServer(非同步伺服器) 控制LED含範例程式碼: https://karta146831.pixnet.net/blog/post/334863888-esp32-asyncwebserver%28%e9%9d%9e%e5%90%8c%e6%ad%a5%e4%bc%ba%e6%9c%8d%e5%99%a8%29-%e5%9f%ba%e7%a4%8e%e6%95%99%e5%ad%b8%e5%90%ab%e7%af%84

跟之前一樣server端,請將你的SSID 跟 PS 改成你要連的WIFI

下圖的這個部分就是發送給client端數值的區塊

程式燒好之後,可以在序列阜看到SERVER分配到的IP

打開瀏覽器,輸入你剛剛看到的IP,就可以連到ESP32 的SERVER了,記住你的連線設備要跟ESP32主板必須在同一個WIFI下

專案程式碼範例: https://drive.google.com/file/d/1fMW9Hqcvp_Cti1QZb3NWze5R--5Hg3k9/view?usp=sharing

學會了之後可以再嘗試下面的教學

ESP32-Webserver(非同步)透過Websocket傳送JSON格式:

https://karta146831.pixnet.net/blog/post/335437088-esp32-webserver%28%e9%9d%9e%e5%90%8c%e6%ad%a5%29%e9%80%8f%e9%81%8ewebsocket%e5%82%b3%e9%80%81json%e6%a0%bc%e5%bc%8f