本文介绍了如何通过Web页面结合MQTT协议，利用SIOT插件远程控制LED。首先，使用Bootstrap创建响应式控制网页，通过$.get()函数请求SIOT接口；接着，编辑SIOT插件，调整网页内容并与掌控板连接；最后，设置掌控板连接SIOT，并确保topic一致，实现网页按钮控制LED的效果。
前言
最近在学习MQTT，在想能不能通过网页发送消息至MQTT的topic来远程控制想要的东西，正好找到了一个插件，可以使用网页发送消息至SIOT的topic，然后topic接收消息后控制掌控版做相应的动作，接下来是步骤。
提示：以下是本篇文章正文内容，下面案例可供参考
一、编辑控制网页
Bootstrap是最受欢迎的HTML、CSS和JS框架，用来开发响应式布局、移动设备优先的WEB项目。使用Bootstrap编写的网页是响应式网页，可以在不同的客户端自适应，显得较为美观。
Bootstrap文档地址：https://v3.bootcss.com/
本文使用$.get()函数来请求SIOT接口远程控制LED，关于SIOT的API接口，可以参考下图：
网页核心代码：
<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="js/vue.js"></script>
<!-- <script src="js/app.js"></script> -->
<title></title>
<meta name="description" />
</head>
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
