【日程四】阿里雲IOT平台 + Spring Boot 為前端實現數據接口

一 、地圖

上一篇我們引入了Mybatis + Mysql 的支持 ，並且實現了User的增刪查改 。這篇我們有了新需求，需要刪掉有關user的一切，只保留思想。

二、問題

​ 前端來了新需求，需要開發一套數據接口給前端 ，來支持構建一個數據可視化大屏和簡單的設備控制功能。

​ 問題是，我該如何從阿里雲獲取到數據，並為前端提供高可用的接口呢？

三、回答

Ⅰ、阿里雲IOT操作

以下是需要控制的設備集

5種設備，一共9個

我們在阿里雲IOT平台創建這些設備

5種產品就創建好了

9個設備也創建好了

根據文檔，在產品=》查看=》功能定義=》編輯草稿=》添加自定義功能 中加入相關屬性值

Ⅱ、設備鏈接IoT平台

多虧阿里雲OpenAPI的支持，基本上所有接口都可以查的到

根據文檔說明，我們來使用Nodejs上線一個溫度傳感器

前提是已經安裝了NodeJs ,下邊的官方教程里有。並且還需要 對 進行npm 淘寶源配置。

文檔地址 https://help.aliyun.com/document_detail/96618.html?spm=a2c4g.11186623.2.18.2be52cf0EESLJm

新建一個文件夾

用vs code打開 ,並在終端輸入

npm init -y

回車

查看文檔，在終端中輸入 以下命令

npm install alibabacloud-iot-device-sdk --save

我們采用官方的一機一密型鏈接

// node引入包名
const iot = require('alibabacloud-iot-device-sdk');

//創建iot.device對象將會發起到阿里雲IoT的連接
const device = iot.device({
  productKey: '<productKey>', //將<productKey>修改為實際產品的ProductKey
  deviceName: '<deviceName>',//將<deviceName>修改為實際設備的DeviceName
  deviceSecret: '<deviceSecret>',//將<deviceSecret>修改為實際設備的DeviceSecret
});


//監聽connect事件
device.on('connect', () => {
  //將<productKey> <deviceName>修改為實際值
  device.subscribe('/<productKey>/<deviceName>/user/get'); 
  console.log('connect successfully!');
  device.publish('/<productKey>/<deviceName>/user/update', 'hello world!');
});

//監聽message事件
device.on('message', (topic, payload) => {
  console.log(topic, payload.toString());
});

這里需要我們將里邊的 進行替換

查看設備詳情

點擊一鍵復制

創建index.js文件，復制例程，復制證書

運行

 node index.js

設備成功上線

嘗試發布消息

設備端也成功接受到了消息

Ⅲ、雲端接入IoT平台

我們使用雲端 Java SDK接入阿里雲IOT

https://help.aliyun.com/document_detail/30581.html?spm=a2c4g.11186623.6.744.7c023d66zamAav

引入兩個依賴

下邊有一個官方例程

我們將代碼放在測試中運行

運行，可以看到設備端這里也成功接受到了消息

阿里這里把IOTSDK部分和阿里雲平台SDK分開，先用阿里雲SDK構建客戶端，然后用IOT SDK構建請求，並交給客戶端發送和接收。

例程中以 Pub API作為例子，所以叫PubRequest 和PubResponse 具體其他API可以看文檔，也可以用OpenAPI 自動生成代碼

API列表 https://help.aliyun.com/document_detail/69893.html?spm=a2c4g.11186623.6.750.30d153c7EuaZIY

OpenAPI https://api.aliyun.com/#/?product=Iot&api=CreateProduct

Ⅳ、設備數據雲端存儲、服務端訂閱

由於我們之前為產品設置的物模型相當於阿里雲在Topic機制上自建的服務，有很多限制。我們采用自定義Topic的方式，將數據以AMQP流轉到我們的服務器上存儲，方便以后的使用

首先為 溫度探測器創建自定義Topic

之后創建服務端訂閱 ，具體可參考文檔https://help.aliyun.com/document_detail/149716.html?spm=a2c4g.11186623.6.621.341831b4KbbQy5

將需要的依賴放入pom中

這里示例代碼很長，需要結合AMQP客戶端接入說明來理解。這里先看線程池

例程中的AMQP客戶端采用異步方式處理業務，所以利用了線程池

配合相關資料

ExecuterService https://www.cnblogs.com/jfaith/p/11114470.html

