نمایش لحظه ای وضعیت سرور به وسیله SignalR

آموزش ایجاد و نمایش وضعیت سرور به وسیله SignalR در Asp.Net MVC ، در این مقاله به وسیله کتابخانه SignalR به ایجاد یک نمایش وضعیت در MVC می پردازیم.

نمایش لحظه ای وضعیت سرور به وسیله SignalR

 

 

در این مقاله به وسیله SignalR اقدام به ایجاد نمایش وضعیت سرور به صورت لحظه ای می کنیم.
 

دقت داشته باشید این در صورتی که از این مقاله در سرور استفاده کنید بررسی CPU سرور را نمایش خواهد داد و درصورت استفاده از آن در سیستم شخصی مانند TaskMannager عمل خواهد کرد و عملکرد CPU را نمایش می دهد.

 

ابتدا اقدام به ایجاد پروژه ای در Visual Studio می کنیم. پروژه از نوع Asp.Net با حالت Empty و با زبان C# ایجاد می کنیم.
سپس بر روی ok کلیک می کنیم تا پروژه ایجاد شود.
بعد از اجرای پروژه ، با کلیک راست بر روی نام پروژه اقدام به اضافه کردن پکیج های لازم از جمله SignalR از سایت Nuget با کلیک بر روی گزینه Mannage Nuget Packeges... می کنیم.
مانند شکل زیر :

بعد از باز شدن صفحه مربوط اقدام به تایپ عبارت SignalR برای جست و جو می کنیم.
و بعد از ظاهر شدن گزینه Microsoft.Asp.Net SignalR اقدام به نصب این افزونه می کنیم.

در هنگام نصب از شما به عنوان کاربر درخواست اخذ تاییده می کند.
که با تایید شما اجازه نصب را صادر می کنید.

پس از تایید مراحل نصب کامل شده و SignalR به همراه افزونه های مورد نیاز بر روی پروژه نصب میشود.
بعد از افزوده شدن این موارد اقدام به ایجاد یک کلاس از نوع SignalR Hub می کنیم.
(تذکر : در صورتی که از این کلاس و کلاس Owin استفاده کنید افزونه های مربوط به SignalR به پروژه اضافه خواهند شد)
برای این کار بر روی نام پروژه کلیک راست و سپس از گزینه Add ، گزینه Add New Item را انتخاب می کنیم.

در پنجره ظاهر شده گره Web را باز می کنیم و در آنجا بر روی SignalR کلیک می کنیم.و یک کلاس از نوع SignalR Hub Class را به پروژه اضافه می کنیم. نام آن را برابر با CupHub قرار می دهیم.


در زیر مشاهده می کنید که اگر کلاس SignalR Hub را به پروژه اضافه کنید ، افزونه های مربوطه به SignalR به پروژه اضافه می شود.


حال اقدام به ایجاد کلاس OWIN برای کار با SignalR می کنیم.
OWIN را جست و جو می کنیم ، و سپس با نام Startup کلاسی از Owin ایجاد میکنیم.

 

در مرحله بعد با استفاده از Pockage Mannager Console اقدام به نصب پکیج نانسی می کنیم ، این پکیج برای گرفتن اطلاعات CPU کاربرد دارد.
با عبارت زیر نسبت به افزودن این پکیج اقدام می کنیم.
 

Install-Package Nancy

 

در شکل زیر افزوده شدن این پکیج را مشاهده می کنید.

حالا در کلاس StartUp کد های زیر را وارد می کنیم.
 

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(HugoHaggmark.Taskmanager.Startup))]

namespace HugoHaggmark.Taskmanager
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app
                .MapSignalR()
                .UseNancy();
        }
    }
}

 

سپس کلاسی به نام CupMadule ایجاد می کنیم.

کد های زیر مربوط به کلاس فوق می باشد : 
 

using Nancy;
using System;
using System.Diagnostics;
using System.Threading;
namespace HugoHaggmark.Taskmanager.Modules
{
    public class CpuModule : NancyModule
    {
        PerformanceCounter cpuCounter;

        public CpuModule()
            : base("api/cpu")
        {
            InitializePerformanceCounter();
            Get["/"] = x =>
            {
                int cpu = (int)Math.Ceiling(cpuCounter.NextValue());

                return Response.AsText(cpu.ToString());
            };
        }

