一. 效果演示
layim并没提供未读数量,因此自己马马虎虎整理了一下,效果图大概如下,献丑了
二. 实现教程
2.1、初始化init数据:
我们在用户对象里声明一个参数read,储存待读数量,json数据如图
2.2、在主面板绑定未读消息数量:
打开layim.js文件,找到u函数,在html代码拼接数组里查找绑定好友姓名的代码,然后绑定待读数量即可,代码如下。
// 1.显示未读数量:在“{
{# if(data.username){ }}”后面添加代码“<d style="color:red;"> {
{ layui.data.read(data.read) }}条未读</d>”
// 2.把未读数量添加到input中:在“<img src="{
{ data.avatar }}">”后面添加代码“<input type="hidden" id="layim-read-{
{# if(data.username){ }}friend{
{# } }}{
{# if(data.groupname){ }}group{
{# } }}{
{data.id}}" value="{
{ data.read }}">”
u = function(i) {
var a = {
friend: "该分组下暂无好友",
group: "暂无群组",
history: "暂无历史会话"
};
return i = i || {
}, i.item = i.item || "d." + i.type, ["{
{# var length = 0; layui.each(" + i.item + ", function(i, data){ length++; }}", '<li mineid="{
{data.id}}" {
{# if(data.groupname){ }}owner="{
{data.owner}}"{
{# } }} layim-event="chat" data-type="' + i.type + '" data-index="{
{ ' + (i.index || "i") + ' }}" class="layim-' + ("history" === i.type ? "{
{i}}" : i.type + "{
{data.id}}") + ' {
{ data.status === "offline" ? "layim-list-gray" : "" }}"><img src="{
{ data.avatar }}"><input type="hidden" id="layim-read-{
{# if(data.username){ }}friend{
{# } }}{
{# if(data.groupname){ }}group{
{# } }}{
{data.id}}" value="{
{ data.read }}"><span>{
{ data.username||data.groupname||data.name||"佚名" }}','{
{# if(data.read > 0){ }}', '{
{# if(data.username){ }}<d style="color:red;"> {
{ layui.data.read(data.read) }}条未读</d>{
{# } }}', '{
{# if(data.groupname){ }}<d style="color:red;"> {
{ layui.data.read(data.read) }}条未读</d>{
{# } }}', '{
{# } }}', '</span><p>{
{ data.remark||data.sign||"" }}</p><span class="layim-msg-status">new</span></li>', "{
{# }); if(length === 0){ }}", '<li class="layim-null">' + (a[i.type] || "暂无数据") + "</li>", "{
{# } }}"].join("")
}
在这里已经成功绑定了未读消息,是否很简单咧。
三. 绑定未读消息
想要做完美未读消息功能,必须要做到信息状态及时更正,比如打开聊天界面时,默认所有消息已读,并加载出未读消息到聊天记录当中。因此,我们需要监听聊天窗口的切换事件,及时更正消息状态。
// 监听聊天窗口的切换
layim.on('chatChange', function(res){
var layimChangeTo = res.data;
var toId = layimChangeTo.id;
var type = layimChangeTo.type;
var divId = "#layim-read-"+type+toId;
// 获取当前对象未读消息数量(2.2中已经初始化)
var readCount = $(divId).val();
// 判断群组聊天还是好友聊天
var sendType = layimChangeTo.type === 'friend' ? 1 : 2;
if(readCount > 0){
// 去除未读消息提示
$(".layim-"+type+toId+" span").html(layimChangeTo.username||layimChangeTo.groupname||"");
// 设置未读消息数量为0
$(divId).val(0);
/* 以下代码为循环绑定聊天记录信息,并把这些记录改为已读 */
layim.getMessage({
username: "纸飞机" //消息来源用户名
,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //消息来源用户头像
,id: "100000" //消息的来源ID(如果是私聊,则是用户id,如果是群聊,则是群组id)
,type: "friend" //聊天窗口来源类型,从发送消息传递的to里面获取
,content: "嗨,你好!本消息系离线消息。" //消息内容
,cid: 0 //消息id,可不传。除非你要对消息进行一些操作(如撤回)
,mine: false //是否我发送的消息,如果为true,则会显示在右方
,fromid: "100000" //消息的发送者id(比如群组中的某个消息发送者),可用于自动解决浏览器多窗口时的一些问题
,timestamp: 1467475443306 //服务端时间戳毫秒数。注意:如果你返回的是标准的 unix 时间戳,记得要 *1000
});
}
});
三. 监听当前打开的聊天窗体
当然喽,要是好友甲给我发了新消息,同时我也在与好友甲聊天(打开与好友甲的聊天窗体),这种情况也需要把消息改为已读状态,我们通过监听接收到消息的回调方法实现。
// 接收到消息的回调方法
websocket.onmessage = function (event) {
// 获取返回数据
var json = JSON.parse(event.data);
console.log(json);
// 判断当前打开的聊天面板是否为信息来源
var layimFriendObj = $(".layui-layim-chat .layui-show .layim-chat-other img").attr("class");
if(layimFriendObj!=null && layimFriendObj!='' && layimFriendObj!='undefined'){
// 获取消息类型(好友消息friend,群组消息group)
var type = json.data.to.type;
// 获取消息发送者编号
var sourceId = type==="friend" ? layimSendTo.id : json.data.to.id;
/*
* 好友:(在线样式layim-friend2,离线样式layim-friend4 layim-list-gray)
* 群聊:(在线样式layim-group5)
*/
layimFriendObj = layimFriendObj.replace(/ layim-list-gray/g,"");
var chatMainObj = "layim-"+type+sourceId;
if(chatMainObj===layimFriendObj){
// 打开的聊天面板是信息来源群聊
// 这里代码是把消息改为已读状态
}
}
}
赠人玫瑰手留余香,若对您有所帮助,来
点个赞
呗!