ThreadPoolExecuter https://www.jianshu.com/p/f030aa5d7a28

LinkedBlockingQueue https://blog.csdn.net/tonywu1992/article/details/83419448

我是看不懂

沒關系，先放下，我們先為溫度探測器建立數據庫（我感覺以后可以把這些數據流轉到阿里雲數據庫）

create database iot;
use iot;
create table `temperature_detector`(
id int primary key auto_increment,
tem float(4,2) not null,
time timestamp default current_timestamp not null
)engine=InnoDB character set utf8

這里 auto_increment 設定id自增 ，time 默認值為當前時間 ，引擎使用innoDB 字符集為utf8（設置過數據庫字符集就不需要再設置了）

新建了數據庫iot， 我們需要修改Spring 配置文件的url部分

為該數據庫創建model

創建mapper

創建service 和controller

這里的@Crossorigin是為了處理跨域請求設定的，我們之后需要用另一個服務器去請求這個地址

將阿里雲例程中的方法刪掉static，我們將他注冊為Spring 的@Compoment ，默認是單例模式

並為它注入mapper（感覺是非正規操作）

這里我們為該組件實現ApplicationRunner 接口，讓它隨Spring Boot啟動

start方法就是例程中的main里的代碼，里邊按文檔填補上需要的參數

我們在消息處理函數中將數據插入數據庫

完工

先啟動Spring Boot

可以看到建立了連接

啟動設備，隨機一些數據

雲端也成功收到了數據

插入成功

瀏覽器也能Get到數據

這里我們使用Echarts組件寫一個網頁，動態顯示我們的數據

根據文檔下載Vue-Cli https://cli.vuejs.org/

新建一個文件夾，用vs code打開，輸入vue ui打開vue腳手架

根據指引新建項目

cd 到 項目文件夾，刪掉默認的組件等代碼，只保留App.vue

打開Echarts官網，[https://echarts.apache.org/zh/tutorial.html#在 webpack 中使用 ECharts](https://echarts.apache.org/zh/tutorial.html#在 webpack 中使用 ECharts)

在終端中輸入如下指令安裝Echarts依賴，jquery依賴

npm install echarts jquery --save

根據指引編寫代碼

<template>
  <div id="app">
   
  </div>
</template>

<script>
  import echarts from "echarts"
  import $ from "jquery"

export default {
  name: 'App',
  mounted(){
    $
   var chart=echarts.init(document.getElementById("app"))

   var option = {
    animation:false,
    xAxis: {
        type: 'time',
    },
    yAxis: {
        type: 'value'
    },
    dataset:{
        source:[{"id":111,"tem":"7.71","time":"2020-08-24 20:43:47"},{"id":110,"tem":"6.89","time":"2020-08-24 20:43:46"},{"id":109,"tem":"13.28","time":"2020-08-24 20:43:45"},{"id":108,"tem":"6.08","time":"2020-08-24 20:43:44"},{"id":107,"tem":"5.76","time":"2020-08-24 20:43:43"},{"id":106,"tem":"13.67","time":"2020-08-24 20:43:42"},{"id":105,"tem":"11.04","time":"2020-08-24 20:43:41"},{"id":104,"tem":"5.2","time":"2020-08-24 20:43:40"},{"id":103,"tem":"11.45","time":"2020-08-24 20:43:39"},{"id":102,"tem":"13.03","time":"2020-08-24 20:43:38"}]
    },
   series: {
        type:"line",
        encode:{
            x:[2],
            y:[1]
        }
    }
};
chart.setOption(option)


   setInterval(()=>{

    $.get("http://192.168.0.106/tem/10",(res)=>{
       option.dataset.source=res;
       chart.setOption(option)
     })
   },1000)
  }
}
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
body,html{
width: 100%;
height: 100%;
}
#app{
width: 100%;
height: 300px;
}
</style>

使用 npm run serve 啟動vue項目

啟動Spring Boot 項目

啟動設備端項目

可以在網頁上動態地看到數據的變化了

---

待施工

@PostConstruct https://blog.csdn.net/u012578322/article/details/84112451

ApplicationRunner 關於與Spring Boot 程序一起運行的問題 需要對Spring Boot框架有新的理解

spring websocket

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

concurrent 包的Java並發基礎

技能點

技能點

阿里雲Iot平台操作

阿里雲設備端NodeJs接入

阿里雲雲端JavaSDK接入

阿里雲IOT 服務器訂閱JavaSDK實現

Vue+Echarts+jquery