layim之绑定未读消息数量

一. 效果演示

layim并没提供未读数量，因此自己马马虎虎整理了一下，效果图大概如下，献丑了

二. 实现教程

2.1、初始化init数据：
我们在用户对象里声明一个参数read，储存待读数量，json数据如图

2.2、在主面板绑定未读消息数量：
打开layim.js文件，找到u函数，在html代码拼接数组里查找绑定好友姓名的代码，然后绑定待读数量即可，代码如下。

// 在{{# if(data.username){ }}后面添加代码 {{ layui.data.read(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++; }}", '
+ i.type + '" data-index="{{ ' + (i.index || "i") + ' }}" class="layim-' + ("history" === i.type ? "{{i}}" : i.type + "{{data.id}}") + ' {{ data.status === "offline" ? "layim-list-gray" : "" }}">{{ data.username||data.groupname||data.name||"佚名" }}','{{# if(data.read > 0){ }}', '{{# if(data.username){ }} {{ layui.data.read(data.read) }}条未读{{# } }}', '{{# if(data.groupname){ }} {{ layui.data.read(data.read) }}条未读{{# } }}', '{{# } }}', '
{{ data.remark||data.sign||"" }}
new
', "{{# }); if(length === 0){ }}", '
' + (a[i.type] || "暂无数据") + "
", "{{# } }}"].join("")
}

在这里已经成功绑定了未读消息，是否很简单咧。

三. 绑定未读消息

想要做完美未读消息功能，必须要做到信息状态及时更正，比如打开聊天界面时，默认所有消息已读，并加载出未读消息到聊天记录当中。因此，我们需要监听聊天窗口的切换事件，及时更正消息状态。

// 监听聊天窗口的切换
layim.on('chatChange', function(res){
	var layimChangeTo = res.data;
    var toId = layimChangeTo.id;
    var type = layimChangeTo.type;
    
    var divId = "#layim-read-"+type+toId;
    // 获取当前对象未读消息数量
    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){
			// 打开的聊天面板是信息来源群聊
			// 这里代码是把消息改为已读状态
		}
    }
}

赠人玫瑰手留余香，若对您有所帮助，来 点个赞呗！