需要做一个智能家居的项目，室内的温度，湿度，光照，实时以及视频传输。采用方案，H5和java组合做客户端(app)，硬件用C去实现。正好我做客户端。。
H5 是用mui。。java用的是springBoot的WebFlux
app端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body style="width: 100%;height: 100%;">
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">控制</h1>
</header>
<div class="mui-content">
<div id="video" style="background-color: #000000;
width: 100%;height: 500px;margin-top: 5px;">
<img id="ImagePic" width="100%" height="100%" />
</div>
<div id="">
<div id="">
<h1>温度:</h1>
<div id="wendu" />
</div>
<div id="">
<h1>湿度:</h1>
<div id="shidu" />
</div>
<div id="">
<h1>光照:</h1>
<div id="guangzhao" />
</div>
</div>
</div>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">复位</span>
</a>
</nav>
<script type="application/javascript">
mui.ready(function() {
c = window.setInterval("getPicture()", 1000); //间隔多少秒去触发ajax
});
//获取视频。。。轮训获取图像
function getPicture() {
mui.ajax('http://172.20.10.4:8081/getReslut.action', {
data: {
category: 'news'
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
success: function(data) {
document.getElementById('ImagePic').src = "data:image/png;base64," + data;
}
});
}
mui.ready(function() {
c = window.setInterval("ifo()", 1000); //间隔多少秒去触发ajax
});
//获取参数。。。轮训获取
function ifo() {
mui.ajax('http://172.20.10.4:8081/getIfo.action', {
data: {
category: 'news'
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
success: function(data) {
document.getElementById('wendu').innerHTML = data.wendu;
document.getElementById('shidu').innerHTML = data.shidu;
document.getElementById('guangzhao').innerHTML = data.guangzhao;
}
});
}
</script>
</body>
</html>java端
①controller层
package com.example.demo.controller;
import com.alibaba.fastjson.JSON;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import java.io.*;
import java.util.HashMap;
import java.util.UUID;
@RestController
public class IndexController {
@PostMapping("/getIfo.action")
public Object getIfo() {
HashMap<String, String> hashMap = null;
String wendu = UUID.randomUUID().toString();
String shidu = UUID.randomUUID().toString();
String guangzhao = UUID.randomUUID().toString();
hashMap = new HashMap<String, String>();
hashMap.put("wendu", wendu);
hashMap.put("shidu", shidu);
hashMap.put("guangzhao", guangzhao);
return hashMap;
}
@PostMapping("/getReslut.action")
public Object getResult() throws IOException {
File[] files = new File[]{
new File("C:\\img/1.png"), new File("C:\\img/2.png"), new File("C:\\img/3.png"), new File("C:\\img/4.png")};
int i = (int) (Math.random() * 3);
FileInputStream fileInputStream = new FileInputStream(files[i]);
byte[] bytes = new byte[fileInputStream.available()];
fileInputStream.read(bytes);
return JSON.toJSONString(bytes);
}
}
2.pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.4.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-webflux</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>io.projectreactor</groupId>
<artifactId>reactor-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
效果---》
