ASP.NET SignalR 與LayIM配合，輕松實現網站客服聊天室（二） 實現聊天室連接

　　上一篇已經簡單介紹了layim WebUI即時通訊組件和獲取數據的后台方法。現在要討論的是SingalR的內容，之前都是直接貼代碼。那么在貼代碼之前先分析一下業務模型，順便簡單講一下SingalR里的部分方法。

　　進入正題，我們要做，即時通訊，就要考慮收發消息。我們先看推送消息的方法，找到 interface IHubConnectionContext<T> 接口定義，Hub文件里的Clients就是繼承 IHubConnectionContext 接口，方法定義如下：

public interface IHubConnectionContext<T>
    {
        T All { get; }

        T AllExcept(params string[] excludeConnectionIds);
        T Client(string connectionId);
        T Clients(IList<string> connectionIds);
        T Group(string groupName, params string[] excludeConnectionIds);
        T Groups(IList<string> groupNames, params string[] excludeConnectionIds);
        T User(string userId);
        T Users(IList<string> userIds);
    }

• All全部連接服務器的客戶端
• AllExcept 除了某些客戶端
• Client 單獨發送給某個指定客戶端（connectionId是客戶端連接服務器后自動生成的，單獨單聊天可以使用這個方法，不過此次我沒有使用）
• Clients 多個指定客戶端
• Group 發送給組內成員，就像QQ群一樣，所有群內成員都能接收到消息 單獨聊天我采用此思路
• Groups 發送給多個組，類似群 群發 多個群內的群成員都能接收到消息
• User 沒使用研究過（不做介紹）
• Users沒使用研究過（不做介紹）

　　

　　好，結下了，着重講一下用Group 方法實現1對1聊天思路。其實原理還是組推送，只不過組里就兩個人，大家都用過QQ聊天，聊天框里面就是兩個人的對話消息。同理如果一個群里面就兩個人的話，是不是也是兩個人的對話消息。所以，如何保證組內就兩個人呢，我采用id+id的思路。

　　如圖：假如用戶1用戶2都在線，用戶1和用戶2聊天的話，那么組ID就為用戶1 ID+用戶2 ID，（需要先將用戶ID排序，例如小的在前，大的在后）思路有了，那么如果不選擇直接拼接，也可以用其他方式生成兩個用戶間的唯一組ID，總之，組名不相同就可以了。

　　下面在介紹一下，singalR 的 server 和 client。介紹之前呢，准備工作要做好：

　　第一步：添加Hub文件

　　第二步：簡單在Hub文件里寫幾個方法，這里我自定義了HubName為 csHub，然后在 startup文件里配置hub路徑

    [HubName("csHub")]
    public class CustomServiceHub : Hub
    {
        public Task Join()
        {
            return Clients.All.receiveMessage("某某人加入了");
        }

        public void SendMessage(string msg)
        {
           // Clients.Group
        }
    }

using Microsoft.AspNet.SignalR;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartupAttribute(typeof(LayIM.Startup))]
namespace LayIM
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.Map("/cs", map =>
            {
                var hubConfiguration = new HubConfiguration()
                {
                    EnableJSONP = true
                };
                map.RunSignalR(hubConfiguration);
            });
        }
    }
}

　　第三步：在頁面中引用相應的js

    <script src="../Scripts/jquery-1.10.2.min.js"></script>
    <script src="../Scripts/jquery.signalR-2.1.2.min.js"></script>
    <script src="http://localhost:20237/cs/hubs"></script>

　　注意看/cs/hubs 路徑，這個是自動生成的一個js，在瀏覽器中打開，找一找代碼，會發現，里面有server和client

