TWaver - 專注UI技術

          http://twaver.servasoft.com/
          posts - 171, comments - 191, trackbacks - 0, articles - 2
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

          在上一篇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文件,內容如下:

          1require('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目錄中
           3var express = require('express');
           4//創建web服務
           5var server = express.createServer();
           6//以當前目錄下的demo目錄為web應用根目錄
           7server.use(express.static(__dirname + '/demo'));
           8//顯示錯誤信息,以方便調試
           9server.use(express.errorHandler({
          10    showStack: true,
          11    dumpExceptions: true
          12}
          ));
          13//啟動express web服務,監聽8080端口
          14server.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目錄中
           3var io = require('socket.io');
           4//創建WebSockets服務
           5var socket = io.listen(server, {
           6    log:false
           7}
          );
           8//添加監聽,相應前臺請求
           9socket.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
           2var GET_DATA = 'getData';
           3//WebSockets引用
           4var socket;
           5
           6function 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消息處理方法
          16function 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客戶端
          2var redis = require('redis').createClient();
          3//打印redis出錯信息
          4redis.on('error', function (err) {
          5    console.log('Error ' + err);
          6}
          );

          再修改模擬數據部分,改為從數據庫拿取數據,并將json格式的數據
           1//添加監聽,相應前臺請求
           2socket.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展示這里生成的數據,本文代碼見附件

          評論

          # re: TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建項目(三)  回復  更多評論   

          2011-12-31 14:58 by iuk
          見過最全的nodejs介紹,贊!
          期待twaver html5的下篇文章!

          # re: TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建項目(三)  回復  更多評論   

          2011-12-31 17:38 by The Matrix
          不錯,標記!

          # re: TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建項目(三)  回復  更多評論   

          2011-12-31 17:59 by 喜客
          見過最全的nodejs介紹,贊!
          期待twaver html5的下篇文章!
          說的對。期待中

          # re: TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建項目(三)  回復  更多評論   

          2011-12-31 18:17 by 靴子
          等待博主更新。

          # re: TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建項目(三)  回復  更多評論   

          2012-01-01 14:45 by tb
          不錯,收藏了

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 洛浦县| 崇义县| 鲁甸县| 县级市| 西城区| 新河县| 民乐县| 齐齐哈尔市| 靖江市| 云林县| 夏邑县| 区。| 北碚区| 安康市| 泽普县| 新沂市| 交口县| 锡林郭勒盟| 汕尾市| 富宁县| 天峻县| 女性| 昆山市| 河西区| 德令哈市| 米易县| 卢氏县| 含山县| 庆阳市| 冀州市| 六盘水市| 青田县| 福海县| 福州市| 昭平县| 卓资县| 咸丰县| 宽城| 开化县| 铜鼓县| 安乡县|