簡介

      ASP .NET SignalR 是一個ASP .NET 下的類庫，可以在ASP .NET 的Web專案中實現實時通訊。什麼是實時通訊的Web呢？就是讓客戶端（Web頁面）和伺服器端可以互相通知訊息及呼叫方法，當然這是實時操作的。 WebSockets是HTML5提供的新的API，可以在Web網頁與伺服器端間建立Socket連線，當WebSockets可用時（即瀏覽器支援Html5）SignalR使用WebSockets，當不支援時SignalR將使用其它技術來保證達到相同效果。 SignalR當然也提供了非常簡單易用的高階API，使伺服器端可以單個或批量呼叫客戶端上的JavaScript函式，並且非常 方便地進行連線管理，例如客戶端連線到伺服器端，或斷開連線，客戶端分組，以及客戶端授權，使用SignalR都非常 容易實現。 SignalR 將與客戶端進行實時通訊帶給了ASP .NET 。當然這樣既好用，而且也有足夠的擴充套件性。以前使用者需要重新整理頁面或使用Ajax輪詢才能實現的實時顯示資料，現在只要使用SignalR，就可以簡單實現了。 最重要的是您無需重新建立專案，使用現有ASP .NET專案即可無縫使用SignalR。 　　以上是來自百度百科的解釋，個人覺得通俗來講就是WebSockets是一種握手協議，當用戶於伺服器建立連線（握手成功）時，雙方就建立了一個連線通道，互相傳遞時時資料。在這之前，我們一般來說實現這個功能的方式就是Ajax輪詢，通過Ajax迴圈獲取資料，這當然是非常消耗資源的，並且給伺服器帶來一定的壓力。而WebSockets雖然可達到全雙工通訊，但依然需要發出請求,不過這種請求的Header是很小的-大概只有 2 Bytes。這裡我們重點要知道的一點就是，WebSockets這個通道是雙工通道，簡單理解就是客戶端（javascript、jquery）的方法不但可以調取伺服器的功能程式方法，並且伺服器的功能程式也可以調取全部（廣播）或某個（單播）或某一類（組播）客戶端（javascript、jquery）的方法。而SignalR則是微軟給我們整合的一個WebSockets API，原理跟WebSockets是一致的，只是當WebSockets可用時（即瀏覽器支援Html5）SignalR使用WebSockets，當不支援時SignalR將使用其它技術來保證達到相同效果。

使用

很多新的技術沒有必要非得理解，只需要知道你的應用環境可以用這項技術很簡便的去實現，用的多了，用的久了，自然而然就會慢慢的理解這項技術的原理了。

今天我們一步一步來介紹一下如何使用SignalR,這一篇文章介紹的是使用Hubs SignalR集線器去實現，下一篇我們將介紹使用SignalR永久連線類去實現，我們做個簡單的聊天室。

先給大家貼一下Demo的效果圖：

一、準備：

SignalR 執行在 .NET 4.5 平臺上，所以需要安裝 .NET 4.5。為了方便演示，本示例使用 ASP.NET MVC 在 Win 7 系統來實現。這需要安裝 ASP.NET MVC 3 或 ASP.NET MVC 4

。

二：Hubs程式碼示例：

1、首先我們建立一個MVC專案工程名字叫做SignalR_Chat

2、然後開啟 工具 - NuGet程式包管理器 - 程式包管理器控制檯

3、安裝SignalR

輸出NuGet命令：Install-Package Microsoft.AspNet.SignalR

安裝成功後我們發現我們的bin裡已經添加了我們需要的元件，並且在Scripts資料夾下添加了SignalR的Jquery引用

4、我們新建一個資料夾叫Hubs，然後新增SignalR集線器類ChatHub.cs

在上面的程式碼中：

（1）HubName 這個特性是為了讓客戶端知道如何建立與伺服器端對應服務的代理物件，如果沒有設定該屬性，則以伺服器端的服務類名字作為 HubName 的預設值；

（2）Chat 繼承自 Hub，從下面 Hub 的介面圖可以看出：Hub 支援向發起請求者（Caller），所有客戶端(Clients)，特定組（Group) 推送訊息。

5、新增OWIN Startup Class

修改 Configuration方法

using Microsoft.Owin;
using Owin;
using SignalR_Chat.Connections;

