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鏈接就寫到這裏吧。有問題記得留言哦。