$.hubConnection.prototype.createHubProxies = function () {
        var proxies = {};
        this.starting(function () {
            // Register the hub proxies as subscribed
            // (instance, shouldSubscribe)
            registerHubProxies(proxies, true);

            this._registerSubscribedHubs();
        }).disconnected(function () {
            // Unsubscribe all hub proxies when we "disconnect".  This is to ensure that we do not re-add functional call backs.
            // (instance, shouldSubscribe)
            registerHubProxies(proxies, false);
        });

        proxies['csHub'] = this.createHubProxy('csHub'); //創建hub
        proxies['csHub'].client = { };//在client中自定義添加方法需要前端實現，一般接收數據的方法定義在client里面
        proxies['csHub'].server = { //server里面實現了Hub文件中相對應的調用方法，注意：他會自動把首字母大寫的改為小寫。
            join: function () {
                return proxies['csHub'].invoke.apply(proxies['csHub'], $.merge(["Join"], $.makeArray(arguments)));
             },

            sendMessage: function (msg) {
                return proxies['csHub'].invoke.apply(proxies['csHub'], $.merge(["SendMessage"], $.makeArray(arguments)));
             }
        };

        return proxies;
    };

　　第四步：連接服務器，看看是否成功，js中連接服務器的寫法有多種。我這里常用的就是調用start 方法

 $.connection.hub.start({ jsonp: true }).done(function () {
                    //連接服務器
                    _this.proxy.proxyCS.server.join();
                    console.log('連接成功');
                }).fail(function () {
                    console.log("連接失敗");
                });

　　　　//這行代碼是封裝的截取的部分代碼，主要為了下面演示連接服務器效果

　　　　receiveCallBack: function (result) {
　　　　　　console.log("你收到了新消息：" + result);
　　　　　　}

　　我們繼續看一下頁面運行效果，F12看看都發送了哪些請求

　　我們看到有start，connect，poll，send等，查看一下start方法返回的數據 為 Response:started。連接成功了，再看看調用join之后返回的數據：

　　好了配合上邊的部分代碼，到此為止，與singalR服務的連接就完成了。我們可以調用server的join方法發送數據，在調用client的receiveMessage方法接收數據。我把連接服務端的代碼稍作封裝了一下，只需要引用js（client.hub.js）然后前端初始化方法如下：

  var hubConfig = {
            serverUrl: 'http://localhost:20237/cs'
        };
        $(function () {
            csClient.init({serverUrl:hubConfig.serverUrl});//init中傳入serverUrl，里面會自動調用連接服務器方法
        });

　　最后，看一下client.hub.js代碼

(function ($) {
    var csHub = {
        option: {
            serverUrl: '',//singalr服務器url
            receiveCallBack: function (result) {
                console.log("你收到了新消息：" + result);//用戶自定義回調
            }
        },
        proxy: {
            proxyCS: null,//singalr客戶端代理類
        },
        messageType: {
        },
        //client
        client: {
            init: function () {
                //客戶端 receiveMessage 方法
                _this.proxy.proxyCS.client.receiveMessage = function (result) {
                    _this.option.receiveCallBack(result);
                };
            }
        },
        init: function (option) {
            $.extend(_this.option, option);
            _this.server.init();//服務端代碼初始化  
            _this.client.init();//客戶端代碼初始化

        },
        //server
        server: {
            //server初始化
            init: function () {
                this.connect();
                _this.proxy.proxyCS.client.clientOnConnectedCallBack = this.connectCallBack;
            },
            //連接服務器
            connect: function () {
                $.connection.hub.url = _this.option.serverUrl;
                _this.proxy.proxyCS = $.connection.csHub;
                $.connection.hub.start({ jsonp: true }).done(function () {
                    //連接服務器
                    _this.proxy.proxyCS.server.join();
                    console.log('連接成功');
                }).fail(function () {
                    console.log("連接失敗");
                });
            },
            //連接成功之后回調
            connectCallBack: function (result) {
                console.log(result);
            }
        }
    };
    var _this = csHub;
    window.csClient = _this;
})($);

　　講來將去還是需要貼一點代碼上來，可能對於不熟悉singalR的同學來說有點難度，沒關系，下一章進入實戰開發環節，手把手教你用SingalR 把客服聊天室搭建起來。不熟悉singalR的同學可以嘗試做一下小的demo。今天的singalR連接就寫到這里吧。有問題記得留言哦。