由于WebSocket允許保持長連接,因此當(dāng)建立連接后服務(wù)器可以主動地向Client發(fā)送相關(guān)信息.下面通過服務(wù)端獲取當(dāng)前CPU的使用情況主動發(fā)送給網(wǎng)頁,讓網(wǎng)頁實(shí)時顯示CPU使用情況的曲線圖.該事例的主要功能是包括服務(wù)端獲取CPU使和情況和HTML5使用canvas進(jìn)行曲線圖繪制.

應(yīng)用效果

實(shí)現(xiàn)效果主要是模仿windows的任務(wù)管理器,顯示每個核的工作情況.

C#獲取CPU使用情況

可能通過PerformanceCounter來獲取具本CPU線程的使用情況,不過在構(gòu)建PerformanceCounter前先獲取到CPU對應(yīng)的線程數(shù)量.獲取這個數(shù)量可以通過Environment.ProcessorCount屬性獲取,然后遍歷構(gòu)建每個PerformanceCounter

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

為了方便計(jì)數(shù)器的處理,簡單地封裝了一個基礎(chǔ)類,完整代碼如下:

/// <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; }}

這樣一個用于統(tǒng)計(jì)CPU所有線程使用情況計(jì)數(shù)的類就完成了.

頁面繪制處理

首先定義一些簡單的處理結(jié)構(gòu)

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;}

主要定義線程信息結(jié)構(gòu),默認(rèn)初始化50個座標(biāo),當(dāng)在接收服務(wù)線程使用情況的時候,構(gòu)建一個點(diǎn)添加到數(shù)組件尾部同時把第一個移走.通過定時繪制這50個點(diǎn)的曲線這樣一個動態(tài)的走勢就可以完成了.

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));}}

只需要通過定時器來不停地更新線程使用繪制即可.

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

服務(wù)端

對于服務(wù)端其實(shí)可以根據(jù)自己的需要來使用websocket協(xié)議實(shí)現(xiàn),.net 4.5也提供相應(yīng)的封裝.而這里則使用了beetle對應(yīng)websocket的擴(kuò)展協(xié)議包,整體代碼如下:

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的方式發(fā)送給當(dāng)前所有在線的連接.

下載

完整代碼:ProcessorsMonitor.rar (686.02 kb)?

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

總結(jié)

以上是生活随笔為你收集整理的HTML5-WebSocket实现对服务器CPU实时监控的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。