基于掌控板和SIoT平台实现响应式Web对接物联网MQTT应用

SIoT 是一款简单易用的 MQTT 服务器软件，也是“虚谷物联”项目的核心软件之一。SIoT 不用安装，也不用注册、设置，一键运行后，其他物联网设备（如掌控板）按照一定的规范接入即可正常使用。正因为这一点，SIoT 得到创客老师们的热捧，成为中小学物联网教学的重要支撑软件。

本项目基于掌控板和SIoT平台实现了响应式web对接物联网，可以在远程Web端来进行设备的开关。

一、SIoT的工作流程

SIoT 运行后，会启动两种网络服务，一是 MQTT 服务，作用是处理 MQTT 消息；二是 Web 服务，用来运行 Web 管理页面，实现在线管理。具体工作流程如下图所示。

二、SIoT的API功能简介

SIoT 的 Web 管理页面和 SIoT 服务器之间是利用 WebAPI 的方式交互数据的。我们只需要利用 SIoT 提供的 WebAPI，然后只要通过浏览器访问特定的地址即可。此次只用到了发送消息的地址：
http://SIoT 的IP:8080/publish？topic=xzr/001&msg=on&iname=siot&ipwd=dfrobot

这里的“SIoT 的IP”指运行 SIoT 的电脑 IP 地址，iname 和ipwd 要替换为 SIoT 的用户名和密码。

SIoT提供了丰富的API，SIoT的WebAPI如下图：

SIoT 文档地址：https://siot.readthedocs.io/zh_CN/latest/

三、响应式Web端代码编写

本项目的两点可以制作个性化的响应式控制页面。控制页面是使用Bootstrap进行界面布局，再使用jQuery监测按钮时间，然后再通过$.get()函数请求SIoT的Web API接口，从而向掌控板发出命令。

Bootstrap文档地址：https://v3.bootcss.com/

控制页面部分代码如下：

	<div class="container text-center">
		<h1>开关控制</h1>
	</div>
	<br>
	<div class="container text-center">
		<button type="button" id="ledRedOn" class="btn btn-success btn-lg">红灯开</button>
		<button type="button" id="ledRedOff" class="btn btn-info btn-lg">红灯关</button>
	</div>
	<br>
	<div class="container text-center">
		<button type="button" id="ledGreenOn" class="btn btn-success btn-lg">绿灯开</button>
		<button type="button" id="ledGreenOff" class="btn btn-info btn-lg">绿灯关</button>
	</div>
	<br>
	<div class="container text-center">
		<button type="button" id="ledBlueOn" class="btn btn-success btn-lg">蓝灯开</button>
		<button type="button" id="ledBlueOff" class="btn btn-info btn-lg">蓝灯关</button>
	</div>

JS部分代码：

	<script>
		$(function(){
			$('#ledRedOn').click(function(){
				$.get("http://192.168.31.94:8080/publish?topic=2018A14133/黄仙龙red_led&msg=ledRedOn&iname=602&ipwd=iot");
			});
			$('#ledRedOff').click(function(){
				$.get("http://192.168.31.94:8080/publish?topic=2018A14133/黄仙龙red_led&msg=ledRedOff&iname=602&ipwd=iot");
			});
			$('#ledGreenOn').click(function(){
				$.get("http://192.168.31.94:8080/publish?topic=2018A14133/黄仙龙green_led&msg=ledGreenOn&iname=602&ipwd=iot");
			});
			$('#ledGreenOff').click(function(){
				$.get("http://192.168.31.94:8080/publish?topic=2018A14133/黄仙龙green_led&msg=ledGreenOff&iname=602&ipwd=iot");
			});
			$('#ledBlueOn').click(function(){
				$.get("http://192.168.31.94:8080/publish?topic=2018A14133/黄仙龙blue_led&msg=ledBlueOn&iname=602&ipwd=iot");
			});
			$('#ledBlueOff').click(function(){
				$.get("http://192.168.31.94:8080/publish?topic=2018A14133/黄仙龙blue_led&msg=ledBlueOff&iname=602&ipwd=iot");
			});
		});
	</script>

完整代码点此下载

四、SIoT端配置和设备端代码编写
SIoT的配置

1.双击运行SIoT_windows1.2.exe（根据你的电脑，正确选择64位或者32位），将看到一个黑色的CMD窗口。窗口中显示各种连接信息。

如果你想维持你的计算机作为MQTT服务器的话，请不要关闭它。

注意：SIoT运行后会列出这个电脑可以使用的所有IP，169开头的一般是私有IP地址，不能作为MQTT服务器IP

2.通过发送消息来创建Topic

Topic的格式为：项目ID/设备名。例如：Seifer/light1
消息发送成功后，系统会自动根据Topic建立“项目”和“设备”。如果项目和设备已经存在则在此设备上追加数据。

本项目为掌控板的三个灯分别创建了Topic，用来接收Web端发送的控制信息。

设备端代码编写

在Web端上分别定义了三个灯的按钮，每个按钮都有自己的id，当点击按钮时，Web端就会把所点击按钮的id发送到SIoT相对应的Topic，掌控板上烧录了接收到Topic消息的代码，接收到消息后然后通过判断语句来判断消息是哪个按钮的id，进而来控制灯的开关。

设备端代码如下：

实验结果演示：https://www.bilibili.com/video/BV1a54y1j7yx/