MQTT基础篇之网页本地控制灯光（SIot+掌控板+Web）

最新推荐文章于 2021-06-14 22:19:00 发布

沈世安

最新推荐文章于 2021-06-14 22:19:00 发布

阅读量767

点赞数 1

分类专栏：物联网文章标签： html 物联网 mqtt

本文链接：https://blog.csdn.net/weixin_43913566/article/details/116163690

版权

前言

本篇教程是MQTT的基础篇，使用Siot在本地搭建一个MQTT服务器，，使用网页连接MQTT服务器，并发布相关的控制信息到服务器指定的Topic，掌控板在本地连接WIFI，与SIot处于同一局域网下，订阅相应的Topic，收到控制信息后开启关闭响应的灯光。本篇教程还包含了如何通过修改SIoT的配置文件，在管理页面新增一个“智慧家庭”插件来显示当前的灯光状态。
教程分为四个部分：

控制网页的编写以及连接MQTT
在SIoT管理页面增加插件
硬件实现部分
实现效果
资源下载

本文章用到的所有文件都可以在文末下载。

正文

一、控制端网页

网页使用Bootstrap进行界面布局，再使用jQuery监测按钮时间，使用Bootstrap编写的网页是响应式网页，可以在不同的客户端自适应，显得较为美观。网页通过$.get()函数请求SIoT接口，从而向掌控板发出命令。关于SIoT的网页API接口，可以参考下表。
在这里插入图片描述根据自己需要修改Get请求中的ip地址、Topic、Msg等信息即可。

网页部分代码

<!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="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.min.js"></script>
	<script src=<

最低0.47元/天解锁文章

沈世安

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
MQTT基础篇之网页本地控制灯光（SIot+掌控板+Web）

前言本篇教程是MQTT的基础篇，使用Siot在本地搭建一个MQTT服务器，，使用网页连接MQTT服务器，并发布相关的控制信息到服务器指定的Topic，掌控板在本地连接WIFI，与SIot处于同一局域网下，订阅相应的Topic，收到控制信息后开启关闭响应的灯光。本篇教程还包含了如何通过修改SIoT的配置文件，在管理页面新增一个“智慧家庭”插件来显示当前的灯光状态。教程分为四个部分：控制网页的编写以及连接MQTT在SIoT管理页面增加插件硬件实现部分实现效果资源下载本文章用到的所有文件都可以
复制链接

扫一扫