Создайте панель управления SignalR в реальном времени с AngularJS

И мы должны увидеть следующие данные на экране:

Мы видели, что Angular может подключаться к SignalR чрезвычайно легко — просто подключив конечную точку в сервис или на завод AngularJS. Фабрика AngularJS — это механизм инкапсуляции для связи с SignalR. Кто знал, что AngularJS и .NET будут так хорошо работать вместе, когда «поженятся» ?

Основные аспекты сервера

Я расскажу немного о .NET-коде, который позволяет этому общению происходить на сервере. (Вы можете найти исходный код здесь .)

Для начала создания кода сервера сначала необходимо запустить SignalR в своем решении Visual Studio. Чтобы сделать это, просто следуйте великолепным учебникам в ASP.NET, чтобы запустить базовое решение SignalR. ( Это самый простой.)

Как только вы это запустите, измените класс C # Hub на следующий:

 public class PerformanceHub : Hub { public void SendPerformance(IList<PerformanceModel> performanceModels) { Clients.All.broadcastPerformance(performanceModels); } public void Heartbeat() { Clients.All.heartbeat(); } public override Task OnConnected() { return (base.OnConnected()); } } 

Как только вы измените класс Hub , Visual Studio будет жаловаться, и вам нужно будет добавить модель производительности (она автоматически преобразуется в JSON, когда он выталкивается сервером, благодаря Json.NET):

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Newtonsoft.Json; namespace SignalrWebService.Models { public class PerformanceModel { [JsonProperty("machineName")] public string MachineName { get; set; } [JsonProperty("categoryName")] public string CategoryName { get; set; } [JsonProperty("counterName")] public string CounterName { get; set; } [JsonProperty("instanceName")] public string InstanceName { get; set; } [JsonProperty("value")] public double Value { get; set; } } } 

Метаданные JsonProperty просто говорят Json.NET автоматически преобразовывать имя свойства в нижний регистр при преобразовании в JSON для этой модели. JavaScript любит нижний регистр.

Давайте добавим класс PerformanceEngine , который подталкивает любого, кто будет слушать, с реальными данными о производительности. Механизм отправляет эти сообщения через SignalR любым прослушивающим клиентам в асинхронном фоновом потоке.

Из-за его длины вы можете найти код в нашем репозитории GitHub .

Этот код в основном передает массив показателей производительности всем, кто подписан на каждую итерацию. Эти показатели производительности вводятся в конструктор. Скорость pollIntervalMillis с сервера задается в конструкторе параметром pollIntervalMillis .

Обратите внимание, что это будет работать нормально, если вы используете SignalR, используя OWIN в качестве самостоятельного хоста, и это должно работать нормально, если вы используете веб-работника.

Конечно, последнее, что нужно сделать, это запустить фоновый поток где-нибудь в вашем сервисе OnStart() или в вашем классе Startup .

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Owin; using System.Threading.Tasks; using Microsoft.Owin; using SignalrWebService.Performance; using Microsoft.Owin.Cors; using Microsoft.AspNet.SignalR; using SignalrWebService.Models; [assembly: OwinStartup(typeof(SignalrWebService.Startup))] namespace SignalrWebService { public class Startup { public void Configuration(IAppBuilder app) { app.UseCors(CorsOptions.AllowAll); var hubConfiguration = new HubConfiguration(); hubConfiguration.EnableDetailedErrors = true; app.MapSignalR(hubConfiguration); PerformanceEngine performanceEngine = new PerformanceEngine(800, GetRequiredPerformanceMonitors()); Task.Factory.StartNew(async () => await performanceEngine.OnPerformanceMonitor()); } } } 

Две строки, которые запускают мониторинг в фоновом потоке (как я уверен, вы догадались), это те, где мы создаем экземпляр PerformanceEngine и где мы вызываем OnPerformanceMonitor() .

Теперь я знаю, что вы можете подумать, что я рандомизирую данные с сервера, и это правда. Но чтобы использовать реальные показатели, просто используйте библиотеку System.Diagnostics и PerformanceCounter предоставляемые Windows. Я пытаюсь сохранить это простым, но вот как будет выглядеть этот код:

 public static readonly IEnumerable<PerformanceCounter> ServiceCounters = new[] { //http://weblogs.thinktecture.com/ingo/2004/06/getting-the-current-process-your-own-cpu-usage.html new PerformanceCounter("Processor Information", "% Processor Time", "_Total"), new PerformanceCounter("Memory", "Available MBytes"), new PerformanceCounter("Process", "% Processor Time", GetCurrentProcessInstanceName(), true), new PerformanceCounter("Process", "Working Set", GetCurrentProcessInstanceName(), true) }; 

Вывод

Мы видели, как использовать данные SignalR через Angular, и мы подключили эти данные к платформам построения графиков в реальном времени на Angular.

Демонстрацию окончательной версии клиента можно посмотреть здесь , и вы можете получить код здесь .

Демонстрацию окончательной версии сервера можно посмотреть здесь , и вы можете получить код здесь .

Я надеюсь, вам понравилась эта прогулка. Если вы пробовали что-то подобное, сообщите нам об этом в комментариях!