TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建项目（三）

在上一篇TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建项目（二）中，给大家介绍了Node.js的安装；本篇将介绍Node.js的使用，您将了解到：

1. Node.js的web框架：express
2. Node.js的实时通讯框架：Socket.IO
3. Node.js的redis客户端：redis

一. express
虽然用Node.js写一个Hello World很简单：
新建一server.js文件，内容如下：

1 require( ' http ' ).createServer(function (req, res)  {
2    res.writeHead(200, {'Content-Type': 'text/plain'});
3    res.end('Hello World\n');
4} ).listen( 8080 ,  " 127.0.0.1 " );

然后打开命令行，进入server.js文件所在的目录，运行：node server.js，用浏览器打开http://localhost:8080/即能看到效果：

但稍微复杂的web应用就不能这么原始了，得借助于像express这样的Web Framework了。虽然express提供了Session等功能，还有其他基于express的认证框架passport等，但这里仅仅用express作为静态网页服务：
将如下内容写入server.js文件：

 1 // 引入express模块，如果此处出错，请确认express已安装，
 2 // 而且express在环境变量NODE_PATH目录中
 3 var express  =  require( ' express ' );
 4 // 创建web服务
 5 var server  =  express.createServer();
 6 // 以当前目录下的demo目录为web应用根目录
 7 server.use(express. static (__dirname  +   ' /demo ' ));
 8 // 显示错误信息，以方便调试
 9 server.use(express.errorHandler( {
10    showStack: true,
11    dumpExceptions: true
12} ));
13 // 启动express web服务，监听8080端口
14 server.listen( 8080 );

然后在server.js文件所在的目录创建demo目录，并创建demo.html文件，内容如下：

 1 <! DOCTYPE html >
 2 < html >
 3 < head >
 4      < title > Node.js Demo </ title >
 5 </ head >
 6 < body >
 7      < div >
 8         Hello Node.js !
 9      </ div >
10 </ body >
11 </ html >

 

 然后重启Node.js服务，用浏览器打开 http://localhost:8080/demo.html即能看到效果：

二. Socket.IO
Socket.IO提供了WebSockets服务，如果浏览器不支持HTML5标准的WebSocket，会用Flash代替，而且支持Json的自动解析和序列化，下面以提供TWaver HTML5拓扑数据为例，演示如何使用Socket.IO：
首先修改上面的server.js文件，加入如下内容，以创建WebSockets服务，并响应获取拓扑数据动作：

 1 // 引入Socket.IO模块，如果此处出错，请确认Socket.IO已安装，
 2 // 而且Socket.IO在环境变量NODE_PATH目录中
 3 var io  =  require( ' socket.io ' );
 4 // 创建WebSockets服务
 5 var socket  =  io.listen(server,  {
 6    log:false
 7} );
 8 // 添加监听，相应前台请求
 9 socket.sockets.on( ' connection ' , function(client) {
10    //查询数据
11    client.on('getData', function () {
12        //模拟数据
13        var result = {
14            nodes: [
15                {
16                    id: 'from',
17                    name: 'From',
18                    location: { x: 100, y: 100 }
19                },
20                {
21                    id: 'to',
22                    name: 'To',
23                    location: { x: 200, y: 200 }
24                }
25            ],
26            links: [
27                {
28                    id: 'from-to',
29                    name: 'Hello TWaver HTML5',
30                    from: 'from',
31                    to: 'to'
32                }
33            ]
34        };
35        //返回数据
36        client.emit('getData', result);
37    });
38} );

前台demo.html修改如下，注意不要漏掉引入Socket.IO js库，而且src地址必须为/socket.io/socket.io.js：

 1 <! DOCTYPE html >
 2 < html >
 3 < head >
 4      < title > Node.js Demo </ title >
 5      <!-- 引用Socket.IO js库 -->
 6      < script src = " /socket.io/socket.io.js " ></ script >
 7      < script src = " ./demo.js " ></ script >
 8 </ head >
 9 < body onload = " init() " >
10      < div id = " main " >
11      </ div >
12 </ body >
13 </ html >

 

再在demo目录添加demo.js文件，内容如下：

 1 // 定义获取数据消息key
 2 var GET_DATA  =   ' getData ' ;
 3 // WebSockets引用
 4 var socket;
 5
 6 function init()  {
 7    //创建WebSockets
 8    socket = io.connect('http://localhost/', { port: 8080 });
 9    //响应getData消息请求
10    socket.on(GET_DATA, onGetData);
11    //发送getData消息请求
12    socket.emit(GET_DATA);
13}
14
15 // getData消息处理方法
16 function onGetData(data)  {
17    console.log(data);
18    document.getElementById('main').innerHTML = JSON.stringify(data);
19}

最后重启Node.js，用浏览器重新打开http://localhost:8080/demo.html即能看到效果：

三. redis
redis是Node.js的Redis客户端，封装了Redis的指令，使用很简单，基本和Redis客户端命令一致。这里只用到了hashes，hashes相关的命令参见这里。
开始之前，先切换到seraver.js文件所在的目录，启动redis服务（默认数据将保存在当前目录，文件名为dump.rdb

然后启动redis客户端，运行如下命令，加入测试数据：

hset datas from "{\"id\":\"from\",\"name\":\"From\",\"location\":{\"x\":100,\"y\":100}}"
hset datas to "{\"id\":\"to\",\"name\":\"To\",\"location\":{\"x\":200,\"y\":200}}"
hset datas from-to "{\"id\":\"from-to\",\"name\":\"Hello TWaver HTML5\",\"from\":\"from\",\"to\":\"to\"}"
save
exit


然后，修改后台server.js文件，加载redis模块，并创建redis客户连接：

1 // 加载redis模块，创建redis客户端
2 var redis  =  require( ' redis ' ).createClient();
3 // 打印redis出错信息
4 redis.on( ' error ' , function (err)  {
5    console.log('Error ' + err);
6} );

再修改模拟数据部分，改为从数据库拿取数据，并将json格式的数据

 1 // 添加监听，相应前台请求
 2 socket.sockets.on( ' connection ' , function(client) {
 3    //响应getData消息
 4    client.on('getData', function () {
 5        //查询数据
 6        redis.hvals('datas', function(err, value){
 7            if(value == null || value == ''){
 8                client.emit('getData', null);
 9            }else{
10                //初始化返回结果
11                var result = {}, nodes = [], links = [];
12                result.nodes = nodes;
13                result.links = links;
14                //解析数据
15                for(var i=0,data,n=value.length; i<n; i++){
16                    //反序列化json对象
17                    data = JSON.parse(value[i]);
18                    //如果存在from属性，则为Link
19                    if(data.from){
20                        links.push(data);
21                    }
22                    //否则为Node
23                    else{
24                        nodes.push(data);
25                    }
26                }
27                //返回数据
28                client.emit('getData', result);
29            }
30        });
31    });
32} );

反序列化成js对象：

最后重启Node.js，用浏览器重新打开 http://localhost:8080/demo.html即能看到和前面一样的效果。
至此一切准备工作完毕，下一篇将介绍如何使用TWaver HTML5展示这里生成的数据，本文代码见 附件。