【Mind+】用SIOT通过MQTT在网页端控制掌控板

前言

除了使用阿里云，腾讯云，华为云等服务器之外，我们还可以通过搭建自己SIOT服务器实现MQTT信息收发，这里使用了网页的方法来通过MQTT信息控制掌控板

注：本文系湛江市第十七中学星火创客团队及岭南师范学院物联网俱乐部原创部分参赛项目，转载请保留声明

一、所需材料

Mind+
掌控板
局域网
SIOT环境
一条type C数据线

二、SIOT部分

1.配置SIOT的json文件

打开json文件，然后更改登陆用户名和密码，网页端口可以改变，mqtt端口不可更改
在这里插入图片描述

2、获得本机IP地址

运行SIOT应用，然后从程序框中可以看到本机的局域网IP地址，这将是SIOT的服务器地址
在这里插入图片描述

登陆SIOT

定义topic，发送一条信息可以产生topic了

3、网页发布api

api测试

发布消息的格式：

Http://[SIoT的IP]:8080/publish?topic=xzr/001&msg=on&iname=siot&ipwd=dfrobot

说明：向topicid（主题）“xzr/001”发送内容为“on”的消息，其中“xzr”是项目id，“001”是设备id。

返回数据：{“code”:1,”msg”:”数据已发送”}

示例：
在这里插入图片描述
可以看到mqtt信息发布成功，返回数据告诉我们数据已发送，这里已经实现了网页控制的一部分了

参考点击

4.网页书写

引入css和js样式

我们采用的是Bootstrap的框架来写网页，因而必须要引入他们的样式文件
在这里插入图片描述
Bootstrap官网

网页代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="../static/js/bootstrap/css/bootstrap.min.css">
	<script src="../static/js/jquery-2.1.4.min.js"></script>
	<script src=