MQTT基础:本地网页控制LED灯(SIOT+MQTT+掌控板)

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

梨花落-

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

阅读量1.2k

点赞数 1

分类专栏：图形化编程 mqtt 文章标签： html javascript mqtt

本文链接：https://blog.csdn.net/weixin_44636409/article/details/116201890

版权

前言该项目是在本地搭建一个MQTT服务器，网页连接MQTT客户端，并发布消息到对应topic到MQTT服务器，掌控板连接WiFI,与SIOT处于同一局域网。当网页的topic发布消息(按键交互之类的)，掌控板开启关闭掌控板LED的状态。该项目有四个步骤：...

摘要由CSDN通过智能技术生成

前言

该项目是在本地搭建一个MQTT服务器，网页连接MQTT客户端，并发布消息到对应topic到MQTT服务器，掌控板连接WiFI,与SIOT处于同一局域网。当网页的topic发布消息(按键交互之类的)，掌控板开启关闭掌控板LED的状态。

该项目有四个步骤：
1.插件的编写和MQTT服务器的搭建
2.掌控板代码
3.控制网页的编写
4.实现效果

1.插件的编写和MQTT服务器的搭建

1.1MQTT服务器的搭建
下载Siot1.3版本
百度网盘
提取码：time
a) 打开SIoT1.3可以的到一个config.json的文件，可以更改用户账号、密码，端口号等信息。可默认也可以改。

b) 运行SIoT会得到一个终端，复制其中的IP地址到浏览器打开，格式为IP地址:端口号

c) 填写账号密码后，点击发送信息，填写项目IP和设备号，格式为
主题（项目ID/设备名，随便发送一条信息，这样就新建了一个topic。

1.2.插件的编写
参考自：https://mc.dfrobot.com.cn/thread-300165-1-1.html
a) SIoT 编写网页插件的可行性分析
在这里插入图片描述
SIoT 是一个绿色软件，主目录下文件夹“static”中存放的是 SIoT 的 Web 管理页面，如图 2 所示。需要强调的是，SIoT 的 Web 管理页面和 SIoT 服务器之间是利用 WebAPI 的方式交互数据的。也就是说，和我们传统的动态网站开发方式不同，Web 管理页面并不是去读数据库，而是发送特定的 Web 请求，SIoT 再返回相应的数据，实现页面管理功能。这种软件设计能够将不同的网络服务隔离，开发效率更高。

b) SIoT 的 API 功能简介

                              表 1 SIoT 的 WebAPI 一览表

在这里插入图片描述

三、“智慧小屋（LED插件）”管理插件的编写
a）第一步：新建网页
复制“devices.html”文件，重命名为“sfarm.html”。然后在“modules”文件夹中，也将“devices.js”文件复制一份，改名为“sfarm.js”。HTML文件放在SIoT/static目录中。js文件放入SIoT/static/js
接下来需要修改“sfarm.html”文件。核心工作是修改“

”和 “

”之间的内容。

格式为：<button type="button" class="btn btn-default" @click="sendMsg_af(project.ID + '/设备','要发送的信息')">开蓝灯</button>

在这里插入图片描述
效果图为：

插件代码：

<!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">

最低0.47元/天解锁文章

梨花落-

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
MQTT基础:本地网页控制LED灯(SIOT+MQTT+掌控板)

前言该项目是在本地搭建一个MQTT服务器，网页连接MQTT客户端，并发布消息到对应topic到MQTT服务器，掌控板连接WiFI,与SIOT处于同一局域网。当网页的topic发布消息(按键交互之类的)，掌控板开启关闭掌控板LED的状态。该项目有四个步骤：...
复制链接

扫一扫