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

星期五

明天不上班

 
 
 

日志

 
 
关于我

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

网易考拉推荐

NodeJS + WebSocket  

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

  下载LOFTER 我的照片书  |

其实去学习NodeJS 目的是Html5 WebSocket。

首先,我们需要准备一个WebSocket Server,至少我们不用自己写,因为NodeJS有一个Node WebSocket Server模块

1.安装模块 http://static.brandedcode.com/nws-docs/

npm install websocket-server

如果没有安装npm  https://github.com/isaacs/npm#readme

git clone http://github.com/isaacs/npm.git

cdnpm

sudo make install

我是建议使用npm 这样利于NodeJS模块管理

hjzheng@ubuntu:~/study/node$ sudo /usr/local/bin/npm install websocket-server

[sudo] password for hjzheng:

websocket-server@1.4.03 ./node_modules/websocket-server

记着,安装iostat

环境搭建好后,写一个服务器端的JS脚本

iostate-server.js

var http = require("http")
    ,fs = require("fs")
    ,path = require("path")
    ,ws = require('websocket-server');

var spawn = require('child_process').spawn;
var iostat = spawn("iostat",["-c","2"]); //我们的命令 iostat -c  2

console.log("start");
//一个Http Server 将Html页面发送出去。
var httpServer = http.createServer(function(req, res){
  if(req.method == "GET"){
    if( req.url.indexOf("favicon") > -1 ){
      res.writeHead(200, {'Content-Type': 'image/x-icon', 'Connection': 'close'});
      res.end("");
    } else {
      res.writeHead(200, {'Content-Type': 'text/html', 'Connection': 'close'});
      fs.createReadStream( path.normalize(path.join(__dirname, "iostat-client.html")), {
        'flags': 'r',
        'encoding': 'binary',
        'mode': 0666,
        'bufferSize': 4 * 1024
      }).addListener("data", function(chunk){
        res.write(chunk, 'binary');
      }).addListener("end",function() {
        res.end();
      });
    }
  } else {
    res.writeHead(404);
    res.end();
  }
});
//Web Socket server
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);

 

客户端

iostate-client.html (使用了WebSocket API)

<!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>
</head>
<body>
<div id="iostat"></div>
<script>
var hostname = "127.0.0.1";
var port = 8888;
var url = "ws://"+hostname+":"+port+"/echo";
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;
}

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

</body>
</html>

 

启动node iostate-server.js 

使用Chrome 访问 http://127.0.0.1:8888/echo

结果图

  NodeJS + WebSocket - zhenghaoju700 - zhenghaoju700 的博客

这样我们就可以在Web上进行实时的监控了!!!

测试环境:Ubuntu11.04  Chrome 12.0.742.100


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



参考资料

http://www.cnblogs.com/meteoric_cry/archive/2011/06/05/2073226.html

http://wiki.grati.org/index.php?title=NodeJS%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3#.E4.BF.A1.E6.81.AF

http://cnodejs.org/blog/?p=273

http://dev.w3.org/html5/websockets/

http://book.douban.com/subject/5402708/

http://archive.cnblogs.com/a/1873095/

 

  评论这张
 
阅读(6073)| 评论(1)
推荐

历史上的今天

评论

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

页脚

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