`

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

阅读更多

TWaver HTML5 即将发布,这里迫不及待的给大家介绍一下如何使用TWaver HTML5开发一套完整的拓扑系统。既然是完整的系统,那当然要涉及后台、数据库、数据交互等:


 

前台:TWaver HTML5 是继TWaver JavaTWaver WebTWaver Flex 以及TWaver .NET 后 的又一全新分支;使用了HTML5技术,实现了拓扑、各种通用组件(包含List、Tree、Table、TreeTable、 PropertySheet、SplitPane、BorderPane、TabPane、TitlePane、Accordion等)以及 Chart(LineChart、PieChart、BarChart、BubbleChart、DialChart、RadarChart等)功能;支 持各种主流浏览器(Chrome、IE9、FireFox、Safari、Opera等);支持各种桌面和移动终端。

后台:HTML5 是最新的WEB UI技术,所以后台咱也不落后,用炙手可热的Node.js (稍后您会体验到前后台都用JavaScript的快感;如果您还在使用JVM平台,劝您早日放弃,未来不知道甲骨文要把Java怎样: Ubuntu 将从用户电脑移除 JDK ;如果您还来不及学Phyon、Ruby之类,那您也别遗憾了:The Switch: Python to Node.js )。

数据库:如今如日中天的NoSQL 大行其道(NoSQL名字都被Oracal 给抢占了),咱也沾沾Redis 这个内存key-value数据库的光。

前后台通讯:曾经风光一时的AjaxComet ,也要给WebSocket 让道了。借助于Node.js的Socket.IO 模块,我们将实现拓扑更新广播以及告警广播功能。

第一篇文章先给大家介绍下如何搭建Node.js 环境。

一. Windows下安装Node.jsRedis
1. 安装Node.js
从v0.6.1以后,Windows下的安装很简单,从Node.js 官方网站http://www.nodejs.org/#download 下载最新版的安装文件即可(写本文时最新的Node.js Windows安装包下载地址为http://nodejs.org/dist/v0.6.6/node-v0.6.6.msi )。
尽量选择最新版本安装,里面会自带npm (node package manager用于管理node的module),比如本文用到的express (web development framework for Node.js)、Socket.IOnode_redis (redis client for Node.js)。
安装完后在命令行运行node -v以及npm -version以验证是否安装成功。
最后要说的是网上好多安装方法都太老了,其实Node.js已经自带了npm,不需要折腾msysgit ,下载npm源码;而且即使下载npm也可以到http://npmjs.org/dist/ 下载编译后的文件,解压到Node.js安装目录即可。


 

2. 安装Node.js 模块
以管理员身份进入命令行模式,确保您在Node.js的安装目录(比如c:\Program Files\nodejs,否则您需要将您所安装模块的路径添加到环境变量NODE_PATH中,Node.js会自动查找所设置的目录的 node_modules子目录里的模块,而且您会发现c:\Program Files\nodejs下已经有node_modules目录了,而且里面有npm模块),运行以下命令安装本文用到的module:
cd “c:\Program Files\nodejs”
npm install express
npm install socket.io
npm install redis
安装完后运行以下命令以查看module结构:
npm list


 

3. 安装Redis
Redis官方网站只能下载到源代码,不想折腾的同学可以从http://code.google.com/p/servicestack/wiki/RedisWindowsDownload 下载编译后的版本,32位版下载地址为http://servicestack.googlecode.com/files/redis-2.0.0.zip
下载后,解压,并将解压目录设置到环境变量PATH中,运行redis-server --version 检查安装是否成功。
最后建议各位同学不要在windows下部署Redis:Redis作者拒绝微软的Windows补丁


 

二. Mac下安装Node.jsRedis (建议用强大的Homebrew ,使用Homebrew前,先执行brew update,获取最新的软件版本号)
1. 安装Node.js :brew install node
安装后运行node --version ,检查安装是否成功


 

2. 安装npm :curl http://npmjs.org/install.sh | sudo sh
安装后运行npm --version ,检查安装是否成功


 

3. 安装Node.js 模块
先创建用于存放Node.js模块的目录(比如/Users/paul/Documents/workspace/Tool/node_modules),然后将此目录加入环境变量NODE_PAH中:
vi ~/.bash_profile
然后加入:export NODE_PATH=”/Users/paul/Documents/workspace/Tool/node_modules”
保存后,运行. ~/.bash_profile以让更改生效,运行echo $NODE_PATH,以检查配置是否生效。
最后进入刚创建的目录,运行以下命令安装Node.js模块:
cd /Users/paul/Documents/workspace/Tool/node_modules
npm install express
npm install socket.io
npm install redis
安装完后运行以下命令以查看module结构:
npm list


 

4. 安装Redis :brew install redis
安装后运行redis-server --version ,检查安装是否成功


 

至此本文需要的软件已经安装完成,后续文章将开始详细介绍TWaver HTML5和Node.js的应用

  • 大小: 14 KB
  • 大小: 14.2 KB
  • 大小: 35.3 KB
  • 大小: 15.8 KB
  • 大小: 13.1 KB
  • 大小: 3.4 KB
  • 大小: 90.9 KB
  • 大小: 28 KB
分享到:
评论

相关推荐

    twaver.js使用示例

    5. **报警系统模拟**:“alarm”可能是一个具体的应用场景,展示如何使用twaver.js来设计和实现报警系统的图形界面,包括节点的状态变化、事件响应等。 6. **交互操作**:学习如何利用twaver.js库实现图形元素的交互...

    Twaver-html5.zip

    Twaver学习案例的例子

    TWaver HTML5 开发指南代码

    TWaver是一个高效且灵活的JavaScript库,专门用于构建基于HTML5的可视化应用。它提供了一整套完整的API,帮助开发者轻松创建和操作各种图形元素,包括节点、边、图层以及复杂的图表。TWaver不仅支持静态图表的展示,...

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    标题中的"twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_"似乎是指一个基于HTML5的Twaver版本5.9.0的应用程序接口(API)文档。Twaver是一个强大的数据可视化和网络建模工具,广泛应用于网络拓扑、流程图、组织...

    TWaver的3d图形组件库,小demo

    5. **基本代码示例**:压缩包中的"twaver"文件可能包含一个或多个HTML、CSS和JavaScript文件,展示如何初始化TWaver对象,加载数据,设置3D场景,以及处理用户交互等基本操作。 6. **WebGL**:WebGL是一种在浏览器...

    TWaver for HTML5

    TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件,以及表格、树图、属性表、图表等丰富的通用图形界面组件,为电信运营支撑系统(OSS)的开发提供“一站式”的组件产品和解决方案,是快速设计、开发和...

    twaver.jar java图形编程

    twaver jar在TWaver传统的2D应用中,近一年非常突出地出现了一种需求,那就是希望能够在同一个页面内显示多种层次的网络结构

    TWaver“一站式”UI组件提供包括网络拓扑图、地图、设备面板图、流程图、各种Chart图表、树图、表格等各种通用组件

    TWaver HTML5(以下简称TWaver)使用HTML5技术和javascript语言,可在支持HTML5的浏览器上进行绘图。 使用TWaver前,需熟悉几个基本概念:图元(Element)、容器(DataBox)和画布(Network)。 图元:图形中的...

    基于TWaver实现的3D机房Demo

    Three.js是一个广泛使用的JavaScript库,专门用于在浏览器中处理3D图形,基于WebGL标准。TWaver在底层使用了Three.js,但为其提供了更高级别的API和封装,降低了开发者对WebGL直接操作的难度。通过TWaver,开发者...

    twaver java 4.5.0

    【标题】"TWaver Java 4.5.0" 是一个专为Java平台设计的数据可视化库,它提供了丰富的图表和图形组件,适用于各种数据分析和展示需求。这个版本号4.5.0表明这是一个经过多次迭代和优化的成熟产品,可能包含了一些新...

    TWaver .NET 开发指南+API(英文版)

    《TWaver .NET 开发指南+API(英文版)》是专为.NET开发者设计的一份重要参考资料,旨在帮助开发者深入理解和高效使用TWaver组件。TWaver是一个强大的数据可视化工具,尤其适用于创建复杂的图表、网络图以及地理信息...

    twaver使用包下载包括例子在里面

    是twaver学习的最佳资料,大家快来下巴

    java开发拓扑图用户手册(twaver&itop).rar

    另一方面,"iTop" 可能是一个开源的IT服务管理工具,它可能利用了TWaver或其他类似技术来提供拓扑视图。itopoviewsnmp_v090417.zip文件可能包含iTop的一个版本或一个特定模块,特别是与SNMP(简单网络管理协议)相关...

    下载好的vue.js库资源,可以直接使用

    vue使用的时候,必须要通过 new Vue( ) 来实例化一个对象 vue实例化的对象中, 常见的参数为: el: 关联 HTML 部分的标签, 使 vue 中的内容能够加载到 HTML里面去 data: 页面中需要的数据, 可以通过这个属性进行初始...

    TWaver.swc 3.3.1

    TWaver-flex的库TWaver.swc

    twaver.js html 版本

    TWaver“一站式”UI组件提供包括网络拓扑图、地图、设备面板图、流程图、各种Chart图表、树图、表格等各种通用组件

    TWaver-java-4.1试用版jar包

    【标题】"TWaver-java-4.1试用版jar包" 涉及的核心知识点是TWaver,这是一个专门用于数据可视化和图表绘制的Java库。TWaver提供了一个全面的解决方案,帮助开发者创建复杂的图表、仪表盘以及交互式的数据可视化应用...

Global site tag (gtag.js) - Google Analytics