注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

NodeJS+WebSocket+FusionWeights  

2011-06-21 23:33:24|  分类: Html5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

接着上一篇文章,我对上次的小应用,加以改进。

先看server端,参看http://www.oschina.net/question/12_17345 写了一个简单的Http Server (紫色代码 用于处理页面及其资源下载)

Server端代码:

var http = require("http")

    ,fs = require("fs")

    ,path = require("path")

    ,url = require("url")

    ,ws = require('websocket-server');

var spawn = require('child_process').spawn;

var iostat = spawn("iostat",["-c","2"]);

console.log("start");

var httpServer = http.createServer(function(req, res){

    //handle http request for static file

    staticFileServer(req,res);

});

var server = ws.createServer({

        debug: true,

        server: httpServer});

// Handle WebSocket Requests

server.addListener("connection", function(conn){

  iostat.stdout.on('data',function(data) {

        console.log(data);

        if(conn._state==4)

        conn.send(data);

  });

});

server.addListener("error", function(){

  console.log(Array.prototype.join.call(arguments, ", "));

});

server.addListener("disconnected", function(conn){

  console.log("disconnected");

});

server.listen(8888);

 

var handler404 = function(req, res){

    res.writeHead(404, {'Content-Type': 'text/plain'});

    res.end('Page Not Found');

};

 

var staticFileServer = function(req, res, filePath){

    if(!filePath){
        filePath = path.join(__dirname, url.parse(req.url).pathname);
    }
    path.exists(filePath, function(exists) {
        if(!exists) {
            handler404(req, res);
            return;
        }

        fs.readFile(filePath, "binary", function(err, file) {
            var ext = path.extname(filePath);
            ext = ext ? ext.slice(1) : 'html';
            res.writeHead(200, {'Content-Type': contentTypes[ext] || 'text/html'});
            res.write(file, "binary");
            res.end();
        });
    });
};

var contentTypes = {
        "css": "text/css",
        "js": "text/javascript",
        "swf": "application/x-shockwave-flash",
        "xml": "text/xml"
}

客户端 引入FusionWeights的RealTime Chart (紫色代码为FusionWeights的代码)
客户端代码 
<!DOCTYPE html>
<html>
  <head>
<title>WebSocket & Node.JS Test Page</title>
<style>
        #iostat {
          width: 500px;
          height: 300px;
          overflow-y: auto;
          background-color: black;
          color: white;
          padding-left: 30px;
          margin: 0,auto;
        }
</style>
<script type="text/javascript" src="http://zhenghaoju700.blog.163.com/blog/./Charts/FusionCharts.js"></script>
</head>
<body>
<div id="chartdiv"></div>
<div id="iostat"></div>
<script>

var chart = new FusionCharts("./Charts/RealTimeLine.swf","chartId","530","350","0","1");
chart.setDataURL("./Charts/Data.xml");
chart.render("chartdiv");

var hostname = "127.0.0.1";
var port = 8888;
var url = "ws://"+hostname+":"+port;
w = new WebSocket(url);

w.onopen = function() {   
}
w.onmessage = function(e) {
        var msg = e.data;
        var ms = msg.split("%idle");

        msg = ms.join("%idle <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");

       

        var iostat = document.getElementById("iostat");
        var p = document.createElement("p");
        p.innerHTML = msg;
        iostat.appendChild(p);
        iostat.scrollTop = iostat.scrollHeight;
     
        var chartRef = getChartFromId("chartId");
        var currDate = new Date();
        var label = currDate.getHours() + ":" + currDate.getMinutes() + ":" + currDate.getSeconds();
        var dataStr = ms[1];
        var datas = dataStr.split(/\s+/);
         
        //Build data string in format &label=...&value=...
        var strData = "&label=" + label + "&value=" + datas[1] + "|" + datas[2] + "|" + datas[3] + "|" + datas[4]+ "|" + datas[5]+ "|" + datas[6]+ "|" + datas[7];
        chartRef.feedData(strData);
}

w.onclose = function(e) {
}
</script>
</body>
</html>

 

效果图:

  NodeJS+WebSocket+FusionWeights - zhenghaoju700 - zhenghaoju700 的博客

这样是不是很不错呢!!!

 

 

2012-5-23日 补充:

这个例子node 的版本比较低是 0.4.10

使用新的0.6版本会报错:目前没有解决(https://github.com/miksago/node-websocket-server/issues/83)

process.stdout.flush();                
TypeError: WriteObject # has no method 'flush

这是因为 node-websocket-server@1.4.03 不支持node 0.5以上的版本。


使用Chrome 15以上的版本也会出错:

Error during WebSocket handshake: 'Sec-WebSocket-Accept' header is missing

这是因为websocket协议有变化。之前的实现是基于draft75 or draft76


  评论这张
 
阅读(1951)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017