[assembly: OwinStartupAttribute(typeof(SignalR_Chat.Startup))]
namespace SignalR_Chat
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
　　　　　　　//這個是下一篇永久連線類的 我們先不用
            //app.MapSignalR<MyConnection>("/echo");
        }
    }
}

6、我們實現一個聊天室，程式碼我是分步貼出來的，後面我會附上完整的程式碼和Demo。

首先，我們新建一個類 標記使用者和線上狀態

    public class OnlineUserInfo
        {
            //使用者ID
            public string UserId { get; set; }
            //使用者連線ID
            public string ConnectionId { get; set; }
            //使用者暱稱
            public string UserNickName { get; set; }
            //使用者頭像
            public string UserFaceImg { get; set; }
            //使用者狀態
            public string UserStates { get; set; }
        }

然後，我們在ChatHub中例項化一下這個類

       /// <summary>
        /// 這個是通過Hub集線器 大家可以參考 Connections下的 MyConnection 永久連線
        /// </summary>
        [HubName("chat")]
        public class ChatHub : Hub
        {
            static List<OnlineUserInfo> UserList = new List<OnlineUserInfo>();
        }

我們寫一個使用者連線時註冊一個群組，使用者後面的組播

            /// <summary>
            /// 註冊群組 註冊使用者資訊
            /// </summary>
            /// <param name="groupid">群組ID</param>
            /// <param name="usernickname">使用者暱稱</param>
            /// <param name="userfaceimg">使用者頭像</param>
            /// <param name="userid">使用者在網站中的唯一標識ID</param>
            public void Group(string groupid, string usernickname, string userfaceimg, string userid)
            {
                //新增使用者到群組 Groups.Add（使用者連線ID，群組）
                Groups.Add(Context.ConnectionId, groupid);

                //如果說是一個簡單的聊天室 下面這段程式碼是沒有什麼作用的 因為Context.ConnectionId是唯一的使用者於伺服器之間的連線
                //這裡我傳遞進來了 使用者的暱稱和頭像 還有網站中使用者的ID 所以我要把使用者的資訊新增到我們上面建立的那個列表類中

                //如果使用者不存在線上列表中
                if (UserList.Where(p => p.UserId == userid).FirstOrDefault() == null)
                {
                    //我們在列表中 新增這個使用者 並且標記使用者線上 UserStates = "True"
                    UserList.Add(new OnlineUserInfo() { UserId = userid, ConnectionId = Context.ConnectionId, UserNickName = usernickname, UserFaceImg = userfaceimg, UserStates = "True" });
                }
                    //如果使用者已經存在於線上列表中
                else
                {
                    //我們更新使用者列表中使用者的資訊 （這裡更新的資訊主要是使用者的連線ID  ConnectionId = Context.ConnectionId）
                    var UserInfo = UserList.Where(p => p.UserId == userid).FirstOrDefault();
                    UserList.Remove(UserInfo);
                    UserList.Add(new OnlineUserInfo() { UserId = userid, ConnectionId = Context.ConnectionId, UserNickName = usernickname, UserFaceImg = userfaceimg, UserStates = "True" });
                }
                //這個方法是呼叫客戶端LoginUser方法 並且傳遞當前使用者列表 客戶端會重新整理當前使用者列表 呼叫的是全部的已連線的使用者 Clients.All
                Clients.All.LoginUser(Common.JsonConverter.Serialize(UserList));
                //這個方法是呼叫客戶端的 addNewMessageToPage方法 目的是實現 當一個使用者上線是 提醒所有的使用者 某個使用者上線了 提醒的是所有的已連線使用者 所以也是Clients.All
                Clients.All.addNewMessageToPage("<dl  class=\"messageTip clearfix\"><dt></dt><dd>系統訊息：" + DateTime.Now.ToString("HH:mm:ss") + "&nbsp;" + usernickname + "&nbsp;上線了<dd></dl>");
            }

