前言
最近在学习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>