【日程四】阿里云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