响应式web-mqtt应用实验
一、实验目的及要求
实现响应式web对接物联网mqtt应用。
二、实验原理及内容
本实验基于掌控板和SIoT平台实现响应式Web对接物联网mqtt应用,先在SIoT端创建topic,然后通过在mind+的mqtt网络服务中配置和SIoT端一样的topic来实现消息的发送和订阅。
三、实验软硬件环境
软件:Mind+/Arduino/web编辑器
四、实验过程
源码仓库地址:https://gitee.com/kwong-chi-ho/internet-of-things-course.git
1.首先要为SIot写一个灯控制插件,要在SIot1.3/static文件夹中添加Light_Ctrl.html文件,在SIot/static/modules中添加Light_Ctrl.js文件。
Lght_Ctrl.html文件代码如下(可以从源码仓库下载SIot文件查看):
<!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="js/bootstrap/css/bootstrap.min.css" crossorigin="anonymous">
<script src="js/jquery-2.1.4.min.js" crossorigin="anonymous"></script>
<script src="js/jquery.cookie.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="js/vue.js"></script>
<script src="js/app.js"></script>
<title></title>
<meta name="description" />
</head>
<body class="no-skin">
<div class="container" id="appContainer">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a target="_blank">
<div src="images/obloq_logo.png" class="navbar-brand"
style="background-color: rgb(0, 0, 0);padding: 16px 20px;color: #fff;">SIoT</div>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html"> 项目列表</a></li>
<li><a href="devices.html">设备列表</a></li>
<li><a href="sendMsg.html">发送消息</a></li>
<li><a href="Light_Ctrl.html">灯控制(插件)</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#this" onclick="app.logout()"><span id="loginUserName"></span> 退出登陆</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<h5>{{webtitle}}</h5>
<section>
<table class="table table-striped">
<thead>
<tr>
<th>项目ID</th>
<th>红灯(Red)</th>
<th>绿灯(Green)</th>
<th>蓝灯(Blue)</th>
<th>操作</th>
<th>项目说明</th>
</tr>
</thead>
<tbody>
<tr v-for="(project,k) in projectsList">
<th scope="row">{{project.ID}}</th>
<td :class="project.ID+'_Red'">{{getlastMsg(project.ID,"Red")}}</td>
<td :class="project.ID+'_Green'">{{getlastMsg(project.ID,"Green")}}</td>
<td :class="project.ID+'_Blue'">{{getlastMsg(project.ID,"Blue")}}</td>
<td>
<button type="button" class="btn btn-default" @click="openurl(project.ID)">详情</button>
<button type="button" class="btn btn-default"
@click="sendMsg_af(project.ID + '/Beep','ON')">报警</button>
<button type="button" class="btn btn-default"
@click="sendMsg_af(project.ID + '/Beep','OFF')">关闭警报</button>
</td>
<td>{{project.Description}}</td>
</tr>
</tbody>
</table>
</section>
<div class="line"></div>
<div>注:Light_Ctrl灯控制插件指定了Topicid的名称,其中红灯为Red,绿灯为Green,蓝灯为Blue。</div>
</div>
</body>
<script src="modules/Light_Ctrl.js"></script>
</html>
Light_Ctrl.js文件代码如下(可以从源码仓库下载SIot文件查看):
new Vue({
el: '#appContainer',
data: {
loading: 0,
topic: '',
projectsList: [],
lastMsg: {},
editProjectData: {},
params: {},
webtitle: '灯控制插件'
},
created: function () {
// `this` 指向 vm 实例
this.fetchData();
},
methods: {
fetchData: function () {
var params = app.GetRequest(window.location.search);
this.getProjects();
if (params.topic) {
this.topic = params.topic;
}
},
getlastMsg(projectId, devId) {
var topic = projectId + "/" + devId;
app.get("/lastmessage?topic=" + topic, {}, function (res) {
console.log(res);
if (res.code != 1) {
app.alert(res.msg);
}
if (res.data.length > 0) {
$("." + projectId + "_" + devId).html("<b>" + res.data[0].Content + "</b> [" + res.data[0].Created + "]");
}
})
},
getProjects: function () {
var that = this;
app.get("/projects", this.params, function (res) {
console.log(res);
if (res.code != 1) {
app.alert(res.msg);
} else {
that.projectsList = res.data;
}
})
},
openurl: function (url) {
window.location.href = 'devices.html?projectID=' + url;
},
sendMsg_af: function (af_topic, af_msg) {
var that = this;
if (this.loading == 1) {
return;
}
this.loading = 1;
app.get("/publish", {
topic: af_topic,
msg: af_msg,
}, function (res) {
that.loading = 0;
if (res.code != 1) {
app.alert(res.msg);
} else {
app.alert("指令发送成功");
}
})
},
}
})
2.控制灯的web网页编写代码:
<!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="js/bootstrap/css/bootstrap.min.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<link rel="stylesheet" href="css/style.css" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap/js/bootstrap.min.js"></script>
<script src="js/vue.js"></script>
<!-- <script src="js/app.js"></script> -->
<title></title>
<meta name="description" />
</head>
<body>
<div class="container text-center"><img width="300px" src="./assets/siot.png" alt=""></div>
<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>
<br>
<div class="container text-center">
<button type="button" id="On" class="btn btn-success btn-lg">全亮</button>
<button type="button" id="Off" class="btn btn-info btn-lg">全灭</button>
</div>
<script>
$(function () {
$('#ledRedOn').click(function () {
$.get("http://192.168.31.21:8089/publish?topic=2018324107/Red&msg=ledRedOn&iname=siot&ipwd=dfrobot");
});
$('#ledRedOff').click(function () {
$.get("http://192.168.31.21:8089/publish?topic=2018324107/Red&msg=ledRedOff&iname=siot&ipwd=dfrobot");
});
$('#ledGreenOn').click(function () {
$.get("http://192.168.31.21:8089/publish?topic=2018324107/Green&msg=ledGreenOn&iname=siot&ipwd=dfrobot");
});
$('#ledGreenOff').click(function () {
$.get("http://192.168.31.21:8089/publish?topic=2018324107/Green&msg=ledGreenOff&iname=siot&ipwd=dfrobot");
});
$('#ledBlueOn').click(function () {
$.get("http://192.168.31.21:8089/publish?topic=2018324107/Blue&msg=ledBlueOn&iname=siot&ipwd=dfrobot");
});
$('#ledBlueOff').click(function () {
$.get("http://192.168.31.21:8089/publish?topic=2018324107/Blue&msg=ledBlueOff&iname=siot&ipwd=dfrobot");
});
$('#On').click(function () {
$.get("http://192.168.31.21:8089/publish?topic=2018324107/Beep&msg=ledRedOn&iname=siot&ipwd=dfrobot");
$.get("http://192.168.31.21:8089/publish?topic=2018324107/Beep&msg=ledGreenOn&iname=siot&ipwd=dfrobot");
$.get("http://192.168.31.21:8089/publish?topic=2018324107/Beep&msg=ledBlueOn&iname=siot&ipwd=dfrobot");
});
$('#Off').click(function () {
$.get("http://192.168.31.21:8089/publish?topic=2018324107/Beep&msg=ledRedOff&iname=siot&ipwd=dfrobot");
$.get("http://192.168.31.21:8089/publish?topic=2018324107/Beep&msg=ledGreenOff&iname=siot&ipwd=dfrobot");
$.get("http://192.168.31.21:8089/publish?topic=2018324107/Beep&msg=ledBlueOff&iname=siot&ipwd=dfrobot");
});
});
</script>
</body>
</html>
注意:以上控制灯的网页代码中,代码中的SIot地址和Topic要相应地改成自己的SIot地址和Topic
3.掌控板代码编写
主程序Mind+代码设计:
定义WiFi自动重连函数:
定义mqtt自动重连函数:
对四个Topic编码:
五、测试及结果分析
SIot界面内添加灯控制插件后界面显示如下图:
灯的web控制网页显示:
进行测试,打开红灯测试
关闭红灯,打开绿灯
关闭绿灯,打开蓝灯
点击全亮,三个灯全亮白灯
点击全灭,三个灯全灭
红绿蓝三个灯全打开
以上测试均成功。
六、实验结果分析
在实验的过程中,如果更换网段,则需重新运行ifconfig命令得到新的IP地址,SIoT端、网页端和mind+的MQTT配置的IP地址也要更换,且IP地址要一致;在网页端的topic需与SIoT端创建的topic保持一致,并确保运行过程中SIoT黑窗口保持打开。