树莓派实时温度湿度监测 优化后续

Posted by Ivan on 2016-11-17

树莓派这个项目已经过去了两月了,一直没有维护,直到我到了英国后发现,在英国连接北京的树莓派网速堪忧,只有100kb/s,每次想查看家里的温度情况,都要等待很长时间才能加载出来,有时候会丢包,这让我很不爽,于是我决定小小的优化一下。

优化css js

之前写的css与js一直没有压缩,这次决定用gulp压缩一下

安装 gulp

1
npm install -g gulp

安装 gulp-uglify 模块

1
npm install gulp-uglify

安装 gulp-minify-css 模块

1
npm install gulp-minify-css

压缩源:

1
2
asset/dist/js
asset/dist/css

目标:

1
2
asset/js
asset/css

好的 我们可以开始写gulpfile.js文件了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 获取 gulp
var gulp = require('gulp')
// 获取 uglify 模块(用于压缩 JS)
var uglify = require('gulp-uglify')
// 获取 minify-css 模块(用于压缩 CSS)
var minifyCSS = require('gulp-minify-css')
// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
// 1. 找到文件
gulp.src('asset/dist/js/*.js')
// 2. 压缩文件
.pipe(uglify())
// 3. 另存压缩后的文件
.pipe(gulp.dest('asset/js'))
})
// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', function () {
// 1. 找到文件
gulp.src('asset/dist/css/*.css')
// 2. 压缩文件
.pipe(minifyCSS())
// 3. 另存为压缩文件
.pipe(gulp.dest('asset/css'))
})
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改,当文件被修改则执行 script 任务
gulp.watch('js/*.js', ['script'])
gulp.watch('css/*.css', ['css'])
})
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['script', 'css' , 'auto'])

执行gulp即可进行自动压缩及监听任务

结构优化

这是原有的结构

前端:Semantic UI + eCharts + JQuery Datapicker

数据: json(时间)

后端:Python + Apache

后端的python程序负责测温度和测湿度,并生成json数据,为了保证事实性,python程序一直在读写相同的json文件,每一分钟读写一次,造成了json文件的比较大,大概有68KB,在前端是通过ajax加载的json文件,如果网速很慢的话,必然会造成很长时间的延迟。

为了解决这个问题,首先第一步就是减小json文件大小。设计了一个解决方案是,以前的前端已经可以加载每小时数据和每分钟数据,不过小时和分钟的数据是通过在js中忽略加载实现的。

而现在采用新的方案,在data数据目录下,分别建立两个目录。

1
2
data/min
data/hour

数据: json(min) / json(hour)

min的数据专门用于保存min,hour专门用于保存hour,为了解决旧数据迁移问题,首先先将内容移动到min目录下,在根目录下写了一个python小程序,执行挑选出hour数据并且迁移。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#!/usr/bin/python
import sys
import time
import json
import os
import string
def jsonRead(path,topath,name):
pathfile = path + '/' + name
topathfile = topath + '/' + name
if os.path.exists(pathfile):
file =open(pathfile,"r")
data = json.loads(file.read().decode('utf-8'))
i = 1
jsonWrite(data[0],topathfile)
for v in data:
i = i + 1
if(i%60==0):
jsonWrite(v,topathfile)
file.close()
else:
print 'unable to open ' + pathfile + 'file'
def jsonWrite(data,pathfile):
if os.path.exists(pathfile):
file =open(pathfile,"rb+")
file.seek(-1,os.SEEK_END)
file.truncate()
file.write(",")
json.dump(data,file)
file.write("]")
file.close()
print 'succes: '+ pathfile
else:
file =open(pathfile,"w")
file.write("[")
json.dump(data,file)
file.write("]")
file.close()
dir = 'web/data/min'
dist = 'web/data/hour'
files = os.listdir(dir)
for root, dirs, files in os.walk(dir):
for name in files:
jsonRead(dir,dist,name)

与此同时也需要修改 前端js 与 后端python
具体代码在 项目地址,不贴了。

最后,经过优化,速度大概提升了5倍,前端获取的json文件为1KB。

后续还会增加季度数据统计,等待数据量大一点的时候方便做数据统计工作。