基於SignalR實現B/S系統對windows服務運行狀態的監測

通常來講一個BS項目肯定不止單獨的一個BS應用，可能涉及到很多后台服務來支持BS的運行，特別是針對耗時較長的某些任務來說，Windows服務肯定是必不可少的，我們還需要利用B/S與windows服務進行交互，來實現更好的用戶體驗，搭配redis，memcached等來實現分布式緩存，消息列隊處理等等。。。

但是通常情況我們在B/S端是無法得知其依賴的windows服務當前處於什么樣的運行狀態，只能通過到server里面去進行查看，或者通過其他途徑！

今天我們就通過SignalR來實現一個B/S端對windows服務運行狀態的監控，這里我們用SignalR selfHost，不依賴IIS，然后利用topshelf把SignalR Server部署成windows服務，然后在B/S端通過SignalR js client進行連接獲取服務運行狀態！

 

首先創建一個控制台應用程序，.NET 4.5，Nuget添加 Microsoft.AspNet.SignalR.SelfHost Microsoft.Owin.Cors TopShelf（實現windows服務安裝）

具體新建SignalR SelfHost Server的方法可以看我以前的博客：SignalR SelfHost實時消息,集成到web中，實現服務器消息推送

新建一個hub命名為ServiceMonitorHub，繼承Microsoft.AspNet.SignalR.Hub，我們要實現服務狀態1秒鍾推送一次

具體代碼如下

using System.Linq;
using System.Threading;

namespace wxRbt.Service.Realtime.Hub
{
    /// <summary>
    /// 服務監控器
    /// </summary>
    public class ServiceMonitorHub:Microsoft.AspNet.SignalR.Hub
    {
        static ServiceMonitorHub()
        {
            new Thread(new ThreadStart(() =>
            {
                while (true)
                {
                    //獲取所有服務名稱以wxRbt開頭的服務
                    var services = System.ServiceProcess.ServiceController.GetServices().Where(t => t.ServiceName.StartsWith("wxRbt"))
                        .Select(t => new Model.Service
                        {
                            DisplayName = t.DisplayName,
                            ServiceName = t.ServiceName,
                            Status = (int)t.Status
                        }).ToArray();
                    Microsoft.AspNet.SignalR.GlobalHost.ConnectionManager.GetHubContext<ServiceMonitorHub>().Clients.All.refresh(services);
                    //休眠一秒，實現每秒推送服務運行狀態
                    System.Threading.Thread.Sleep(1000);
                }
            })).Start();
        }
    }
}

現在我們再利用TopShelf把當前的控制台安裝成windows服務

新建一個類ServiceMonitorService，繼承Topshelf.ServiceControl接口，實現其Start跟Stop方法，具體代碼如下

using Microsoft.AspNet.SignalR;
using Microsoft.Owin.Cors;
using Microsoft.Owin.Hosting;
using Owin;
using System;
using Topshelf;
using System.Configuration;

namespace wxRbt.Service.Realtime.Service
{
    public class ServiceMonitorService:ServiceControl
    {
        private IDisposable app;
        private static string domain="http://*:3333";

        static ServiceMonitorService() {
            domain = ConfigurationManager.AppSettings["Domain"] ?? domain;
            Console.WriteLine("獲取配置:"+domain);
        }

        public bool Start(HostControl hostControl)
        {
            Console.WriteLine("事實消息服務運行在:"+domain);
            
            app = WebApp.Start(domain, builder =>
            {
                builder.UseCors(CorsOptions.AllowAll);
                builder.MapSignalR(new HubConfiguration
                {
                    EnableJSONP = true,
                    EnableDetailedErrors = true,
                    EnableJavaScriptProxies = true
                });
            });
            return true;
        }

        public bool Stop(HostControl hostControl)
        {
            if (app != null) {
                app.Dispose();
            }
            return true;
        }
    }
}

這里給個默認的監聽域名，然后從app.config讀取配置的監聽域名

最后打開Progarm.cs文件，代碼如下：

using Topshelf;


namespace wxRbt.Service.Realtime
{
    class Program
    {
        static void Main(string[] args)
        {
            HostFactory.Run(s => {
                s.Service<Service.ServiceMonitorService>();
                s.SetDisplayName("微信實時消息服務");
                s.StartAutomatically();
            });
        }
    }
}

調試運行程序，如圖

 

 

上面服務端已經完成，下面，我們來實現客戶端：

創建一個MVC4.0web空項目（隨便，個人愛好），Nuget引用Microsoft.AspNet.SignalR.JS,該js依賴jquery，會自動下載jquery，寫TypeScript同學可以順帶下載這兩個JS的d.ts文件

然后創建一個HomeController，在Index里面返回view即可

Views文件夾創建Home文件夾，創建一個Index.cshtml 的razor試圖，引用jquery跟signalrjs

然后創建一個單獨的JS，盡量不要把js寫到頁面里面去

這里我用TypeScript寫一個消息模塊

/// <reference path="../../../scripts/typings/signalr/signalr.d.ts" />

module wxrbt.manager {
    export const enum ServiceStatus {
        /**服務停止*/
        Stopped = 1,
        /**正在運行*/
        StartPending = 2,
        /**正在停止*/
        StopPending = 3,
        /**運行中*/
        Running = 4,
        /**正在繼續*/
        ContinuePending = 5,
        /**正在暫停*/
        PausePending = 6,
        /**已暫停*/
        Paused = 7,
    }
    interface IService {
        DisplayName: string;
        ServiceName: string;
        Status: ServiceStatus
    }
    /**管理服務*/
    export class service {
        private proxy: SignalR.Hub.Proxy;
        private $: JQueryStatic;
        private ip: string;
        private port: number;
        constructor(ip: string, port: number) {
            this.ip = ip;
            this.port = port;
        }
        /**
         * 開啟服務運行狀態監測
         * @param {(services} callback
         */
        start(callback: (services: Array<IService>) => void) {
            jQuery.getScript("http://" + this.ip + ":" + this.port + "/signalr/hubs", () => {
                jQuery.connection.hub.url = "http://" + this.ip + ":" + this.port + "/signalr";
                this.proxy = jQuery.signalR.hub.createHubProxy("ServiceMonitorHub");

                //每次刷新數據回調
                this.proxy.on("refresh", (services: Array<IService>) => {
                    callback(services);
                });


                jQuery.connection.hub.start().fail(() => {
                    alert("連接實時消息服務期：http://" + this.ip + ":" + this.port + "失敗，請確認消息服務配置正確且正常開啟！");
                });
            });
        }
    }
}

下面我結合RequireJs實現的該模塊調用

require(["message"], () => {

    jQuery(() => {

        var $service = jQuery("#serviceList");
        var msg = new wxrbt.manager.service("127.0.0.1", 3333);
        msg.start(services=>{
            $service.empty();
            for (let service of services) {
                var isRunning = service.Status == wxrbt.manager.ServiceStatus.Running;
                var statusCls = isRunning ? "success" : "warning";
                var statusTxt = isRunning ? "運行中" : "已停止";
                var status = `<label class='label label-${statusCls}'>${statusTxt}</label>`;
                $service.append(`<li><a href='javascript:;'><i class='icon-check'></i>${service.DisplayName}${status}</a></li><li class="divider"></li>`);
            }
        });

    });


});

最后運行頁面查看效果：

 

唯一不足的就是1秒鍾這個dropdownlist會閃動一次，我這里是先清除再append進來，所以會出現這個情況，如果采用dom節點遞歸更新狀態就不會有這個問題了！

因為是公司項目，沒辦法上源碼！有不清除的可以留言！

下面是在windows服務器上跑的服務截圖