响应式web mqtt应用（siot、mqtt、掌控板）
作者：互联网
一、实验内容
通过mqtt发送消息控制灯 的亮灭从而实现响应式web对接物联网mqtt
二、实验软硬件
软件：Mind+、web编辑器、siot
硬件：掌控板
三、实验步骤
1.控制端网页
1）代码如下
<!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"></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="fanOn" class="btn btn-success btn-lg">风扇开</button>
<button type="button" id="fanOff" class="btn btn-info btn-lg">风扇关</button>
</div>
<script>
$(function(){
$('#ledRedOn').click(function(){
$.get("http://192.168.43.139:8080/publish?topic=DFRobot /2018A14142ZFL&msg=ledRedOn&iname=siot&ipwd=dfrobot");
});
$('#ledRedOff').click(function(){
$.get("http://192.168.43.139:8080/publish?topic=DFRobot /2018A14142ZFL&msg=ledRedOff&iname=siot&ipwd=dfrobot");
});
$('#ledGreenOn').click(function(){
$.get("http://192.168.43.139:8080/publish?topic=DFRobot /2018A14142ZFL&msg=ledGreenOn&iname=siot&ipwd=dfrobot");
});
$('#ledGreenOff').click(function(){
$.get("http://192.168.43.139:8080/publish?topic=DFRobot /2018A14142ZFL&msg=ledGreenOff&iname=siot&ipwd=dfrobot");
});
$('#ledBlueOn').click(function(){
$.get("http://192.168.43.139:8080/publish?topic=DFRobot /2018A14142ZFL&msg=ledBlueOn&iname=siot&ipwd=dfrobot");
});
$('#ledBlueOff').click(function(){
$.get("http://192.168.43.139:8080/publish?topic=DFRobot /2018A14142ZFL&msg=ledBlueOff&iname=siot&ipwd=dfrobot");
});
$('#fanOn').click(function(){
$.get("http://192.168.43.139:8080/publish?topic=DFRobot /2018A14142ZFL&msg=fanOn&iname=siot&ipwd=dfrobot");
});
$('#fanOff').click(function(){
$.get("http://192.168.43.139:8080/publish?topic=DFRobot /2018A14142ZFL&msg=fanOff&iname=siot&ipwd=dfrobot");
});
});
</script>
</body>
</html>
2.掌控板代码
1）MQTT初始化
2）完整代码
3）编译并上传
四、实验效果
1.控制端网页效果如下
2.掌控板LED效果如下
3.siot收到的消息如下
标签：function,web,http,siot,192.168,topic,mqtt,click 来源： https://blog.csdn.net/weixin_43895761/article/details/116197381