一、實驗所需
二、SIOT
1、配置SIOT的json檔案
打開json檔案，然后更改登陸用戶名和密碼，網頁埠可以改變，mqtt埠不可更改
2、獲得本機IP地址
（1）運行SIOT應用，然后從程式框中可以看到本機的局域網IP地址，這將是SIOT的服務器地址
（2）登陸SIOT
（3）定義topic
3、網頁發布api
api測驗
發布訊息的格式：
Http://[SIoT的IP]:8080/publish?topic=xzr/001&msg=on&iname=siot&ipwd=dfrobot
說明：向topicid（主題）“xzr/001”發送內容為“on”的訊息，其中“xzr”是專案id，“001”是設備id，
回傳資料：{“code”:1,”msg”:”資料已發送”}
示例：
可以看到mqtt資訊發布成功
4、網頁書寫
引入css和js樣式
采用的是Bootstrap的框架來寫網頁，因而必須要引入他們的樣式檔案
Bootstrap官網
網頁代碼如下（示例）：
<!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="../static/js/bootstrap/css/bootstrap.min.css">
<script src="../static/js/jquery-2.1.4.min.js"></script>
<script src="../static/js/jquery.cookie.min.js"></script>
<link rel="stylesheet" href="../static/css/style.css" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<script src="../static/js/bootstrap/js/bootstrap.min.js"></script>
<script src="../static/js/vue.js"></script>
<!-- <script src="js/app.js"></script> -->
<title></title>
<meta name="description" />
</head>
<body>
<div class="container text-center"><img width="300px" src="1.png"/>選擇網路服務為MQTT、WiFi和NTP
2、實作代碼
四、效果展示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/287459.html
標籤：其他
上一篇：php對接快遞100介面，實作快遞查詢（幾分鐘搞定）
下一篇：中綴運算式轉換為后綴運算式