响应式web-mqtt应用实验

最新推荐文章于 2024-04-28 21:29:45 发布

火烧油

最新推荐文章于 2024-04-28 21:29:45 发布

阅读量346

点赞数

分类专栏： Mind+ MQTT

本文链接：https://blog.csdn.net/m0_56476120/article/details/117913014

版权

Mind+ 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

MQTT

2 篇文章 0 订阅

订阅专栏

响应式web-mqtt应用实验

文章目录

响应式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黑窗口保持打开。

火烧油

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
响应式web-mqtt应用实验

响应式web-mqtt应用实验文章目录响应式web-mqtt应用实验一、实验目的及要求二、实验原理及内容三、实验软硬件环境四、实验过程五、测试及结果分析六、实验结果分析一、实验目的及要求实现响应式web对接物联网mqtt应用。二、实验原理及内容本实验基于掌控板和SIoT平台实现响应式Web对接物联网mqtt应用，先在SIoT端创建topic，然后通过在mind+的mqtt网络服务中配置和SIoT端一样的topic来实现消息的发送和订阅。三、实验软硬件环境软件：Mind+/Arduino/web
复制链接

扫一扫