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.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下载到本文的相关资源和代码。
NodeMCU之旅(四):实现Web配置页面的更多相关文章
- 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入
使用react全家桶制作博客后台管理系统 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...
- Jenkins节点配置页面,启动方法没有"Launch agent via Java Web Start"解决方法?
Jenkins的配置从节点中默认没有Launch agent via JavaWeb Start,解决办法: 步骤: 1:打开"系统管理"——"Configure Glo ...
- springboot情操陶冶-web配置(四)
承接前文springboot情操陶冶-web配置(三),本文将在DispatcherServlet应用的基础上谈下websocket的使用 websocket websocket的简单了解可见维基百科 ...
- 前端之旅一:vscode调试web配置
vscode调试web配置 第一步:安装vscode,并启动(vscode的安装包自行到其官网上下载) 第二步:在vscode上安装chrome插件 第三步:配置,启动调试 配置信息 { // Use ...
- web配置nagios工具
Nagios是一款开源的免费网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报警第一时间通知网站运维人员, ...
- NodeMCU之旅(一):构建、刷入固件,上传代码
扬帆起航 本系列文章将试图实现,使用Web页面远程点亮led.具体包括: 在NodeMCU上搭建HTTP服务器,使其可以通过Web页面配置要接入的网络. 在配置页面可以显示附近中英网络名与信号强度. ...
- ASP.NET4 与 VS2010 Web 开发页面服务改进
转:http://blog.163.com/kele_lipeng/blog/static/81345278201132754729336/ 作者:朱先忠 本文将接着上一篇 ASP.NET4与VS20 ...
- Springboot系列(四)web静态资源配置详解
Springboot系列(四)web静态资源配置 往期精彩 SpringBoot系列(一)idea新建Springboot项目 SpringBoot系列(二)入门知识 SpringBoot系列(三)配 ...
- HTTPS Web配置举例
http://www.h3c.com.cn/Products___Technology/Technology/Security_Encrypt/Other_technology/Representat ...
随机推荐
- list实例应用
Java代码如下: package Test01; import java.util.ArrayList; import java.util.List; public class Test02 { p ...
- ural1542 Autocompletion
Autocompletion Time limit: 2.0 secondMemory limit: 64 MB The Japanese are infinitely in love with ma ...
- Ubuntu 下开发 Android 环境变量设置
-----------------------------------------------------ANDROID_SDK_HOME:/home/cmm/avds PATH:/home/cmm/ ...
- 解决Only the original thread that created a view hierarchy can touch its views
这种异常出现在子线程中处理UI操作产生的异常,将UI操作放在主线程中就OK了
- (中等) CF 585C Alice, Bob, Oranges and Apples,矩阵+辗转相除。
Alice and Bob decided to eat some fruit. In the kitchen they found a large bag of oranges and apples ...
- hibernate--多对多双向关联(少用)
老师知道自己教了哪些学生, 学生也知道教自己的有哪些老师. Teacher.java: package com.bjsxt.hibernate; import java.util.HashSet; i ...
- 在MyEclipse8.6中设置jQuery自动提示 - 肖飞figo的云计算专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- clip实现圆环进度条
效果主要通过clip和transform:rotate实现 把圆环分为左右两个部分,通过角度旋转对图片剪切旋转角度<=180度的时候之旋转右边,当大于180度时右边固定旋转180度的同时旋转左边 ...
- (简单) POJ 3368 Frequent values,RMQ。
Description You are given a sequence of n integers a1 , a2 , ... , an in non-decreasing order. In ad ...
- (简单) FZU 1686 神龙的难题 , DLX+可重复覆盖。
Description 这是个剑与魔法的世界.英雄和魔物同在,动荡和安定并存.但总的来说,库尔特王国是个安宁的国家,人民安居乐业,魔物也比较少.但是.总有一些魔物不时会进入城市附近,干扰人民的生活.就 ...