文武教师网,美乐猴童装,五十度灰电影完整版bt
一、引言
在前一篇文章已经详细介绍了signalr了，并且简单介绍它在asp.net mvc 和wpf中的应用。在上篇博文介绍的都是群发消息的实现，然而，对于signalr是为了实时聊天而生的，自然少了不像qq一样的端对端的聊天了。本篇博文将介绍如何使用signalr来实现类似qq聊天的功能。
二、使用signalr实现端对端聊天的思路
在介绍具体实现之前，我先来介绍了使用signalr实现端对端聊天的思路。相信大家在前篇文章已经看到过clients.all.sendmessage(name, message);这样的代码，其表示调用所有客户端的sendmessage。signalr的集线器使得客户端和服务端可以进行实时通信。那要实现端对端的聊天，自然就不能像所有客户端发送消息了，而只能向特定的客户端发送消息才可以，不然不就乱套了，没有任何隐私权了。那怎样才可以向特定的客户端发送消息呢？这个问题也就是我们实现端对端聊天功能的关键。
我们发送clients对象除了all属性外，还具有其他属性，你可以在vs中按f12来查看clients对象的所有属性或方法，具体的定义如下：
我要评论
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); // 参数中的用户
}
在signalr中，每一个客户端为标记其唯一性，signalr都会分配它一个connnectionid，这样我们就可以通过connnectionid来找到特定的客户端了。这样，我们在向某个客户端发送消息的时候，除了要将消息传入，也需要将发送给对方的connectionid输入，这样服务端就能根据传入的connectionid来转发对应的消息给对应的客户端了。这样也就完成了端对端聊天的功能。另外，如果用户如果不在线的话，服务端可以把消息保存到数据库中，等对应的客户端上线的时候，再从数据库中查看该客户端是否有消息需要推送，有的话，从数据库取出数据，将该数据推送给该客户端。（不过这点，服务端缓存数据的功能本篇博文没有实现，在这里介绍就是让大家明白qq一个实现原理）。
下面我们来梳理下端对端聊天功能的实现思路：
客户端登入的时候记录下客户端的connnectionid，并将用户加入到一个静态数组中，该数据为了记录所有在线用户。
用户可以点击在线用户中的用户聊天，在发送消息的时候，需要将connectionid一并传入到服务端。
服务端根据传入的消息内容和connectionid调用clients.client(connnection).sendmessage方法来进行转发到对应的客户端。
三、实现酷炫聊天功能核心代码
有了实现思路，实现功能也就得心应手了，接下来，让我们先看下集线器chathub中的代码：
public class chathub : hub
{
// 静态属性
public static list<userinfo> onlineusers = new list<userinfo>(); // 在线用户列表
/// <summary>
/// 登录连线
/// </summary>
/// <param name="userid">用户id</param>
/// <param name="username">用户名</param>
public void connect(string userid, string username)
{
var connnectid = context.connectionid;
if (onlineusers.count(x => x.connectionid == connnectid) == 0)
{
if (onlineusers.any(x => x.userid == userid))
{
var items = onlineusers.where(x => x.userid == userid).tolist();
foreach (var item in items)
{
clients.allexcept(connnectid).onuserdisconnected(item.connectionid, item.username);
}
onlineusers.removeall(x => x.userid == userid);
}
//添加在线人员
onlineusers.add(new userinfo
{
connectionid = connnectid,
userid = userid,
username = username,
lastlogintime = datetime.now
});
}
// 所有客户端同步在线用户
clients.all.onconnected(connnectid, username, onlineusers);
}
/// <summary>
/// 发送私聊
/// </summary>
/// <param name="touserid">接收方用户连接id</param>
/// <param name="message">内容</param>
public void sendprivatemessage(string touserid, string message)
{
var fromuserid = context.connectionid;
var touser = onlineusers.firstordefault(x => x.connectionid == touserid);
var fromuser = onlineusers.firstordefault(x => x.connectionid == fromuserid);
if (touser != null && fromuser != null)
{
// send to
clients.client(touserid).receiveprivatemessage(fromuserid, fromuser.username, message);
// send to caller user
// clients.caller.sendprivatemessage(touserid, fromuser.username, message);
}
else
{
//表示对方不在线
clients.caller.absentsubscriber();
}
}
/// <summary>
/// 断线时调用
/// </summary>
/// <param name="stopcalled"></param>
/// <returns></returns>
public override task ondisconnected(bool stopcalled)
{
var user = onlineusers.firstordefault(u => u.connectionid == context.connectionid);
// 判断用户是否存在,存在则删除
if (user == null) return base.ondisconnected(stopcalled);
clients.all.onuserdisconnected(user.connectionid, user.username); //调用客户端用户离线通知
// 删除用户
onlineusers.remove(user);
return base.ondisconnected(stopcalled);
}
}
上面是服务端主要的实现，接下来看看客户端的实现代码：
<script type="text/javascript">
var systemhub = $.connection.chathub;
/ 连接im服务器成功
// 主要是更新在线用户
systemhub.client.onconnected = function (id, username, allusers) {
var node = chatcore.node, myf = node.list.eq(0), str = '', i = 0;
myf.addclass('loading');
onlinenum = allusers.length;
if (onlinenum > 0) {
str += '<li class="chatcore_parentnode chatcore_liston">'
+ '<h5><i></i><span class="chatcore_parentname">在线用户</span><em class="chatcore_nums">（' + onlinenum + '）</em></h5>'
+ '<ul id="chatcore_friend_list" class="chatcore_chatlist">';
for (; i < onlinenum; i++) {
str += '<li id="userid-' + allusers[i].userid + '" data-id="' + allusers[i].connectionid + '" class="chatcore_childnode" type="one"><img src="/content/images/001.jpg?' + allusers[i].userid + '" class="chatcore_oneface"><span class="chatcore_onename">' + allusers[i].username + '(' + ')</span><em class="chatcore_time">' + allusers[i].logintime + '</em></li>';
}
str += '</ul></li>';
myf.html(str);
} else {
myf.html('<li class="chatcore_errormsg">没有任何数据</li>');
}
myf.removeclass('loading');
};
//消息传输
chatcore.transmit = function () {
var node = chatcore.node, log = {};
node.sendbtn = $('#chatcore_sendbtn');
node.imwrite = $('#chatcore_write');
//发送
log.send = function () {
var data = {
content: node.imwrite.val(),
id: chatcore.nowchat.id,
sign_key: '', //密匙
_: +new date
};
if (data.content.replace(/\s/g, '') === '') {
layer.tips('说点啥呗！', '#chatcore_write', 2);
node.imwrite.focus();
} else {
//此处皆为模拟
var keys = chatcore.nowchat.type + chatcore.nowchat.id;
//聊天模版
log.html = function (param, type) {
return '<li class="' + (type === 'me' ? 'chatcore_chateme' : '') + '">'
+ '<div class="chatcore_chatuser">'
+ function () {
if (type === 'me') {
return '<span class="chatcore_chattime">' + param.time + '</span>'
+ '<span class="chatcore_chatname">' + param.name + '</span>'
+ '<img src="' + param.face + '" >';
} else {
return '<img src="' + param.face + '" >'
+ '<span class="chatcore_chatname">' + param.name + '</span>'
+ '<span class="chatcore_chattime">' + param.time + '</span>';
}
}()
+ '</div>'
+ '<div class="chatcore_chatsay">' + param.content + '<em class="chatcore_zero"></em></div>'
+ '</li>';
};
log.imarea = chatcore.chatbox.find('#chatcore_area' + keys);
log.imarea.append(log.html({
time: new date().tolocalestring(),
name: config.user.name,
face: config.user.face,
content: data.content
}, 'me'));
node.imwrite.val('').focus();
log.imarea.scrolltop(log.imarea[0].scrollheight);
// 调用服务端sendprivatemessage方法来转发消息
systemhub.server.sendprivatemessage(chatcore.nowchat.id, data.content);
}
};
node.sendbtn.on('click', log.send);
node.imwrite.keyup(function (e) {
if (e.keycode === 13) {
log.send();
}
});
};
//用户离线
systemhub.client.onuserdisconnected = function (id, username) {
onlinenum = onlinenum - 1;
$(".chatcore_nums").html("（" + onlinenum + "）");
$("#chatcore_friend_list li[data-id=" + id + "]").remove();
};
// 启动连接
$.connection.hub.start().done(function () {
systemhub.server.connect(userid, username); // 调用服务端connect方法
});
</script>
上面只是列出了一些核心代码实现。另外，为了实现的酷炫的效果，这里采用了一个jquery插件：layer,官方网址为：http://layer.layui.com/。这个插件主要为了实现弹出框和弹出层的效果，要实现酷炫的聊天特效，就需要自己写js代码了，由于本人并不是很熟悉前端，所以这个js特效代码也是参考网络上的实现。大家如果想运行查看效果，建议到文章末尾下载源码进行运行。
四、最终效果
介绍完了实现思路和实现代码之后，既然就到了我们激动人心的一刻了，那就是看看我们实现功能是否可以满足需求，另外，除了满足基本的聊天功能外，还需要看看界面是不是够酷炫。
五、总结
看完上面的效果，是不是很炫呢。到此，本文的内容就结束了，在接下来的一篇文章中我会继续介绍如何使用asp.net signalr来实现聊天室的功能。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
网友评论