您的位置：首页 > 编程语言 > ASP

ASP.NET SignalR 与LayIM配合，轻松实现网站客服聊天室（二）实现聊天室连接

2016-01-20 21:09 381 查看

　　上一篇已经简单介绍了layimWebUI即时通讯组件和获取数据的后台方法。现在要讨论的是SingalR的内容，之前都是直接贴代码。那么在贴代码之前先分析一下业务模型，顺便简单讲一下SingalR里的部分方法。

　　进入正题，我们要做，即时通讯，就要考虑收发消息。我们先看推送消息的方法，找到interfaceIHubConnectionContext<T>接口定义，Hub文件里的Clients就是继承IHubConnectionContext接口，方法定义如下：

publicinterfaceIHubConnectionContext<T>
{
TAll{get;}

TAllExcept(paramsstring[]excludeConnectionIds);
TClient(stringconnectionId);
TClients(IList<string>connectionIds);
TGroup(stringgroupName,paramsstring[]excludeConnectionIds);
TGroups(IList<string>groupNames,paramsstring[]excludeConnectionIds);
TUser(stringuserId);
TUsers(IList<string>userIds);
}

All全部连接服务器的客户端

AllExcept除了某些客户端

Client单独发送给某个指定客户端（connectionId是客户端连接服务器后自动生成的，单独单聊天可以使用这个方法，不过此次我没有使用）

Clients多个指定客户端

Group发送给组内成员，就像QQ群一样，所有群内成员都能接收到消息单独聊天我采用此思路

Groups发送给多个组，类似群群发多个群内的群成员都能接收到消息

User没使用研究过（不做介绍）

Users没使用研究过（不做介绍）

　　

　　好，结下了，着重讲一下用Group方法实现1对1聊天思路。其实原理还是组推送，只不过组里就两个人，大家都用过QQ聊天，聊天框里面就是两个人的对话消息。同理如果一个群里面就两个人的话，是不是也是两个人的对话消息。所以，如何保证组内就两个人呢，我采用id+id的思路。

　　如图：假如用户1用户2都在线，用户1和用户2聊天的话，那么组ID就为用户1ID+用户2ID，（需要先将用户ID排序，例如小的在前，大的在后）思路有了，那么如果不选择直接拼接，也可以用其他方式生成两个用户间的唯一组ID，总之，组名不相同就可以了。

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

　　第一步：添加Hub文件

　　第二步：简单在Hub文件里写几个方法，这里我自定义了HubName为csHub，然后在startup文件里配置hub路径

[HubName("csHub")]
publicclassCustomServiceHub:Hub
{
publicTaskJoin()
{
returnClients.All.receiveMessage("某某人加入了");
}

publicvoidSendMessage(stringmsg)
{
//Clients.Group
}
}

usingMicrosoft.AspNet.SignalR;
usingMicrosoft.Owin;
usingOwin;

[assembly:OwinStartupAttribute(typeof(LayIM.Startup))]
namespaceLayIM
{
publicpartialclassStartup
{
publicvoidConfiguration(IAppBuilderapp)
{
app.Map("/cs",map=>
{
varhubConfiguration=newHubConfiguration()
{
EnableJSONP=true
};
map.RunSignalR(hubConfiguration);
});
}
}
}

　　第三步：在页面中引用相应的js

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

　　注意看/cs/hubs路径，这个是自动生成的一个js，在浏览器中打开，找一找代码，会发现，里面有server和client

$.hubConnection.prototype.createHubProxies=function(){
varproxies={};
this.starting(function(){
//Registerthehubproxiesassubscribed
//(instance,shouldSubscribe)
registerHubProxies(proxies,true);

this._registerSubscribedHubs();
}).disconnected(function(){
//Unsubscribeallhubproxieswhenwe"disconnect".Thisistoensurethatwedonotre-addfunctionalcallbacks.
//(instance,shouldSubscribe)
registerHubProxies(proxies,false);
});

proxies['csHub']=this.createHubProxy('csHub');//创建hub
proxies['csHub'].client={};//在client中自定义添加方法需要前端实现，一般接收数据的方法定义在client里面
proxies['csHub'].server={//server里面实现了Hub文件中相对应的调用方法，注意：他会自动把首字母大写的改为小写。
join:function(){
returnproxies['csHub'].invoke.apply(proxies['csHub'],$.merge(["Join"],$.makeArray(arguments)));
},

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

returnproxies;
};

　　第四步：连接服务器，看看是否成功，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）然后前端初始化方法如下：

varhubConfig={
serverUrl:'http://localhost:20237/cs'
};
$(function(){
csClient.init({serverUrl:hubConfig.serverUrl});//init中传入serverUrl，里面会自动调用连接服务器方法
});

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

(function($){
varcsHub={
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连接就写到这里吧。有问题记得留言哦。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

ASP.NET SignalR 与LayIM配合，轻松实现网站客服聊天室（二） 实现聊天室连接

ASP.NET SignalR 与LayIM配合，轻松实现网站客服聊天室（二）实现聊天室连接