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

posted @ 2016-01-20 21:09  丶Pz  阅读(4524)  评论(0编辑  收藏  举报