        private void InitializePerformanceCounter()
        {
            cpuCounter = new PerformanceCounter();

            cpuCounter.CategoryName = "Processor";
            cpuCounter.CounterName = "% Processor Time";
            cpuCounter.InstanceName = "_Total";
            cpuCounter.NextValue();
            Thread.Sleep(1000);
        }
    }
}

همچنین کلاس دیگری به نام Broadcaster را ایجاد می کنیم.

در این مرحله اقدام به افزودن یک کتابخانه به پروژه می کنیم ، کتابخانه System.Net.Http.Formating .

 

بعد از افزودن dll فوق کد های زیر را در کلاس Broadcaster قرار می دهیم:

using HugoHaggmark.Taskmanager.Hubs;

using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System;
using System.Net.Http;
using System.Threading;
 
namespace HugoHaggmark.Taskmanager
{
    public class Broadcaster
    {
        private readonly static Lazy<Broadcaster> instance = new Lazy<Broadcaster>(() =>
            new Broadcaster(GlobalHost.ConnectionManager.GetHubContext<CpuHub>().Clients)
            );
 
        private readonly TimeSpan updateInterval = TimeSpan.FromMilliseconds(500);
        private readonly Timer timer;
 
        private Broadcaster(IHubConnectionContext clients)
        {
            Clients = clients;
 
            timer = new Timer(BroadcastCpuUsage, null, updateInterval, updateInterval);
        }
 
        public static Broadcaster Instance
        {
            get
            {
                return instance.Value;
            }
        }
 
        private IHubConnectionContext Clients
        {
            get;
            set;
        }
 
        private void BroadcastCpuUsage(object state)
        {
            string cpu = GetCurrentCpu();
 
            Clients.All.cpuInfo(Environment.MachineName, cpu.ToString());
        }
 
        private string GetCurrentCpu()
        {
            string currentCpu = "0";
 
            HttpClient client = new HttpClient();
            client.BaseAddress = new Uri("http://localhost:8080");
 
            var response = client.GetAsync("api/cpu").Result;
            if (response.IsSuccessStatusCode)
            {
                currentCpu = response.Content.ReadAsStringAsync().Result.ToString();
            }
 
            return currentCpu;
        }
    }
}

 

کد های زیر نیز در کلاس CpuHub که از کلاس Hub ارث بری می کند ، قرار می دهیم:

using Microsoft.AspNet.SignalR;
 
namespace HugoHaggmark.Taskmanager.Hubs
{
    public class CpuHub : Hub
    {
        private readonly Broadcaster broadCaster;
 
        public CpuHub()
            : this(Broadcaster.Instance)
        {
 
        }
 
        public CpuHub(Broadcaster broadCaster)
        {
            this.broadCaster = broadCaster;
        }
    }
}

 حال اقدام به ایجاد صفحه HTML می کنیم تا وضعیت را در آن نمایش دهیم.
پس مانند شکل اقدام به ایجاد آن می کنیم:

کد های زیر نمایانگر صفحه HTML ما هستند:
 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Taskmanager</title>
</head>
<body>
    <canvas id="canvas" height="450" width="600"></canvas>
 
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
    <script src="Scripts/chart.min.js"></script>
    <script src="/signalr/hubs"></script>

 

و در آخر هم اقدام به اضافه کردن اجباری ارتباط با SignalR که به صورت درون خطی داده شده است می کنیم:
 

<script type="text/javascript">
    var cpuHub = $.connection.cpuHub;
     
    cpuHub.client.cpuInfo = function (machineName, cpu) {
            } 
     
    $.connection.hub.start();
</script>

باید در این مقاله دو نکته را در نظر بگیرید :

1 - باید نام کلاس Hub با نام $.connection.cpuHub
2- در کلاس BroadCaster باید Clients.All.cpuInfo(Environment.MachineName, cpu.ToString()); را صدا زده و ما در کلاینت نیاز به یک متد با نام مشابه(مثلا شبیه به : cpuHub.client.cpuInfo ) داریم.

همچنین برای ایجاد چارت و نمودار می توانید ، از کتابخانه های گرافیکی جاوااسکریپتی مانند D3 و ... استفاده کنید .

در ذیل مقاله نمونه ای از پروژه همراه با سورس برای شما همراهان ارجمند قرار داده شده است.

فایل های ضمیمه