實作網頁+emq控制掌控闆亮燈
- 用mind+寫一段程式控制掌控闆連接配接siot。
- 實作siot控制掌控闆亮燈。
- 網頁控制掌控闆亮燈。
- 使用emq橋接功能與掌控闆通信。
1.用mind+寫一段程式控制掌控闆連接配接siot
打開SioT1.3
查找本機所連接配接的WLAN，可知是192.168.31.28
根據config.json檔案提供的賬号密碼及端口登入進siot，IP位址+:8080，
發送消息建立一個topic。
使用示例程式連接配接上siot，代碼塊如下。
2.實作siot控制掌控闆亮燈
連接配接siot的測試完畢，換上點燈程式
在siot發送“ledRedOn”，成功點燈。
3. 網頁控制掌控闆亮燈
網頁代碼如下，将http://192.168.31.28:8080/publish?topic=2018A14129/dh&msg=ledRedOn&iname=siot&ipwd=dfrobot裡面的資料逐個替換為自己的IP、topic、name、pwd。（其他的不用動）
<!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="bootstrap.min.css">
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.cookie.min.js"></script>
<link rel="stylesheet" href="style.css" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<script src="bootstrap.min.js"></script>
<script src="vue.js"></script>
<!-- <script src="app.js"></script> -->
<title></title>
<meta name="description" />
</head>
<body>
<div class="container text-center"><img width="300px" src="./assets/siot.png" alt=""></div>
<div class="container text-center">
<button type="button" id="ledRedOn" class="btn btn-success btn-lg">紅燈開</button>
<button type="button" id="ledRedOff" class="btn btn-info btn-lg">紅燈關</button>
</div>
<br>
<div class="container text-center">
<button type="button" id="ledGreenOn" class="btn btn-success btn-lg">綠燈開</button>
<button type="button" id="ledGreenOff" class="btn btn-info btn-lg">綠燈關</button>
</div>
<br>
<div class="container text-center">
<button type="button" id="ledBlueOn" class="btn btn-success btn-lg">藍燈開</button>
<button type="button" id="ledBlueOff" class="btn btn-info btn-lg">藍燈關</button>
</div>
<script>
$(function() {
$('#ledRedOn').click(function() {
$.get("http://192.168.31.28:8080/publish?topic=2018A14129/dh&msg=ledRedOn&iname=siot&ipwd=dfrobot");
});
$('#ledRedOff').click(function() {
$.get("http://192.168.31.28:8080/publish?topic=2018A14129/dh&msg=ledRedOff&iname=siot&ipwd=dfrobot");
});
$('#ledGreenOn').click(function() {
$.get("http://192.168.31.28:8080/publish?topic=2018A14129/dh&msg=ledGreenOn&iname=siot&ipwd=dfrobot");
});
$('#ledGreenOff').click(function() {
$.get("http://192.168.31.28:8080/publish?topic=2018A14129/dh&msg=ledGreenOff&iname=siot&ipwd=dfrobot");
});
$('#ledBlueOn').click(function() {
$.get("http://192.168.31.28:8080/publish?topic=2018A14129/dh&msg=ledBlueOn&iname=siot&ipwd=dfrobot");
});
$('#ledBlueOff').click(function() {
$.get("http://192.168.31.28:8080/publish?topic=2018A14129/dh&msg=ledBlueOff&iname=siot&ipwd=dfrobot");
});
});
</script>
</body>
</html>
具體js等檔案我放在這裡：
連結：https://pan.baidu.com/s/1i7QpIqI8LOD_GzZBUhdEHQ
提取碼：3uu4
網頁效果如下：點選開關燈可直接控制掌控闆。
4. 使用emq橋接功能與掌控闆通信
去emq官網安裝emq環境在本機，教程如圖所示。
輸入本機IP位址加18083端口号進入emq面闆（如127.0.0.1:18083），進入後在規則引擎點選資源并建立。
點選工具進入websocket修改主機位址和端口号等。
在下面修改topic，改為siot上設定的topic，發送ledRedOn，使用emq橋接功能與掌控闆通信完成。