上一篇中简单讲解了用Redis缓存在线用户逻辑。篇幅也比较小，本篇将详细实现用户的上线下线通知、图片效果转换功能。而且，代码和开发思路都会详细介绍。
目前有三个用户，user1，user2，user3.下图会简单展示用户上线，下线的消息推送效果。
图四：三个用户均在线（三个浏览器截图）
图五：谷歌浏览器用户下线（其他两个用户收到下线消息，头像变黑白）
不完美的地方：
1.用户在线或者下线会有不准确性，需要重新刷新页面才可以
2.群内用户图标暂时还未处理
3.打开聊天窗口的图标也未作处理（如果用户不在线，图标还是亮的）
正如之前所讲的，我们定义一个gray插件，并且暴漏grayscale对象。小伙伴们不要忘了在首页上配置上该js。
//自定义模块layui.extend({signalr:'/scripts/signalr/signalr',autohub:'/scripts/signalr/autohub',//自动生成的hub:'/Scripts/signalr/hub',gray:'/scripts/gray'//控制图片黑白的js});然后，我们要做的就很简单了。想把哪个图片置灰，就调用类似如下方法，那么图片就会替换为一个base64的灰色图片了，效果在上边的截图中，相信大家已经看到了。
varimgs=$("img[data-status='hide']");if(imgs.length){grayscale(imgs);}大家都知道，刚进入layim界面的时候，我们会有好友列表信息。那么上一篇讲到的用Redis存储在线用户列表就能派上用场了。我们找到base方法（获取用户基础信息，好友信息，群组信息等）
//用户组信息varrowFriendDetails=ds.Tables[2].Rows.Cast
看到画红框的地方了吧，我的两个好友都不在线（hide）。但是呢，图标还是亮的，怎么办，那就需要等数据加载完之后我们用上边的处理图标的js处理一下。没错，又要改layim代码了。（PS:官方是不建议改的哈，否则升级不好整合）好多同学想要改代码无从下手，我简单说一下我的改代码思路。其实无论js要干嘛，最终它还是为html服务，所以，我们找到用户头像的标签：
上图呢是处理过的图片，不过没关系，我们只要关心，这个img标签在哪里就可以了。（注意：data-status是我加的，也就是说，改源代码就是加了这么个东西）然后我们找到layim代码，从模板里面找就可以了。
红框的地方就是我改动的地方。改完它之后，我们在看主界面，这样我们就知道img标签中，哪个是需要处理成黑白图片的了。然后在ready方法中调用：
#region获取某个用户的好友列表///
如图所示，用户10003的好友为：10004,10005.值组成格式为：userAvatar+$LAYIM$+friendids。同样，我们在HubServer中增加发送用户上下线消息的方法：
///
我们先运行一下，看看效果：
我们把消息定义成统一格式是有好处的，这样我们可以根据自己的业务进行处理，接受消息就一个接口：receiveMessage。可以看到msg里面有用户头像，和在线状态，还有用户id。得到了这些信息之后，我们去处理一下就OK了。
//重新设置用户头像，黑白或者亮resetUserAvatar:function(obj){varavatar=obj.avatar,online=obj.online,userid=obj.userid;//这句代码是定位到该用户下的头像varimgObj=$('#layim-friend'+userid).find('img');if(imgObj.length){if(obj.online){//如果上线了，将头像换成原来的头像，即非黑白头像imgObj.attr('src',avatar);}else{//将头像置黑grayscale(imgObj);}}}到此为止，功能开发结束。
本篇内容相对来说比上一篇多一点，涉及内容有，Redis缓存，更新等。图片黑白处理，SignalR消息处理。以及源代码阅读。
总之呢，最重要的部分就是SignalR这个推送如果稳定了，只要消息能够送达客户端，那么任由客户端去处理了。大家还有注意学会自定义消息内容。保证自己的业务能够顺畅。