一. 效果演示
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){
// 打开的聊天面板是信息来源群聊
// 这里代码是把消息改为已读状态
}
}
}
赠人玫瑰手留余香，若对您有所帮助，来
点个赞呗！