為了方便大家理解，我這裡就先把客戶端的LoginUser和addNewMessageToPage方法貼出來，讓大家好理解伺服器是怎樣呼叫客戶端的js方法的

    //接收伺服器資訊
    chat.client.addNewMessageToPage = function (message) {
        //#chatContent就是一個div層 我們把伺服器返回的資訊追加到這個層上 跟QQ聊天相反，新的資訊我們追加頂部
        $('#chatContent').prepend(message);
    };
    //伺服器端呼叫的LoginUser方法，根據返回的使用者列表 輸出使用者列表到頁面上
    chat.client.LoginUser = function (UserList) {
        //在下一篇介紹的持久連線類中 是可以直接返回Json的 這裡不知道怎麼回事 接收的Json總是被接收成字串 所以這裡我們解析一下
        var data = eval("(" + UserList + ")");
        var html = "";
        for(var i=0;i<data.length;i++)
        {
            //這裡我們做了一個判斷 就是 解析使用者列表Json時 如果使用者的ID 就是當前使用者的ID 那麼就不新增 這跟QQ不一樣啊 QQ中好友列表中是有自己的
            if (data[i].UserId != $("#Juser-userid").val()) {
                //如果使用者的線上狀態是線上呢 我們就新增onclick方法 實現 點選使用者的使用者 可以私聊 如果不線上 就不添加了 因為我們這個是沒有存資料庫的 所以沒有做離線訊息
                if (data[i].UserStates == "True") {
                    html += "<dl onclick=\"javascript:sendPerMessage('" + data[i].ConnectionId + "','" + data[i].UserNickName + "')\" class=\"clearfix tab-item-1\"><dt><img src=\"" + data[i].UserFaceImg + "\"></dt><dd>" + data[i].UserNickName + "</dd></dl>";
                }
                else
                {
                    html += "<dl onclick=\"javascript:void(0)\" class=\"clearfix tab-item-1 liveout\"><dt><img src=\"" + data[i].UserFaceImg + "\"></dt><dd>" + data[i].UserNickName + "</dd></dl>";
                }
            }
        }
        //更新頁面使用者列表
        $("#OnlineUsers").html(html);
    };

這裡注意的是伺服器呼叫的客戶端方法跟客戶端寫的JS方法大小寫是一樣的，後面我們介紹客戶端呼叫伺服器方法的時候會將 客戶端呼叫伺服器方法的時候 伺服器方法的首字母是小寫的，這裡提醒一下。

下面是我們的傳送訊息的方法，當我傳送訊息的時候 傳遞我的頭像和暱稱給伺服器 讓別人顯示訊息的時候能顯示出誰傳送的（這個跟QQ訊息類似啊 方便大家理解）

一個是群組訊息當然也可以是全部訊息，另一個是私聊，就是指定傳送個某一個使用者

