本节的主要任务是：创建一个html页面，为用户提供一个可以控制Led灯开与关的按钮，同时，能够展示出实时的温度曲线。也就是说，我们通过网页与服务端进行交互，下发命令，获取数据，实现前端、服务端、硬件端和数据库整个物联网系统中的双向数据流。
具体实现时，我们使用百度的Echarts进行数据可视化，展示温度曲线，使用jade作为html框架，建立html页面。
关于Echarts 3
Echarts是基于Canvas的，纯Javascript 的图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
关于jade
HTML页面使用Jade模块，它是Express官方默认的模板引擎，也是Node.js官方推荐的，它的写法比较简单和优雅。
首先，我们安装Jade模块，进入服务端的文件目录中，执行下面的命令：
npm install jade --save
实现步骤
1.修改server.js服务端文件，添加以下内容：
var path=require('path');
app.use(express.static(path.join(__dirname + '/', 'public')));
app.set('views',path.join(__dirname + '/','views'));
app.set('view engine','jade');
app.get('/',function(req,res){
'use strict';
res.render('index',{
title:'Home'
});
});
#####2.在server目录中（和server.js同一目录中）创建文件夹public/scripts，在scripts文件夹中放入需要引入的js库文件，并且把自己写的显示曲线的js文件也放入其中。至少应该包括：jquery-2.1.4.min.js、echarts.js、echarts-sensor.js（自己编写的，调用数据，并显示曲线）、led.js(用来控制led灯的开关)。
#####3.在server目录中（和server.js同一目录中）创建一个文件夹views，在views文件夹中再创建一个文件index.jade，其内容为：
doctype html
html
head
title=title
script(src='./scripts/jquery-2.1.4.min.js')
script(src='./scripts/echarts.js')
script(src='./scripts/echarts-sensor.js')
script(src='./scripts/led.js')
body
label 开关灯控制：
input(id="led",type="checkbox")
label(id="status_label")
div(id="container",style="min-width: 310px;height:400px;margin:0 auto")
#echarts-sensor.js的内容
$(function(){
var myChart = echarts.init(document.getElementById("container"));
var temperatures=[];
var times=[];
var mydate="";
$.ajax({
type : "get",
async : true,
url : "/sensor",。
dataType : "json",
success : function(result) {
if (result) {
for(var i=0;i<result.length;i++){
temperatures.push(result[i].temperature);
times.push(result[i].time);
}
mydate=result[result.length-1].date;
}
},
error : function(errorMsg) {
alert("图表请求数据失败!");
}
});
myChart.setOption({
title: {
left: 'center',//标题居中
text: '传感器数据曲线'
},
tooltip: {},
dataZoom:[ //缩放
{
type: 'slider',//加入滑块
start: 50,
end: 100
},
{
type: 'inside',
start: 50,
end: 100
}
],
xAxis: {
name:mydate,
nameGap:'55',
nameRotate:'-45',
data: times
},
yAxis: [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
},
splitLine : {show : true}
}
],
series: [{
type: 'line',
data: temperatures
}]
});
setInterval(function () {
$.ajax({
type : "get",
async : true,
url : "/sensor",
dataType : "json",
success : function(result) {
if (result) {
for(var i=0;i<result.length;i++){
temperatures.shift();
temperatures.push(result[i].temperature);
times.shift();
times.push(result[i].time);
}
mydate=result[result.length-1].date;
myChart.setOption({
xAxis: {
name:mydate,
data: times
},
series: [{
data: temperatures
}]
});
}
},
error : function(errorMsg) {
alert("图表请求数据失败!");
}
});
}, 5000);
})
#led.js的内容
$(function(){
$.ajax({
type : "GET",
async : true,
url:"/led",
success: function(status){
if(status){
$("#led").attr("checked",status[0].status);
if (status[0].status){
$("#status_label").html("<font color=#f00>(已开！)</font>");
}else{
$("#status_label").html("<font color=#0f0>(已关！)</font>");
}
}
}
});
$("#led").click(function() {
$.ajax({
type : "PUT",
async : true,
url:"/led",
data:{status:$('#led').is(':checked')},
success: function(status){
if (status[0].status){
$("#status_label").html("<font color=#f00>(已开！)</font>");
}else{
$("#status_label").html("<font color=#0f0>(已关！)</font>");
}
}
});
});
}
其实，最主要的是编写两个js文件，分别用来获取并展示温度数据以及下发控制命令，控制led的开与关。
将服务器运行起来，执行命令：
```node server.js```
然后，在浏览器中输入：
```http://localhost:3000```
可以看到，最终完成的页面为：
