使用SignalR為FineUI/Webform打造訊息匯流排

第一次寫部落格，語言組織能力不好，請大家多多包涵！

效果圖如下：

 

圖片的右下角即為SignalR訊息匯流排的訊息框。

一、建立SignalR服務端

第一步：開啟一個空的FineUI 4.5空專案檔案，在空專案中建立資料夾SignalR（可以自定義名稱）

加入SignalR引用，在程式包管理控制檯輸入命令：Install-package Microsoft.Aspnet.Signalr

加入SignalR成功後的專案目錄

 

第二步：在空專案的根目錄下建立SignalR資料夾，並在資料夾中建立Message訊息類

using Newtonsoft.Json;

namespace EmptyProjectNet45_FineUI.SignalR
{
    public class Message
    {
        [JsonProperty("type")]
        public string Type { get; set; }

        [JsonProperty("title")]
        public string Title { get; set; }

        [JsonProperty("content")]
        public string Content { get; set; }
    }
}

第三步：建立SignalR集線器類MessageHub

在資料夾SignalR中新增類檔案MessageHub.cs

輸入如下程式碼：

using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace EmptyProjectNet45_FineUI.SignalR
{
    /// <summary>
    /// Message集線器類
    /// </summary>
    [HubName("messageHub")]
    public class MessageHub : Hub
    {
        private readonly MessageHandler _messageHandler;

        public MessageHub(): this(MessageHandler.Instance){ }

        public MessageHub(MessageHandler messageHandler)
        {
            _messageHandler = messageHandler;
        }

        /// <summary>
        /// 供客戶端呼叫的方法
        /// </summary>
        /// <param name="message"></param>
        public void SendMessage(Message message)
        {
            Clients.All.showMessage(message);
        }
    }
}

第四步：建立Message訊息廣播處理類MessageHandler，在資料夾SignalR中新增類檔案MessageHandler.cs

輸入如下程式碼：

using System;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace EmptyProjectNet45_FineUI.SignalR
{
    /// <summary>
    /// Message訊息廣播處理類
    /// </summary>
    public class MessageHandler
    {
        private readonly static Lazy<MessageHandler> _instance =
            new Lazy<MessageHandler>(() => 
                new MessageHandler(GlobalHost.ConnectionManager.GetHubContext<MessageHub>().Clients));

        private MessageHandler(IHubConnectionContext<dynamic> clients)
        {
            Clients = clients;
        }

        public static MessageHandler Instance { get { return _instance.Value; } }

        public IHubConnectionContext<dynamic> Clients { get; set; }

        /// <summary>
        /// 向所有客戶端傳送訊息
        /// </summary>
        /// <param name="msg"></param>
        public void SendMessage(Message msg)
        {
            Clients.All.showMessage(msg);
        }
    }
}

第五步，建立Startup類，在資料夾SignalR中新增類檔案MessageHandler.cs

輸入如下程式碼：

using Microsoft.Owin;
using Owin;

[assembly :OwinStartup(typeof(EmptyProjectNet45_FineUI.SignalR.Startup))]
namespace EmptyProjectNet45_FineUI.SignalR
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

第六步  建立全域性資訊類GlobalInfo，程式碼如下：

namespace EmptyProjectNet45_FineUI.Common
{
    public class GlobalInfo
    {
        public static SignalR.MessageHandler MessageHandler { get { return SignalR.MessageHandler.Instance; } }
    }
}

第七步  建立訊息匯流排類MessageBus

using EmptyProjectNet45_FineUI.SignalR;

namespace EmptyProjectNet45_FineUI.Common
{
    public class MessageBus
    {
        public static void SendMessage(Message message)
        {
            GlobalInfo.MessageHandler.SendMessage(message);
        }
    }
}

至此，SignalR服務端的程式碼就寫完了

二、SignalR客戶端程式碼

第一步，開啟default.asp頁面，引入jquery-1.6.4.min.js和jquery.signalR-2.2.0.min.js，和加入<script src="/SignalR/hubs"></script>引用（注意這個目錄是不存在的，但是SignalR執行必須的虛擬目錄），引用結構如下： 

<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="/SignalR/hubs"></script>

第二步：加入客戶端程式碼

程式碼如下：

 <script>
        $(function () {
            var handler = $.connection.messageHub;// 生成客戶端hub代理

            // 新增客戶端hub方法以供服務端呼叫
            // 向列表中新增航班資訊
            handler.client.showMessage = function (msg) {
                windowTips(null, null, msg.content);
            }

            //日誌輸出，以備除錯使用
            $.connection.hub.logging = true;
            // 開啟hub連線
            $.connection.hub.start();
        });
 </script>

到此，客戶端程式碼也寫完了 

三、SignalR訊息傳送測試

在fineui空專案自帶的hello頁面加入一個button按鈕，命名為“顯示資訊”，並加入按鈕的onClick事件，

頁面程式碼如下：

<%@ Page Language="C#" AutoEventWireup="True" CodeBehind="hello.aspx.cs" Inherits="EmptyProjectNet45_FineUI.hello" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <f:PageManager ID="PageManager1" runat="server" />
        <f:Button Text="點選彈出對話方塊" runat="server" ID="btnHello" OnClick="btnHello_Click"/>
        <f:Button runat="server" ID="btnShowInfo" Text="顯示訊息" Icon="Mail" OnClick="btnShowInfo_OnClick"/>
    </form>
</body>
</html>

後臺程式碼：

using System;
using EmptyProjectNet45_FineUI.Common;
using EmptyProjectNet45_FineUI.SignalR;
using FineUI;

namespace EmptyProjectNet45_FineUI
{
    public partial class hello : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnHello_Click(object sender, EventArgs e)
        {
            Alert.Show("你好 FineUI！", MessageBoxIcon.Warning);
        }

        protected void btnShowInfo_OnClick(object sender, EventArgs e)
        {
            MessageBus.SendMessage(new Message{Type = "info",Title = "測試訊息",Content = "這是由SignalR發出的訊息！"});
        }
    }
}

編譯程式碼，執行程式，點選“顯示資訊”按鈕，效果如下：

 

訊息匯流排已經初步建立起來了，但alert彈出框的樣式實在是不好看，也不夠友好。但本人的實在是不懂css也不懂js，就從網上下載了一個基於jquery的右下角彈出框，並簡單修改了一下樣式，使其與fineui主題相符合，最終的效果圖如下：

 程式碼下載

請路過的大神多多指正！