HTML5-WebSocket实现对服务器CPU实时监控
作者：匿名 字体：[增加 减小] 来源：互联网 时间：2018-12-03
本文主要包含HTML5教程,HTML5中国,HTML5-WebSocket实现对服务器CPU实时监控,html5cn,html5资料等相关知识,匿名希望在学习及工作中可以帮助到您
由于WebSocket允许保持长连接,因此当建立连接后服务器可以主动地向Client发送相关信息.下面通过服务端获取当前CPU的使用情况主动发送给网页,让网页实时显示CPU使用情况的曲线图.该事例的主要功能是包括服务端获取CPU使和情况和HTML5使用canvas进行曲线图绘制.
应用效果
实现效果主要是模仿windows的任务管理器,显示每个核的工作情况.
C#获取CPU使用情况
可能通过PerformanceCounter来获取具本CPU线程的使用情况,不过在构建PerformanceCounter前先获取到CPU对应的线程数量.获取这个数量可以通过Environment.ProcessorCount属性获取,然后遍历构建每个PerformanceCounter
|
|
(int i = 0; i < coreCount; i++)
PerformanceCounter("Processor", "% Processor Time", i.ToString()));
为了方便计数器的处理,简单地封装了一个基础类,完整代码如下:
|
|
class ProcessorCounter
List mCounters = new
List();
IList Counters
mCounters;
void Open()
coreCount = Environment.ProcessorCount;
(int i = 0; i < coreCount; i++)
PerformanceCounter("Processor", "% Processor Time", i.ToString()));
ItemUsage[] GetValues()
ItemUsage[mCounters.Count];
(int i = 0; i < mCounters.Count; i++)
ItemUsage();
+i.ToString();
values;
class ItemUsage
string Name { get; set; }
float Percent { get; set; }
string ID { get; set; }
这样一个用于统计CPU所有线程使用情况计数的类就完成了.
页面绘制处理
首先定义一些简单的处理结构
|
|
Array();
(var i = 0; i < 50; i++) {
Point(0, 0));
Point(x, y) {
主要定义线程信息结构,默认初始化50个座标,当在接收服务线程使用情况的时候,构建一个点添加到数组件尾部同时把第一个移走.通过定时绘制这50个点的曲线这样一个动态的走势就可以完成了.
|
|
canvas = document.getElementById('processimg'
+ item.Item.ID);
context = canvas.getContext('2d');
(var i = 0; i < item.Points.length; i++) {
addUploadItem(info) {
(cpus[info.ID] == null) {
pinfo = new ProcessorInfo();
+ info.ID + '" width="200" height="110">').appendTo($('#lstProcessors'));
Point(0, info.Percent));
{
pinfo = cpus[info.ID];
Point(0, info.Percent));
只需要通过定时器来不停地更新线程使用绘制即可.
|
|
() {
(var i = 0; i < processors.length; i++) {
服务端
对于服务端其实可以根据自己的需要来使用websocket协议实现,.net
4.5也提供相应的封装.而这里则使用了beetle对应websocket的扩展协议包,整体代码如下:
|
|
Program : WebSocketJsonServer
void Main(string[] args)
Program();
ProcessorCounter();
(true)
(ItemUsage item in
items)
JsonMess
| | | | | |
