NodeMCU之旅(四):實現Web配置頁面


引言

利用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.luahttpServer.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.jsSpectre.css來搭建前端頁面,通過AJAX來請求數據。

config.png

相比起后端,前端代碼大都是一些界面交互的邏輯,就不貼在這里了。

相關資源

你可以在NodeMCU-Tutorial下載到本文的相關資源和代碼。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM