使用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主题相符合，最终的效果图如下：

代码下载

请路过的大神多多指正！