原文出处:http://twaver.servasoft.com/?p=3515
在上一篇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文件,内容如下:
然后打开命令行,进入server.js文件所在的目录,运行:node server.js,用浏览器打开http://localhost:8080/即能看到效果:
但稍微复杂的web应用就不能这么原始了,得借助于像express这样的Web Framework了。虽然express提供了Session等功能,还有其他基于express的认证框架passport等,但这里仅仅用express作为静态网页服务:
将如下内容写入server.js文件:
然后在server.js文件所在的目录创建demo目录,并创建demo.html文件,内容如下:
然后重启Node.js服务,用浏览器打开http://localhost:8080/demo.html即能看到效果:
二. Socket.IO
Socket.IO提供了WebSockets服务,如果浏览器不支持HTML5标准的WebSocket,会用Flash代替,而且支持Json的自动解析和序列化,下面以提供TWaver HTML5拓扑数据为例,演示如何使用Socket.IO:
首先修改上面的server.js文件,加入如下内容,以创建WebSockets服务,并响应获取拓扑数据动作:
前台demo.html修改如下,注意不要漏掉引入Socket.IO js库,而且src地址必须为/socket.io/socket.io.js:
再在demo目录添加demo.js文件,内容如下:
最后重启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客户连接:
再修改模拟数据部分,改为从数据库拿取数据,并将json格式的数据反序列化成js对象:
至此一切准备工作完毕,下一篇将介绍如何使用TWaver HTML5展示这里生成的数据,本文代码见附件。
分享到:
相关推荐
twaver示例可直接放到jetty下运行,含twaver.js alarm.html资源。
Twaver+Web+SVG+开发说明文档
twaver jar在TWaver传统的2D应用中,近一年非常突出地出现了一种需求,那就是希望能够在同一个页面内显示多种层次的网络结构
Twaver学习案例的例子
TWaver HTML5 开发指南代码 拓扑工具 机房展示 轻松容易 很简单
java开发拓扑图用户手册(twaver&itop).rar
是twaver学习的最佳资料,大家快来下巴
TWaver Web SVG是由赛瓦软件(SERVA Software)提供的一套Web 客户端解决方案。用户可以方便的运用TWaver开发包提供的Java接口,实现拓扑,机架板和图表在Web上以SVG的方式实现,并以AJAX的方式进行交互,通讯以及用...
TWaver HTML5 Developer Guide, 官方的开发指南。
twaver-html5-5.9.0-api
TWaver-flex的库TWaver.swc
TWaver-java的库TWaver.jar
TWaver“一站式”UI组件提供包括网络拓扑图、地图、设备面板图、流程图、各种Chart图表、树图、表格等各种通用组件
el: 关联 HTML 部分的标签, 使 vue 中的内容能够加载到 HTML里面去 data: 页面中需要的数据, 可以通过这个属性进行初始化, 进而赋值到 HTML 页面去 methods: 可以给当前vue对象添加方法, 一般我们都会把方法放在这个...
TWaver HTML5使用JavaScript语言开发,可运行在多种现代浏览器:IE9+, Firefox, Chrome, Safari, Opera。请原谅我 没有列出具体的版本号,现在浏览器更新换代太快,而TWaver HTML5面向的是现代和未来的浏览器,所以...
TWaver HTML5 3D 制作的demo提供一个3d图形展示的基本代码。TWaver的3d图形组件库,小demo
2014年8月最新版TWaver .NET 开发指南和详细的API,辅助TWaver组件开发。
有下的可以弄弄 电信行业基本都用 TWAVER.SWC
twaver.jar
TWaver HTML5使用JavaScript语言开发,可运行在多种现代浏览器:IE9+, Firefox, Chrome, Safari, Opera。请原谅我 没有列出具体的版本号,现在浏览器更新换代太快,而TWaver HTML5面向的是现代和未来的浏览器,所以...