休息了两天,还是决定把这个尾巴给收了。本篇是最后一篇,也算是草草收尾吧。今天要加上表情功能和群聊。基本上就差不多了,其他功能,读者可以自行扩展或者优化。至于我写的代码方面,自己也没去重构。好的,我们开始在原有的基础上添加功能。

  1.表情功能

  表情我用了一个jquery插件,qqFace。由于GitHub中源码已经包含,我这里不在粘贴地址。先看一下添加表情后的效果吧。

表情这里不要忘了加页面样式,表情选中样式。还有一个就是小bug就是,表情框被聊天框限制住了(修改方法:将layim.css里面的代码 overflow注释掉)。另外,初始化表情插件的地方应该在有元素之后,否则,表情插件会提示,无对象。简单把代码贴一下:

.layim_chat, .layim_chatmore,.layim_groups{height:450px; /*overflow:hidden;*/}
 node.list.on('click', '.xxim_childnode', function () {
var othis = $(this);
var type = othis.attr('type');
//当前登录用户id
var currentid = config.user.id;
//取得被点击的用户id
var receiveid = othis.data('id'); //调用signalR封装的方法,连接服务器,将发送人id,接收人id传给后台,当前用户加入组
/*新改,由于区分单个聊天和群组聊天,所以这里将type传进去*/
csClient.server.ctoc(currentid, receiveid, type);
//弹出聊天窗口
xxim.popchatbox(othis);
//初始化QQ表情
$('.layim_addface').qqFace({
id: 'facebox', //表情盒子的ID
assign: 'layim_write', //给那个控件赋值
path: '/scripts/qq/face/' //表情存放的路径
});
});

  大家不要忘了这个方法哦,这个是将消息内的表情,转换为图片的:

   function replace_em(str) {
str = str.replace(/\</g, '&lt;');
str = str.replace(/\>/g, '&gt;');
str = str.replace(/\n/g, '<br/>');
str = str.replace(/\[em_([0-9]*)\]/g, '<img src="/scripts/qq/face/$1.gif" border="0" />');
return str;
}

  接收消息的时候调用一下这个方法即可

 //拼接html 直接调用layim里的代码
log.imarea.append(log.html({
time: result.addtime,
name: result.fromuser.username,
face: result.fromuser.photo,
content: replace_em(result.msg)//如果有表情,需要将表情转换为图片
}, type));

PS:可能你们都不知道代码的位置在哪,不要紧,这里只是介绍我改动了那一部分,或者需要注意的地方,完整代码大家到最后的github地址下载即可。

  下面呢,我们继续做群发功能。不得不佩服 layim的作者,里面的参数和一些业务的封装让我更好的关注业务逻辑,不用管前端的一些处理。我们查看一下源代码,可以看到,type有 group和one两种类型,one为单聊,group为群聊,这样的话,就可以根据类型向后台传参数。不过整体开发思路和单聊是一样的。我这里就不多做介绍了。

//此处皆为模拟
var keys = xxim.nowchat.type + xxim.nowchat.id;
var t = xxim.nowchat.type;//当前的聊天类型 one group
var id = xxim.nowchat.id;//当前的聊天对象,如果是我one,接收人就是id 如果是我群组,那么id为群组id
//聊天模版
node.imwrite.val('').focus();
//这里增加singalR发送消息流程,目前先采用回调将自己的消息添加上去
csClient.server.send(data.content, config.user.id, config.user.name, config.user.face, id, t);
//这里需要删除所有其他处理聊天信息的代码,在singalR回调中处理

  第一步:在CustomServiceHub类中增加,连接服务器和发送群聊消息的方法

 /// <summary>
/// 发送消息 ,服务器接收的是CSChatMessage实体,他包含发送人,接收人,消息内容等信息
/// </summary>
/// <param name="msg"></param>
/// <returns></returns>
public Task ClientSendMsgToClient(CSChatMessage msg)
{
var groupName = MessageUtils.GetGroupName(msg.fromuser.userid.ToString(), msg.touser.userid.ToString());
/*
中间处理一下消息直接转发给(A,B所在组织,即聊天窗口)
*/
msg.other = new { t = MessageConfig.ClientTypeCTC };
msg.msgtype = CSMessageType.Custom;//消息类型为普通消息
return Clients.Group(groupName).receiveMessage(msg);
} /// <summary>
/// 发送消息 (群组),服务器接收的是CSChatMessage实体,他包含发送人,接收人,消息内容等信息
/// </summary>
/// <param name="msg"></param>
/// <returns></returns>
public Task ClientSendMsgToGroup(CSChatMessage msg)
{
//获取要推送的组织名称
var groupName = MessageUtils.GetGroupName(msg.touser.userid.ToString());
//附加信息,为群信息
msg.other = new { t = MessageConfig.ClientTypeCTG };
//普通信息类型
msg.msgtype = CSMessageType.Custom;
return Clients.Group(groupName).receiveMessage(msg);
}

  在chat.hub.js里面添加对应的封装:

 //发送,增加最后一个参数t, one ,group 群聊还是单体聊天
send: function (msg, userid, username, userphoto, rid, t) {
var obj = {
msg: msg,
fromuser: {
userid: userid,
username: username,
photo: userphoto
},
touser: {
userid: rid
}
};
switch (t) {
case 'one':
this.ctocsend(obj);
break;
case 'group':
this.ctogsend(obj);
break;
default:
alert('无效的消息类型');
}
},
//单独
ctocsend: function (sendObj) {
_this.proxy.proxyCS.server.clientSendMsgToClient(sendObj);
},
//群组
ctogsend: function (sendObj) {
_this.proxy.proxyCS.server.clientSendMsgToGroup(sendObj);
},

  最后一步,调整一下接收消息的方法,将key改成动态的。然后其他代码不变。

       //接收人 result.other.t 是从后台将是否群组消息返回过来
