首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

TWaver HTML5 + Node.js + express + socket.io + redis(2)

2012-09-27 
TWaver HTML5 + Node.js + express + socket.io + redis(二)在上一篇TWaver HTML5 + Node.js + express +

TWaver HTML5 + Node.js + express + socket.io + redis(二)

在上一篇TWaver HTML5 + Node.js + express + socket.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文件,内容如下:

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

?

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

?

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

?


TWaver HTML5 + Node.js + express + socket.io + redis(2)

?

然后启动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


TWaver HTML5 + Node.js + express + socket.io + redis(2)
?
?然后,修改后台server.js文件,加载redis模块,并创建redis客户连接:

//添加监听,相应前台请求socket.sockets.on('connection', function(client){//响应getData消息client.on('getData', function () {//查询数据redis.hvals('datas', function(err, value){if(value == null || value == ''){client.emit('getData', null);}else{//初始化返回结果var result = {}, nodes = [], links = [];result.nodes = nodes;result.links = links;//解析数据for(var i=0,data,n=value.length; i<n; i++){//反序列化json对象data = JSON.parse(value[i]);//如果存在from属性,则为Linkif(data.from){    links.push(data);}//否则为Nodeelse{    nodes.push(data);}}//返回数据client.emit('getData', result);}});});});

?

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

热点排行