HTML5-WebSocket实现对服务器CPU实时监控
由于WebSocket允许保持长连接,因此当建立连接后服务器可以主动地向Client发送相关信息.下面通过服务端获取当前CPU的使用情况主动发送给网页,让网页实时显示CPU使用情况的曲线图.该事例的主要功能是包括服务端获取CPU使和情况和HTML5使用canvas进行曲线图绘制.应用效果
实现效果主要是模仿windows的任务管理器,显示每个核的工作情况.
C#获取CPU使用情况
可能通过PerformanceCounter来获取具本CPU线程的使用情况,不过在构建PerformanceCounter前先获取到CPU对应的线程数量.获取这个数量可以通过Environment.ProcessorCount属性获取,然后遍历构建每个PerformanceCounter
int coreCount = Environment.ProcessorCount;
for (int i = 0; i < coreCount; i++)
{
mCounters.Add(new PerformanceCounter("Processor", "% Processor Time", i.ToString()));
}
为了方便计数器的处理,简单地封装了一个基础类,完整代码如下:
/// <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所有线程使用情况计数的类就完成了.
页面绘制处理
首先定义一些简单的处理结构
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个点的曲线这样一个动态的走势就可以完成了.
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(it
补充：web前端 , HTML 5 ,
- 更多html/css疑问解答：
- div+css中关于ie浏览器中非啊元素的：hover的实现问题，哪位大神指点下啊
- css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px
- css 属性选择器 ie6 不支持吗？
- 用css、jquery做的选项卡效果，有一个小疑问，请高手指点，代码如下：
- 介绍本学习css的书
- wordpress多个CSS样式怎么调用？
- 这个div 的css是如何编写的
- div+css中，div的右边框小于div的高度且居中，除了用背景图片，如何实现？
- 表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写
- CSS 在一个大的DIV里面，另一个DIV怎么居中并置底。
- dw中html文档为什么无法链接css文档
- 设计一个小例子说明DIV+CSS的优势（例子要解释并注释）。
- 我会html css目前正在学js，打算在大三的寒假找个实习，请问应该找哪方面的实习？
- css问题，跪求大大帮忙
- 请教网页设计高手，如下图的这种css代码怎么写？