var keys = result.other.t + result.touser.userid;
//发送人
var keys1 = result.other.t + result.fromuser.userid;

  最后,我们运行,看一下效果。(开三个浏览器,模拟三个用户,在群里聊天)

  总结:本篇稍微粗糙一点,因为本来单聊就是用了群聊的方案,所以,本篇没有多做介绍。其实,聊天室还是用了signalR最基本的功能,一些权限验证和其他配置都没加。不过不得不承认,它可以做很多强大实用的功能。web客服聊天室就到此为止吧,欢迎提意见。联系QQ:645857874

  GitHub地址:https://github.com/fanpan26/LayIM

ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(四) 添加表情、群聊功能的更多相关文章

  1. 转载 ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(三) 激动人心的时刻到啦,实现1v1聊天

    ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(三) 激动人心的时刻到啦,实现1v1聊天   看起来挺简单,细节还是很多的,好,接上一篇,我们已经成功连接singalR服务器 ...

  2. 转载 ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据

    ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据   最近碰巧发现一款比较好的Web即时通讯前端组件,layim,百度关键字即可,我下面要做的就是基于这个前 ...

  3. ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(二) 实现聊天室连接

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

  4. ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(三) 激动人心的时刻到啦,实现1v1聊天

    看起来挺简单,细节还是很多的,好,接上一篇,我们已经成功连接singalR服务器了,那么剩下的内容呢,就是一步一步实现聊天功能. 我们先看看缺什么东西 点击好友弹框之后,要给服务器发消息,进入组Gro ...

  5. ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据

    最近碰巧发现一款比较好的Web即时通讯前端组件,layim,百度关键字即可,我下面要做的就是基于这个前端组件配合后台完成即时聊天等功能.当然用到的技术就是ASP.NET SingalR框架.本人不会c ...

  6. ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(五) 补充:历史记录 和 消息提醒

    有开发者提问怎么做历史记录功能和即使不打开聊天窗口有消息提醒功能.简单抽时间写了点代码.不过只是基本思路,具体细节没有实现. 正如前几篇博客中提到的,读取历史记录什么时候读取呢?按照常理,应该是打开聊 ...

  7. ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(八)之 聊天记录入队(列)

    本篇也算是个番外篇了,跟之前几篇关系不算大.之前一篇  RabbitMQ .NET Client 实战实验 里有介绍过今天要用的内容. 做了一下小更改,就是在用户聊天的时候,消息记录不直接进入数据库, ...

  8. ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(七)之 图文,附件消息(2016-05-05 12:13)

    上一篇介绍了加好友的流程,这里不再赘述,不过之前的聊天只能发送普通文字,那么本篇就教你如何实现发送附件和图片消息.我们先对功能进行分析: 发送图片,附件,需要实现上传图片和附件的功能. textare ...

  9. ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(六)之 好友申请、同意、拒绝

    不知道距离上一篇多久没有写了,可能是因为忙(lan)的关系吧.废话不多说,今天要介绍的不算什么新知识,主要是逻辑上的一些东西.什么逻辑呢,加好友,发送好友申请,对方审批通过,拒绝.(很遗憾,对方审批通 ...

随机推荐

  1. HDU 5008 Boring String Problem(后缀数组+二分)

    题目链接 思路 想到了,但是木写对啊....代码 各种bug,写的乱死了.... 输出最靠前的,比较折腾... #include <cstdio> #include <cstring ...

  2. Python3实现简单的爬虫功能

    python3简单实现一个爬去网站图片的小功能: 有时候想要下载自己喜欢的多个图片时,不需要一个个点击来下载,使用python脚本批量拉取,并保存到本地. 1. 首先找到自己要下载图片的url 2. ...

  3. rocksdb 编译安装 日志

    Compilation RocksDB's library should be able to compile without any dependency installed, although w ...

  4. CF444C DZY Loves Colors

    考试完之后打的第一场CF,异常惨烈呀,又只做出了一题了.A题呆滞的看了很久,领悟到了出题者的暗示,应该就是两个点的时候最大吧,不然的话这题肯定特别难敲,YY一发交上去然后就过了.然后就在不停地YY B ...

  5. CLI结果输出

    例子:FTP::11.245.253.20_CIPS_dev_bak\/opt/IBM/db2/V9.7/samples/ 要不要修改整体结构,先看看细节 CLI结果输出: 1. 逐条的获取--确定产 ...

  6. #Java学习之路——第一部分总结

    今天主要是Java的入门以及idea的安装说实话,没有什么有技术含量的东西,发的也全是皮毛,但是在数组部分有很多细节需要注意,在JDK环境变量配置的地方不光光只有windows 的环境配置,还要掌握补 ...

  7. jdk环境配置以及java执行过程

    下载好jdk,并按照提示一步步安装,最后记下jdk所在的安装位置,这里假设在C:\Program Files (x86)\Java\jdk1.8.0_20 现在开始配置环境变量.鼠标右键点击“计算机” ...

  8. MySQL 下载地址获取

    http://cdn.mysql.com/Downloads/MySQL-5.7/mysql-5.7.26-winx64.msi 首先安装 mysql installer 安装器进行安装,之前会让你选 ...

  9. phpstorm 配置git上传代码到 码云

    方法一: 1.安装git,一路next下去. git安装完自带右键菜单 2.看一下phpstorm里的路径是否正确. 3.使用phpstorm管理代码库 新建,从码云上已有的公开项目克隆一份到本地: ...

  10. PureComponent的作用及一些使用陷阱

    默认渲染行为的问题 在React Component的生命周期中,有一个shouldComponentUpdate方法.这个方法默认返回值是true. 这意味着就算没有改变组件的props或者stat ...