引言
利用Web頁面做配置可以輕松適應用戶的多種設備,如Android, IOS等。本文將介紹如何在NodeMCU中實現配置頁面。
接線圖請參考NodeMCU之旅(三):響應配置按鈕。
配置頁面后端
HTTP服務
NodeMCU的可用運存大約只有32KB,非常小。
這里推薦一個輕量的HTTP服務庫NodeMCU-HTTP-Server。下載httpServer.lua即可。
服務靜態文件
在init.lua的尾部添加:
dofile('httpServer.lua')
並在switchCfg()
中啟動和關閉監聽:
function switchCfg()
if wifi.getmode() == wifi.STATION then
-- ...
httpServer:listen(80)
else
-- ...
httpServer:close()
end
end
測試HTTP服務
可以通過以下方法來測試服務器是否正常。
保存以下代碼為index.html:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>配置終端</title>
</head>
<body>
<p>這是我的配置頁面。</p>
</body>
</html>
上傳init.lua、httpServer.lua以及index.html到NodeMCU。
按下RST按鈕,按下配置按鈕,用手機連入熱點mymcu,在瀏覽器打開 http://192.168.4.1/ 。
如果一切正常,你將能夠看到這個頁面。
GZIP壓縮
為了節省空間,此HTTP服務庫還支持GZIP。比如:index.html可以壓縮為index.html.gz再上傳。
更多細節,請參閱NodeMCU-HTTP-Server。
設置IP地址
NodeMCU在自身開放的AP局域網中的默認IP地址是192.168.4.1,如果需要修改NodeMCU在本地局域網中的IP地址,請在開啟AP后,使用此函數設置:
設置IP
wifi.ap.setip()
注意,該函數只有在開啟AP后才有效。
后端接口
掃描附近熱點
給httpServer添加中間件,當訪問'/scanap'時:使用wifi.sta.getap()
獲取AP列表再轉換到JSON格式返回。
httpServer:use('/scanap', function(req, res)
wifi.sta.getap(function(table)
local aptable = {}
for ssid,v in pairs(table) do
local authmode, rssi, bssid, channel = string.match(v, "([^,]+),([^,]+),([^,]+),([^,]+)")
aptable[ssid] = {
authmode = authmode,
rssi = rssi,
bssid = bssid,
channel = channel
}
end
res:type('application/json')
res:send(cjson.encode(aptable))
end)
end)
注意:由於NodeMCU內存很小,附近熱點過多時,掃描熱點會造成內存不足自動重啟。此時請手動輸入WIFI信息進行配置。
配置WIFI信息
同樣添加一個中間件,當帶參數訪問'/config'時,配置WIFI信息,並返回連接結果。
TMR_WIFI = 4
httpServer:use('/config', function(req, res)
if req.query.ssid ~= nil and req.query.pwd ~= nil then
wifi.sta.config(req.query.ssid, req.query.pwd)
status = 'STA_CONNECTING'
tmr.alarm(TMR_WIFI, 1000, tmr.ALARM_AUTO, function()
if status ~= 'STA_CONNECTING' then
res:type('application/json')
res:send('{"status":"' .. status .. '"}')
tmr.stop(TMR_WIFI)
end
end)
end
end)
配置頁面前端
前端方面的選擇就比較多了,我使用了輕量的Zepto.js與Spectre.css來搭建前端頁面,通過AJAX來請求數據。
相比起后端,前端代碼大都是一些界面交互的邏輯,就不貼在這里了。
相關資源
你可以在NodeMCU-Tutorial下載到本文的相關資源和代碼。