redis 消息离线缓存_ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（九） 之 用 Redis 实现用户在线离线状态消息处理（一）...

前言

上一篇中简单讲解了用Redis缓存在线用户逻辑。篇幅也比较小，本篇将详细实现用户的上线下线通知、图片效果转换功能。而且，代码和开发思路都会详细介绍。

效果展示

目前有三个用户，user1，user2，user3.下图会简单展示用户上线，下线的消息推送效果。

图一：用户1登录，此时好友均不在线。(头像为灰色，谷歌浏览器)

图二：用户1登录(打开360浏览器模拟用户1登录)，此时谷歌浏览器用户收到该用户上线通知，图标亮起

图三：用户2登录(打开搜狗浏览器模拟用户2登录)，此时谷歌浏览器用户收到该用户上线通知，图标亮起

图四：三个用户均在线(三个浏览器截图)

图五：谷歌浏览器用户下线(其他两个用户收到下线消息，头像变黑白)

实战讲解

不完美的地方：

1.用户在线或者下线会有不准确性，需要重新刷新页面才可以

2.群内用户图标暂时还未处理

3.打开聊天窗口的图标也未作处理(如果用户不在线，图标还是亮的)

现在进入正题，所有后台的操作均是为了给前端提供数据。那么前端只要做一件事情即可，接收消息，根据用户上下线改变用户头像的状态。我的方法是用了一个第三方的js。官网：https://en.wikipedia.org/wiki/Grayscale，我把js拷贝到本地，并且封装成layui可引用的js。

正如之前所讲的，我们定义一个gray插件，并且暴漏grayscale对象。小伙伴们不要忘了在首页上配置上该js。

//自定义模块

layui.extend({

signalr:'/scripts/signalr/signalr',

autohub:'/scripts/signalr/autohub',//自动生成的

hub: '/Scripts/signalr/hub',

gray:'/scripts/gray'//控制图片黑白的js

});

然后，我们要做的就很简单了。想把哪个图片置灰，就调用类似如下方法，那么图片就会替换为一个base64的灰色图片了，效果在上边的截图中，相信大家已经看到了。

var imgs = $("img[data-statu