响应式web mqtt应用

一、软硬件环境

硬件方面：掌控板、掌控板扩展板、舵机，杜邦线若干
软件方面：Mind+、Dreamweaver、siot

二、MQTT的应用

这里我们采用MQTT中的SIOT作为连接。
SIoT为“虚谷物联”项目的核心软件，是为了帮助中小学生理解物联网原理，并且能够基于物联网技术开发各种创意应用。因为其重点关注物联网数据的收集和导出，是采集科学数据的最好选择之一。
1.下载siot（github项目开源地址： https://github.com/vvlink/SIoT/）
2.打开siot，获得ip地址，把上面的ip地址加上端口8080在网页上打开

2.登陆siot，初始化账号:siot，密码：dfrobot

3.在发送消息处添加主题（topic），点击发送，然后项目列表就有了主题。

三、Mind+编程

1.在Mind+编程软件中编写掌控板与siot连接控制的相关代码

2.在这里要填入siot平台的相关信息

四、Web网页制作

Web控制界面的制作先是使用Bootstrap进行界面布局，然后使用jQuery（一个 JavaScript库）监测按钮时间，并通过jQuery get() 方法请求SIoT接口，实现控制命令的下发，从而达到控制的目的。
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap地址： https://v3.bootcss.com/
① 在static目录下新建一个HTML文件，如demo.html。demo.html的head部分可以使用login.html的head部分（login.html是SIoT的登录界面文件。所在路径：./SIoT1.3/static/login.html）；
② 在body部分布局制作自己需要的界面（使用Bootstrap前端架构），并为自定义界面的组件（如按钮）设置ID用来添加动作（使用 JavaScript ）。实际上，添加动作就是调用SIoT提供的一系列的WebAPI。
关键步骤：

五、实验结果