【日程四】阿里雲IOT平臺 + Spring Boot 為前端實現資料介面

阿新 • • 發佈：2020-08-25

一、地圖

上一篇我們引入了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併發基礎