使用SignalR爲FineUI/Webform打造消息總線

時間 2020-09-26

標籤使用 signalr fineui webform 打造消息總線欄目主板简体版

原文原文鏈接

第一次寫博客，語言組織能力很差，請你們多多包涵！css

效果圖以下：html

圖片的右下角即爲SignalR消息總線的消息框。jquery

1、創建SignalR服務端app

第一步：打開一個空的FineUI 4.5空項目文件，在空項目中創建文件夾SignalR（能夠自定義名稱）測試

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

加入SignalR成功後的項目目錄this

第二步：在空項目的根目錄下創建SignalR文件夾，並在文件夾中創建Message消息類spa

 1 using Newtonsoft.Json;
 2 
 3 namespace EmptyProjectNet45_FineUI.SignalR
 4 {
 5     public class Message
 6     {
 7         [JsonProperty("type")]
 8         public string Type { get; set; }
 9 
10         [JsonProperty("title")]
11         public string Title { get; set; }
12 
13         [JsonProperty("content")]
14         public string Content { get; set; }
15     }
16 }

第三步：創建SignalR集線器類MessageHub代理

在文件夾SignalR中添加類文件MessageHub.cs調試

輸入以下代碼：

 1 using Microsoft.AspNet.SignalR;
 2 using Microsoft.AspNet.SignalR.Hubs;
 3 
 4 namespace EmptyProjectNet45_FineUI.SignalR
 5 {
 6     /// <summary>
 7     /// Message集線器類
 8     /// </summary>
 9     [HubName("messageHub")]
10     public class MessageHub : Hub
11     {
12         private readonly MessageHandler _messageHandler;
13 
14         public MessageHub(): this(MessageHandler.Instance){ }
15 
16         public MessageHub(MessageHandler messageHandler)
17         {
18             _messageHandler = messageHandler;
19         }
20 
21         /// <summary>
22         /// 供客戶端調用的方法
23         /// </summary>
24         /// <param name="message"></param>
25         public void SendMessage(Message message)
26         {
27             Clients.All.showMessage(message);
28         }
29     }
30 }

第四步：創建Message消息廣播處理類MessageHandler，在文件夾SignalR中添加類文件MessageHandler.cs

輸入以下代碼：

 1 using System;
 2 using Microsoft.AspNet.SignalR;
 3 using Microsoft.AspNet.SignalR.Hubs;
 4 
 5 namespace EmptyProjectNet45_FineUI.SignalR
 6 {
 7     /// <summary>
 8     /// Message消息廣播處理類
 9     /// </summary>
10     public class MessageHandler
11     {
12         private readonly static Lazy<MessageHandler> _instance =
13             new Lazy<MessageHandler>(() => 
14                 new MessageHandler(GlobalHost.ConnectionManager.GetHubContext<MessageHub>().Clients));
15 
16         private MessageHandler(IHubConnectionContext<dynamic> clients)
17         {
18             Clients = clients;
19         }
20 
21         public static MessageHandler Instance { get { return _instance.Value; } }
22 
23         public IHubConnectionContext<dynamic> Clients { get; set; }
24 
25         /// <summary>
26         /// 向全部客戶端發送消息
27         /// </summary>
28         /// <param name="msg"></param>
29         public void SendMessage(Message msg)
30         {
31             Clients.All.showMessage(msg);
32         }
33     }
34 }

第五步，創建Startup類，在文件夾SignalR中添加類文件MessageHandler.cs

輸入以下代碼：

 1 using Microsoft.Owin;
 2 using Owin;
 3 
 4 [assembly :OwinStartup(typeof(EmptyProjectNet45_FineUI.SignalR.Startup))]
 5 namespace EmptyProjectNet45_FineUI.SignalR
 6 {
 7     public class Startup
 8     {
 9         public void Configuration(IAppBuilder app)
10         {
11             app.MapSignalR();
12         }
13     }
14 }

第六步創建全局信息類GlobalInfo，代碼以下：

1 namespace EmptyProjectNet45_FineUI.Common
2 {
3     public class GlobalInfo
4     {
5         public static SignalR.MessageHandler MessageHandler { get { return SignalR.MessageHandler.Instance; } }
6     }
7 }

第七步創建消息總線類MessageBus

 1 using EmptyProjectNet45_FineUI.SignalR;
 2 
 3 namespace EmptyProjectNet45_FineUI.Common
 4 {
 5     public class MessageBus
 6     {
 7         public static void SendMessage(Message message)
 8         {
 9             GlobalInfo.MessageHandler.SendMessage(message);
10         }
11     }
12 }

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

2、SignalR客戶端代碼

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

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

第二步：加入客戶端代碼

代碼以下：

 1  <script>
 2         $(function () {
 3             var handler = $.connection.messageHub;// 生成客戶端hub代理
 4 
 5             // 添加客戶端hub方法以供服務端調用
 6             // 向列表中添加航班信息
 7             handler.client.showMessage = function (msg) {
 8                 windowTips(null, null, msg.content);
 9             }
10 
11             //日誌輸出，以備調試使用
12             $.connection.hub.logging = true;
13             // 開啓hub鏈接
14             $.connection.hub.start();
15         });
16  </script>

到此，客戶端代碼也寫完了

3、SignalR消息發送測試

在fineui空項目自帶的hello頁面加入一個button按鈕，命名爲「顯示信息」，並加入按鈕的onClick事件，

頁面代碼以下：

 1 <%@ Page Language="C#" AutoEventWireup="True" CodeBehind="hello.aspx.cs" Inherits="EmptyProjectNet45_FineUI.hello" %>
 2 
 3 <!DOCTYPE html>
 4 <html>
 5 <head runat="server">
 6     <title></title>
 7 </head>
 8 <body>
 9     <form id="form1" runat="server">
10         <f:PageManager ID="PageManager1" runat="server" />
11         <f:Button Text="點擊彈出對話框" runat="server" ID="btnHello" OnClick="btnHello_Click"/>
12         <f:Button runat="server" ID="btnShowInfo" Text="顯示消息" Icon="Mail" OnClick="btnShowInfo_OnClick"/>
13     </form>
14 </body>
15 </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發出的消息！"}); }
    }
}