WebSocket入门教程（三）-- WebSocket实例：实时获取服务器内存使用情况

转载请标明出处：http://blog.csdn.net/u010136741/article/details/51581298， 本文出自: 柳木木_kylin

【总目录】

WebSocket入门教程--大纲

【实例简介】

  前面我们已经介绍了WebSocket的概念和WebSocket的Api，下面我们通过一个简单的实例，来实际体验一下WebSocket。

  下面，我们要展示的是一个实时获取服务器内存使用情况的一个案例。用户打开页面，通过websocket连接到服务器，服务器每隔一秒钟，会返回服务器内存的使用情况，达到对内存的实时监控，作为运维人员来说，可以通过微信，手机浏览器等实现对服务器状态的实时监听。

【客户端】

    首先，我们需要设计一个简单的页面，页面主要包含一个表格，表格会列出内存的总容量、正在使用的内存、闲置的内存、以及写缓存和读缓存。

    我们先看看客户端的头部，再来讲解思路：

    
    
    
    
    
    
    
    
    
    


    

        

            
柳木木ECS概况
            

            

                

                
类型
                
大小(KB)
                
            
            

            

                
内存总量
                

                
0.00
                
            
            

                
已使用内存
                

                
0.00
                
            
            

                
闲置内存
                

                
0.00
                
            
            

                
写缓存
                

                
0.00
                
            
            
                
	        
读缓存
                

                
0.00
                
            
            
            
        
    

    准备工作，我们先引入了jquery,bootstrap库，用于样式呈现。

    首先我们连接服务器，然后给每个字段附上初始值0，定义了changeMemEntry用来更新页面的数据和样式。

在onmessage回调方法里，我们将接收到的json字符串解析成json对象，然后遍历对象的每个属性，将属性值传递给changeMemEntry，实现数据的更新。在onclose回调方法里，我们将数据清0。

页面的展示效果如下图：

【服务器端】

    本案例服务器端，我们通过nodejs实现，大体步骤如下

1.创建websocket服务，监听8181端口。

2.当客户端请求连接并且连接成功时，运行linux的free命令，获取内存信息，通过正则将标准输出字符串，转换成json对象，然后返回给客户端。

3.开始定时器，每一秒钟执行循环第2步操作。

4.当连接关闭时，清除定时器。

//send memory info per seconds
var WebSocketServer = require('ws').Server,
        wss = new WebSocketServer({port:8181});


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

function sendMemInfo(ws){
        var free = spawn('free',['-k']);
        free.stdout.on('data',function(data){
                var strdata = ""+data;
                //console.log(strdata);
                //正则匹配，获取数据
                var re = /Mem: *(\d*) *(\d*) *(\d*) *(\d*) *(\d*) *(\d*)/;
                var result = strdata.match(re);
                var mem = {};
                if(result.length>0){
                        mem["total"] = parseInt(result[1]);
                        mem["used"] = parseInt(result[2]);
                        mem["free"] = parseInt(result[3]);
                        //mem["shared"] = parseInt(result[4]);
                        mem["buffers"] = parseInt(result[5]);
                        mem["cached"] = parseInt(result[6]);
                        ws.send(JSON.stringify(mem));
                }
        });
}

wss.on('connection',function(ws){
        var clientMemUpdater;
        var sendMemUpdates = function(ws){
                if(ws.readyState == 1){
                        sendMemInfo(ws);
                }
        }
        clientMemUpdater = setInterval(function(){
                sendMemUpdates(ws);
        },1000);
        var clientStocks = [];
        sendMemUpdates(ws);
        ws.on("close",function(){
                if(typeof clientMemUpdater != 'undefined'){
                        clearInterval(clientMemUpdater);
                }
        });
});

【演示地址】

电脑访问：

http://www.liumumu.top/?m=Home&c=websocket&a=demo5

手机浏览器、微信访问：

【源码下载】

gitlib:https://github.com/kylinLiu/WebSocket/tree/master/demo/memory_info

csdn:http://download.csdn.net/detail/u010136741/9542153

【结束语】

    在写这篇文章的时候，我发现了这个demo存在的一个性能隐患，有没读者也发现了这个问题，欢迎留言吐槽！