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