响应式web-mqtt应用

2024-01-06 16:56:10

一、实验所需

二、SIOT
1、配置SIOT的json文件
打开json文件，然后更改登陆用户名和密码，网页端口可以改变，mqtt端口不可更改

2、获得本机IP地址
（1）运行SIOT应用，然后从程序框中可以看到本机的局域网IP地址，这将是SIOT的服务器地址

（2）登陆SIOT

（3）定义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="../static/js/jquery.cookie.min.js"></script>
<link rel="stylesheet" href="../static/css/style.css" crossorigin="anonymous">
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="../static/js/bootstrap/js/bootstrap.min.js"></script>
	<script src="../static/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="1.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="ledYellowOn" class="btn btn-success btn-lg">黄灯开</button>
		<button type="button" id="ledYellowOff" 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="fanOn" class="btn btn-success btn-lg">流水灯</button>
		<button type="button" id="time" class="btn btn-info btn-lg">获时间</button>
	</div>
	<script>
		$(function(){
			$('#ledRedOn').click(function(){
				$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=LEDR_ON&iname=602&ipwd=iot");
			});
			$('#ledRedOff').click(function(){
				$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=LED_OFF&iname=602&ipwd=iot");
			});
			$('#ledYellowOn').click(function(){
				$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=LEDY_ON&iname=602&ipwd=iot");
			});
			$('#ledYellowOff').click(function(){
				$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=LED_OFF&iname=602&ipwd=iot");
			});
			$('#ledBlueOn').click(function(){
				$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=LEDB_ON&iname=602&ipwd=iot");
			});
			$('#ledBlueOff').click(function(){
				$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=LED_OFF&iname=602&ipwd=iot");
			});
			$('#fanOn').click(function(){
				$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=LED_RUNON&iname=602&ipwd=iot");
			});
			$('#time').click(function(){
				$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=Time_get&iname=602&ipwd=iot");
			});
		});
	</script>
</body>
</html>

三、掌控板
选择主控板
选择网络服务为MQTT、WiFi和NTP
2、实现代码

四、效果展示

码农公寓

相关文章