signed

QiShunwang

“诚信为本、客户至上”

响应式web对接物联网mqtt应用

2021/5/14 21:02:40   来源:

响应式web对接物联网mqtt应用

    • 一、SIoT的配置
          • 1、运行SIoT系统
          • 2、电脑连接WIFI、获取电脑IP
          • 3、打开SIoT网页端、登陆SIoT网页端
          • 4、通过发送消息来创建Topic
    • 二、响应式Web端代码编写
    • 三、设备端代码编写

一、SIoT的配置

1、运行SIoT系统

双击运行SIoT_win.exe
可以看到一个黑色的CMD窗口, 使用SIoT过程中一定不要关该窗口。
在这里插入图片描述
siot下载地址:http://mindplus.dfrobot.com.cn/siot(根据自己电脑的系统,对应下载SIoT软件压缩包,例如Windows系统下载win32)

2、电脑连接WIFI、获取电脑IP

将电脑连接到WIFI。提供WIFI的路由器或手机热点可以不连接互联网,因为使用SIoT实现物联网应用时,只需要使用路由器或手机热点建立一个局域网即可。
电脑每次连接WIFI,都会生成一个IP地址,每个IP地址对应的电脑都是唯一的。运行SIOT程序后会在电脑上建立一个SIOT服务器,其他设备要访问这个服务器,需要知道这个SIOT服务器所在电脑的IP地址

3、打开SIoT网页端、登陆SIoT网页端

打开电脑浏览器,在网址栏输入在“STEP3”中获得的IP地址加上“:8080”,如:192.168.43.245:8080
账号:siot
密码:dfrobot
输入账号、密码后,点击“登陆”,登陆后页面如下:
在这里插入图片描述

4、通过发送消息来创建Topic

Topic的格式为:项目ID/设备名。例如:Seifer/light1
消息发送成功后,系统会自动根据Topic建立“项目”和“设备”。如果项目和设备已经存在则在此设备上追加数据。
本项目为三个灯分别创建了Topic,用来接收Web端发送的控制信息。
在这里插入图片描述

二、响应式Web端代码编写

运行如图:
在这里插入图片描述
具体代码参考:https://gitee.com/Rambo0203/responsive-web.git

三、设备端代码编写

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