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连接就写到这里吧。有问题记得留言哦。