/// <summary>
            /// 傳送訊息 自定義判斷是傳送給全部使用者還是某一個組（類似於群聊啦）
            /// </summary>
            /// <param name="groupid">接收的組</param>
            /// <param name="userfaceimg">傳送使用者的頭像</param>
            /// <param name="usernickname">傳送使用者的暱稱</param>
            /// <param name="message">傳送的訊息</param>
            public void Send(string groupid, string userfaceimg, string usernickname, string message)
            {
                if (groupid == "All")//全部使用者（廣播）
                {
                    //呼叫所有客戶端的addNewMessageToPage方法 推送一條訊息
                    Clients.All.addNewMessageToPage("<dl class=\"clearfix\"><dt><img src=\"" + userfaceimg + "\" /></dt><dd><i></i><div class=\"J_Users\">" + usernickname + "</div><div class=\"J_Content\">" + message + "</div></dd></dl>");
                }
                else//指定組(組播)
                {
                    //呼叫指定客戶端的addNewMessageToPage方法 推送一條訊息（所有屬於組groupid的已連線使用者）
                    Clients.Group(groupid).addNewMessageToPage("<dl class=\"clearfix\"><dt><img src=\"" + userfaceimg + "\" /></dt><dd><i></i><div class=\"J_Users\">" + usernickname + "</div><div class=\"J_Content\">" + message + "</div></dd></dl>");
                }
            }

            /// <summary>
            /// 傳送給指定使用者（單播）
            /// </summary>
            /// <param name="clientId">接收使用者的連線ID</param>
            /// <param name="userfaceimg">傳送使用者的頭像</param>
            /// <param name="usernickname">傳送使用者的暱稱</param>
            /// <param name="message">傳送的訊息</param>
            public void SendSingle(string clientId, string userfaceimg, string usernickname, string message)
            {
                //首先我們獲取一下接收使用者的資訊
                var UserInfo = UserList.Where(p => p.ConnectionId == clientId).FirstOrDefault();
                //如果使用者不存在或使用者的線上狀態為False 那麼提醒一下 傳送使用者 對方不線上
                if (UserInfo == null || UserInfo.UserStates == "False")
                {
                    Clients.Client(Context.ConnectionId).addNewMessageToPage("<dl  class=\"messageTip clearfix\"><dt></dt><dd>系統訊息：當前使用者不線上<dd></dl>");
                }
                else
                {
                    //如果使用者存在並且線上呢 就把訊息推送給接收的使用者 並且加上當前使用者資訊 以及新增一個onclick事件 讓接收的使用者 可以直接點選訊息的使用者 回覆 私聊資訊 （不然還要在使用者列表中找到誰給我發的訊息 點選回覆 這不科學...）
                    Clients.Client(clientId).addNewMessageToPage("<dl class=\"clearfix\"><dt onclick=\"javascript:sendPerMessage('" + Context.ConnectionId + "','" + usernickname + "')\"><img src=\"" + userfaceimg + "\" /></dt><dd class=\"per\"><s></s><div onclick=\"javascript:sendPerMessage('" + Context.ConnectionId + "','" + usernickname + "')\" class=\"J_Users\">" + usernickname + "<span>私聊</span></div><div class=\"J_Content\">" + message + "</div></dd></dl>");
                    //這句是傳送給傳送使用者的 總不能我傳送個私聊 對方收到了資訊 我這裡什麼都不顯示是吧 我也顯示我傳送的私聊資訊 因為傳送發就是我自己 所以不加onclick事件了 不允許自己跟自己聊天哦
                    Clients.Client(Context.ConnectionId).addNewMessageToPage("<dl class=\"clearfix\"><dt><img src=\"" + userfaceimg + "\" /></dt><dd class=\"per\"><s></s><div class=\"J_Users\">" + usernickname + "<span>私聊</span></div><div class=\"J_Content\">" + message + "</div></dd></dl>");
                }
            }

這裡我貼一下前臺程式碼

    $.connection.hub.start().done(function () {
        //使用者連線時 註冊一下群組和個人資訊哦 這個的伺服器程式碼 我們上面貼出來了
        //這個Demo是為了讓大家理解SigalR所以沒有做多複雜的流程 個人資訊 我是直接傳遞的 
        //$("#groupid").val()這個是要註冊的群組，可以自己定義 組播的時候 只要是在這一個組裡的都會收到 
        //$("#Juser-login").val()這個是傳送方也就是我的暱稱
        //$("#Juser-faceimg").val()這個是我的頭像
        //$("#Juser-userid").val()這個是我在網站中的唯一標識ID，使用者連線的ID（Context.ConnectionId）也是唯一的，那麼為什麼還要我在這個網站中的ID呢？
        //解釋一下子：單頁面的聊天室是沒有多大必要的，但是比如我們這個功能是放到公用裡的，就像網站的線上客服一樣，你總不能每個頁面都寫一套吧 既然是引用的這一個頁面 
        //那麼使用者開啟其他頁面的時候 這個Context.ConnectionId是會變的，那我怎麼知道這又是誰呢 我們就用使用者在網站中的唯一標識ID作為參照，當新的連線進來時 我們看下是不是ID一樣 
        //一樣的話我們就更新使用者列表中這個唯一標識ID使用者的Context.ConnectionId和線上狀態 不一樣的話就新增新使用者
        chat.server.group($("#groupid").val(), $("#Juser-login").val(), $("#Juser-faceimg").val(), $("#Juser-userid").val());
        $('.sendBtn').click(function () {
            //這裡做一下判斷 如果沒有輸入訊息就傳送 那麼提示一下
            if ($('#MessageBox').val().length <= 0)
            {
                $('#chatContent').prepend("<dl  class=\"messageTip clearfix\"><dt></dt><dd>系統訊息：請輸入資訊<dd></dl>");
            }
            else
            {
                //sendToConnectId 是我們自定義的一個欄位 如果你點選了某一個使用者 那麼就把他的ConnectionId賦給sendToConnectId 我們知道是私聊
                //當然，使用者點選退出私聊的時候 這個欄位會被賦為空 表示是群聊 這個大家在Demo中一看就明白了
                if (sendToConnectId != "" && sendToConnectId.length > 0) {
                    //呼叫伺服器私聊方法 ！！！注意啊！！！伺服器的私聊方法是 public void SendSingle(string clientId, string userfaceimg, string usernickname, string message)
                    //這裡是chat.server.sendSingle 首字母小寫啊 客戶端呼叫的伺服器方法首字母要小寫  伺服器呼叫的客戶端方法 大小寫一致 
                    chat.server.sendSingle(sendToConnectId, $("#Juser-faceimg").val(), $("#Juser-login").val(), $('#MessageBox').val());
                    $('#MessageBox').val("").focus();
                }
                else {
                    //這裡是群聊 我們演示的沒有做群組聊天 所以這裡傳遞的是"All"表示 全部，會發送給全部使用者
                    //說明一下方便理解：比如我們有這麼一個情景，這個聊天是一個討論，對某一篇文章或產品的討論，那麼是不是應該只在這篇文章或這個產品頁面的使用者才能收發屬於這篇文章或產品訊息呢，在其他頁面
                    //的使用者不應該能收發這裡的訊息呀 那麼我們上面的程式碼chat.server.group中傳遞的groupid就應該是某篇文章或產品的標識，把他們劃分到一個組裡比如chat.server.group("A123")一個自定義字串加上文章或產品ID，
                    //或直接用文章或產品的IDchat.server.group("123") 這裡就chat.server.send("123", ...);就實現了 只有在這個頁面中的使用者才能收到此訊息 就跟QQ的群是一樣的
                    chat.server.send("All", $("#Juser-faceimg").val(), $("#Juser-login").val(), $('#MessageBox').val());
                    $('#MessageBox').val("").focus();
                }
            }
        });
    });

