响应式web mqtt应用

一、实验目的

二、实验原理

在这里插入图片描述

三、实验环境

硬件: 掌控板
软件: Mind+

四、实验步骤

  1. 在电脑中直接运行SIoT.exe
    在这里插入图片描述

  2. 运行成功后,电脑弹出命令行窗口如图1所示,找到此电脑的IP地址为192.168.31.11

注意:如无法打开,请注意电脑的8080端口是否被占用。

  1. 如下图2所示,打开浏览器(推荐谷歌),在地址栏输入自己服务器的IP地址(192.168.31.11:8080),看到SIoT的项目页面,说明你已经搭建好了服务器。

  2. 在图2中的登录框中输入账号siot ,密码dfrobot ,点击登录即可进入项目主页(下图3)。到这一步,可以暂停了,先去编写掌控板代码。

五、测试和结果

1、源代码

/*!
 * MindPlus
 * mpython
 *
 */
#include <MPython.h>
#include <DFRobot_Iot.h>

// 动态变量
String mind_s_message;
// 函数声明
void obloqMqttEventT0(String& message);
void obloqMqttEventT1(String& message);
// 静态常量
const String topics[5] = {"2018A14137/A","2018A14126/B","","",""};
const MsgHandleCb msgHandles[5] = {obloqMqttEventT0,obloqMqttEventT1,NULL,NULL,NULL};
// 创建对象
DFRobot_Iot myIot;


// 主程序开始
void setup() {
 mPython.begin();
 myIot.setMqttCallback(msgHandles);
 myIot.wifiConnect("602iot", "18wulian");
 while (!myIot.wifiStatus()) {yield();}
 display.setCursorLine(1);
 display.printLine("wifi连接成功");
 myIot.init("192.168.31.11","siot","","dfrobot", topics, 1883);
 myIot.connect();
 while (!myIot.connected()) {yield();}
 display.setCursorLine(4);
 display.printLine("mqtt连接成功");
}
void loop() {
 if ((mind_s_message==String("ledRedOn"))) {
  rgb.write(0, 0xFF0000);
 }
 else if ((mind_s_message==String("ledRedOff"))) {
  rgb.write(0, 0x000000);
 }
 else if ((mind_s_message==String("ledGreenOn"))) {
  rgb.write(1, 0x00FF00);
 }
 else if ((mind_s_message==String("ledGreenOff"))) {
  rgb.write(1, 0x000000);
 }
}


// 事件回调函数
void obloqMqttEventT0(String& message) {
 mind_s_message = message;
}
void obloqMqttEventT1(String& message) {
 mind_s_message = message;
}

2、图形化模块
在这里插入图片描述
3、SIoT 1.3
在这里插入图片描述
4、响应式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"></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>


	<script>
		$(function(){
			$('#ledRedOn').click(function(){
				$.get("http://192.168.43.209:8080/publish?topic=2018A14126/B&msg=ledRedOn&iname=siot&ipwd=dfrobot");
			});
			$('#ledRedOff').click(function(){
				$.get("http://192.168.43.209:8080/publish?topic=2018A14126/B&msg=ledRedOff&iname=siot&ipwd=dfrobot");
			});
			$('#ledGreenOn').click(function(){
				$.get("http://192.168.43.209:8080/publish?topic=2018A14126/B&msg=ledGreenOn&iname=siot&ipwd=dfrobot");
			});
			$('#ledGreenOff').click(function(){
				$.get("http://192.168.43.209:8080/publish?topic=2018A14126/B&msg=ledGreenOff&iname=siot&ipwd=dfrobot");
			});
			
		});
	</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

5、登录SIoT页面
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

六、实验体会

在这次实验中,写好代码之后运行,一直连接不上mqtt,经过反复的检查,发现原来是缺少了“mqtt发起连接”一句,之前也有过同样的错误,经过这次实验,更加让我对mqtt有了深刻的认识。

相关推荐
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值