疫情严重,不能出门,只能闲赋在家。如果出门,必带这几样东西,口罩,纸巾,小瓶洗手酒精。
每次按电梯按钮的时候,我都觉得电梯按钮上有亿万的病毒留在上面,按完后酒精洗一下手。后来我就又多带了一样东西,钥匙,专门按电梯用的。
后来我看到别人的电梯是这样的,我才明白这才是高手,根本不用手按,用脚踢。
几天前,好友Siko说有个做电梯的朋友想搞一个无接触操作的解决方案,问我和Troy能不能搞。就是用手机操作电梯,在小程序里实现,详细了解了一下,只要能发布消息到MQTT服务器上就可以了。搜了一下MQTT有JS版,这都不用后端,纯前端就能搞定的事情。立马答应下来,可以搞。
看着很简单的需求,真正搞起来的时候,还是很多坑的。
- uniApp生成二维码
做一个电梯按钮面板,用户按键后自动生成二维码让电梯识别。开始用了Start很多的q310550690的uni-app-qrcode自定义组件,与uniapp深度整合,开发起来很好用,但是生成的二维码不能识别,怎么调参数也不行,就是不能识别。然后用了Sansnn的uQRCode,生成二维码,轻轻一扫就能识别。好用。 - MQTT.js发送message到MQTT服务器
测试客户端:MQTT.fx
提到MQTT服务器,肯定会找到Mosquitto这个软件,开源的,直接用它安装服务器,安装在阿里云服务器上有点问题,用客户端测试没问题,但是用MQTT.js已连接上websocket就占用巨量资源,浏览器直接崩溃。切换到腾讯云才可以。
再就是阿里云有提供MQTT服务,包月200左右,挺贵的,但是服务挺稳定,推荐选择这个。而且阿里云官网有js版本的demo。直接copy过来就可以用。
总结一下:目前MQTT前端(js)有两个开源的解决方案,一个叫Paho,就是调用mqttws31.js的那个,这个对小程序支持比较差,不推荐。另外一个就是MQTT.js。支持各种浏览器,微信小程序,支付宝小程序,百度小程序。。。。。。推荐用这个。
中间还出了一个小插曲,因为前端一直调试不成功,请大神Troy搞了一个后端服务器发信息到MQTT服务器,前端调用后端API,发送用户按键信息到后端服务器,然后再发送信息到MQTT服务器,MQTT服务器再发送消息到电梯。
后来发现是自己装的MQTT服务器有问题,换成阿里云的MQTT服务,重新纯前端发送消息。完美解决问题。
微信小程序里的信息能够完美和电梯面板上的信息同步。按电梯按钮,电梯会把信息同步显示到微信小程序;按微信小程序的按钮,会同步显示到电梯上的显示面板。
一点经验:同一个页面,MQTT连接用同一个客户端ID,重新进入页面或者监测到离线了,重新连接一下。离开页面,或者onHide的时候强制end一下:client.end({force: true})。
贴一小段订阅的代码:
this.client.subscribe(topic, function(err) {
if (!err) {
console.log(‘订阅成功’);
} else {
console.log(‘订阅失败’);
}
});
看着很小的项目,折腾了一周。但是也积累了不少经验,再有这种小程序控制物联网的项目,应该得心应手,快速搞定。
像快递柜,共享单车,电动汽车。。。。。。可以想象的空间蛮大的。
最后来一张截屏:
540081584@qq.com
Tony老师@上海