HTML5-WebSocket实现对服务器CPU实时监控

由于WebSocket允许保持长连接,因此当建立连接后服务器可以主动地向Client发送相关信息.下面通过服务端获取当前CPU的使用情况主动发送给网页,让网页实时显示CPU使用情况的曲线图.该事例的主要功能是包括服务端获取CPU使和情况和HTML5使用canvas进行曲线图绘制.

应用效果

实现效果主要是模仿windows的任务管理器,显示每个核的工作情况.

C#获取CPU使用情况

可能通过PerformanceCounter来获取具本CPU线程的使用情况,不过在构建PerformanceCounter前先获取到CPU对应的线程数量.获取这个数量可以通过Environment.ProcessorCount属性获取,然后遍历构建每个PerformanceCounter

?

1 2 3 4 5

int coreCount = Environment.ProcessorCount;                      for ( int i = 0; i < coreCount; i++)              {                  mCounters.Add( new PerformanceCounter( "Processor" , "% Processor Time" , i.ToString()));              }

为了方便计数器的处理,简单地封装了一个基础类,完整代码如下:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

/// <summary>      /// Copyright © henryfan 2012              ///Email:   henryfan@msn.com          ///HomePage:    http://www.ikende.com             ///CreateTime:  2012/12/24 15:10:44      /// </summary>      public class ProcessorCounter      {          private List<PerformanceCounter> mCounters = new List<PerformanceCounter>();          public IList<PerformanceCounter> Counters          {              get              {                  return mCounters;              }          }          public void Open()          {              int coreCount = Environment.ProcessorCount;                      for ( int i = 0; i < coreCount; i++)              {                  mCounters.Add( new PerformanceCounter( "Processor" , "% Processor Time" , i.ToString()));              }          }          public ItemUsage[] GetValues()          {              ItemUsage[] values = new ItemUsage[mCounters.Count];              for ( int i = 0; i < mCounters.Count; i++)              {                  values[i] = new ItemUsage();                  values[i].ID = i.ToString();                  values[i].Name = "CPU " +i.ToString();                  values[i].Percent =  mCounters[i].NextValue();              }              return values;          }      }      public class ItemUsage      {          public string Name { get ; set ; }          public float Percent { get ; set ; }          public  string ID { get ; set ; }      }

这样一个用于统计CPU所有线程使用情况计数的类就完成了.

页面绘制处理

首先定义一些简单的处理结构

?

1 2 3 4 5 6 7 8 9 10 11

function ProcessorInfo() {              this .Item = null ;              this .Points = new Array();              for ( var i = 0; i < 50; i++) {                  this .Points.push( new Point(0, 0));              }          }          function Point(x, y) {              this .X = x;              this .Y = y;          }

主要定义线程信息结构,默认初始化50个座标,当在接收服务线程使用情况的时候,构建一个点添加到数组件尾部同时把第一个移走.通过定时绘制这50个点的曲线这样一个动态的走势就可以完成了.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

function drawProceessor(item) {              var canvas = document.getElementById( 'processimg' + item.Item.ID);              var context = canvas.getContext( '2d' );              context.beginPath();              context.rect(0, 0, 200, 110);              context.fillStyle = 'black' ;              context.fill();              context.lineWidth = 2;              context.strokeStyle = 'white' ;              context.stroke();              context.beginPath();              context.moveTo(2, 106);              for ( var i = 0; i < item.Points.length; i++) {                     context.lineTo(4 * i + 2, 110 - item.Points[i].Y - 4);              }              context.lineTo(200, 106);              context.closePath();              context.lineWidth = 1;              context.fillStyle = '#7FFF00' ;              context.fill();              context.strokeStyle = '#7CFC00' ;              context.stroke();              context.font = '12pt Calibri' ;              context.fillStyle = 'white' ;              context.fillText(item.Item.Name, 60, 20);          }          function addUploadItem(info) {              if (cpus[info.ID] == null ) {                  var pinfo = new ProcessorInfo();                  pinfo.Item = info;                  $( '<canvas id="processimg' + info.ID + '" width="200" height="110"></canvas>' ).appendTo($( '#lstProcessors' ));                  cpus[info.ID] = pinfo;                  processors.push(pinfo);                  pinfo.Points.shift();                  pinfo.Points.push( new Point(0, info.Percent));                  drawProceessor(pinfo);                 } else {                  var pinfo = cpus[info.ID];                  pinfo.Points.shift();                  pinfo.Points.push( new Point(0, info.Percent));              }          }

只需要通过定时器来不停地更新线程使用绘制即可.

?

1 2 3 4 5

setInterval( function () {                  for ( var i = 0; i < processors.length; i++) {                      drawProceessor(processors[i]);                  }              }, 1000);

服务端

对于服务端其实可以根据自己的需要来使用websocket协议实现,.net 4.5也提供相应的封装.而这里则使用了beetle对应websocket的扩展协议包,整体代码如下:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

class Program : WebSocketJsonServer      {          static void Main( string [] args)          {              TcpUtils.Setup( "beetle" );              Program server = new Program();              server.Open(8070);              Console.WriteLine( "websocket start@8070" );              ProcessorCounter counters = new ProcessorCounter();              counters.Open();              while ( true )              {                  ItemUsage[] items = counters.GetValues();                  foreach (ItemUsage item in items)                  {                      Console.WriteLine( "{0}:{1}%" , item.Name, item.Percent);                  }                  JsonMessage message = new JsonMessage();                  message.type = "cpu useage" ;                  message.data = items;                  foreach (TcpChannel channel in server.Server.GetOnlines())                  {                      channel.Send(message);                  }                  System.Threading.Thread.Sleep(995);              }              System.Threading.Thread.Sleep(-1);          }          protected override void OnError( object sender, ChannelErrorEventArgs e)          {              base .OnError(sender, e);              Console.WriteLine(e.Exception.Message);          }          protected override void OnConnected( object sender, ChannelEventArgs e)          {              base .OnConnected(sender, e);              Console.WriteLine( "{0} connected" , e.Channel.EndPoint);          }          protected override void OnDisposed( object sender, ChannelDisposedEventArgs e)          {              base .OnDisposed(sender, e);              Console.WriteLine( "{0} disposed" , e.Channel.EndPoint);                       }      }

每秒获取一次CPU的使用情况,并把信息以json的方式发送给当前所有在线的连接.

下载

完整代码:ProcessorsMonitor.rar (686.02 kb) 

演示地址:http://html5.ikende.com/ProcessorsMonitor.htm (浏览器使用chrome或IE10)