<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    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
    不錯,收藏了

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


    網站導航:
     
    主站蜘蛛池模板: 国产AⅤ无码专区亚洲AV| 24小时日本在线www免费的| 亚洲AV无码乱码精品国产| 亚洲色大情网站www| 成人午夜大片免费7777| 99999久久久久久亚洲| 免费无码又爽又刺激聊天APP| 亚洲伊人色一综合网| 免费黄色福利视频| 在线观看亚洲AV每日更新无码 | 成人免费777777被爆出| 亚洲一级片免费看| a毛片全部播放免费视频完整18| 亚洲国产精品成人精品无码区 | 亚洲精品无码你懂的网站| 日亚毛片免费乱码不卡一区| 亚洲精品线路一在线观看| 免费人成激情视频在线观看冫| 久久精品7亚洲午夜a| 久久精品国产免费观看 | 大片免费观看92在线视频线视频| 在线亚洲精品自拍| 一级做a爰全过程免费视频| 亚洲a视频在线观看| 免费国产成人高清在线观看麻豆| 免费无码专区毛片高潮喷水 | 亚洲成AV人影片在线观看| 国产v片免费播放| 野花香在线视频免费观看大全| 亚洲国产精品午夜电影| 好男人视频社区精品免费| 麻豆一区二区三区蜜桃免费| 亚洲精品无码久久久久| 91免费国产自产地址入| 久久久久亚洲精品无码网址色欲 | 亚洲的天堂av无码| 免费黄色大片网站| 中国videos性高清免费| 亚洲午夜电影在线观看高清 | 久久久精品国产亚洲成人满18免费网站| 亚洲午夜久久久久妓女影院|