使用者離線或重新連線 重寫Hub的方法

 //使用者離線
            public override Task OnDisconnected(bool stopCalled)
            {
                var UserInfo = UserList.Where(p => p.ConnectionId == Context.ConnectionId).FirstOrDefault();
                var userid = UserInfo.UserId;
                var usernickname = UserInfo.UserNickName;
                var userfaceimg = UserInfo.UserFaceImg;
                UserList.Remove(UserInfo);
                UserList.Add(new OnlineUserInfo() { UserId = userid, ConnectionId = Context.ConnectionId, UserNickName = usernickname, UserFaceImg = userfaceimg, UserStates = "False" });

                Clients.All.LoginUser(Common.JsonConverter.Serialize(UserList));
                Clients.All.addNewMessageToPage("<dl  class=\"messageTip clearfix\"><dt></dt><dd>系統訊息：" + DateTime.Now.ToString("HH:mm:ss") + "&nbsp;" + usernickname + "&nbsp;離線了<dd></dl>");

                return base.OnDisconnected(true);
            }

            //使用者重新連線
            public override Task OnReconnected()
            {
                var UserInfo = UserList.Where(p => p.ConnectionId == Context.ConnectionId).FirstOrDefault();
                if (UserInfo != null)
                {
                    var userid = UserInfo.UserId;
                    var usernickname = UserInfo.UserNickName;
                    var userfaceimg = UserInfo.UserFaceImg;
                    UserList.Remove(UserInfo);
                    UserList.Add(new OnlineUserInfo() { UserId = userid, ConnectionId = Context.ConnectionId, UserNickName = usernickname, UserFaceImg = userfaceimg, UserStates = "True" });
                    Clients.All.LoginUser(Common.JsonConverter.Serialize(UserList));
                }
                return base.OnReconnected();
            }

還有一些輔助的JS方法，在這裡我就不一一貼出來了，我把demo地址留給大家 ，大家可以搭建起來研究一下。

這篇文章僅僅是個人的一些理解和實現，可能中間會出現一些不合理的地方或是錯誤，請大家指正，我們共同學習研究。

Demo是用VS 2013寫的 

下載：百度網盤 

補充：Demo是我寫這個部落格之前寫的 沒有用到HubName 這個特性 所以Demo跑起來會有錯誤 大家刪除這個特性就沒有錯誤了 在Hubs資料夾下的ChatHub.cs