基于vue2.x实现的即时通讯程序仿微信聊天11细节优化01

• 我们的项目基本功能基本都开发完了，下面就是优化项目的一些细节了
• 第一个细节，我们来实现【在线头像变正常，不在线头像变灰色，并且可以实时变化】

image.png

• 目前是正常的颜色，但是他们都没在线，所以要先改成默认灰色
• 打开代码src/views/home/index.vue
• 找到头像设置变灰样式filter: grayscale(100%);

.avatar {
   ::v-deep img {
     filter: grayscale(100%);
   }
}

• 这样头像就变灰了

image.png

• 如果想要变成有颜色的头像，直接将filter: grayscale(100%);设置成filter: grayscale(0%);即可
• 这里要用到动态绑定class
• 来测试下，判断索引让第一个好友头像变亮
• 找到头像，动态绑定class，如下

image.png

 :class="(index==0?'color':'')"

• 然后在设置css样式

 .color{
          ::v-deep img {
            filter: grayscale(0%);
          }
        }

• 这样第一个好友头像就会变亮

image.png

• 逻辑我们已经知道了，那怎么去真实判断好友在线不在线呢？
• 其实在我们刚链接wocketIo服务器的时候，服务端给我们发送了一个在线好友的事件，我们只需监听下这个事件，拿到在线好友的id，然后去和你好友列表的好友id做对比就可以了

image.png

• 可以看到，服务端推送了一个users事件，下面是在线好友的对象
• 第一步，我们先来监听users事件，在当前页面使用sockets方法函数

 sockets: {
    users: function (data) {
      console.log(data)
    },
  },

image.png

• 这样就打印出来了，在线好友的对象，下面是处理逻辑，【取对象的keys组成在线好友id数组】，使用到Object.keys()语法

sockets: {
    users: function (data) {
      console.log(data)
      console.log(Object.keys(data))
    }
  },

image.png

• id数组拿到了，就对比下你的好友列表，如果id相等，就赋值你好友列表的那个人的的对象，改变isZaixian的值，比如isZaixian=1，判断条件再改成item.isZaixian ==1?'color':''

:class="item.isZaixian == 1 ? 'color' : ''"

• 下面是处理逻辑，判断好友在线把isZaixian改成1

 sockets: {
    users: function (data) {
      console.log(data)
      console.log(Object.keys(data))
      this.isZaixianArr = Object.keys(data)
    }
  },

 data() {
    return {
        isZaixianArr:[]
    }
}

• 然后在获取好友列表的方法了，在then回调后，去处理逻辑

async getMyfriendsFun() {
      try {
        const res = await getMyfriends()
        let arr = res.data
        const idSet = new Set(this.isZaixianArr)
        //https://blog.csdn.net/yiyueqinghui/article/details/107773347
        const res1 = arr.map(o => ({ ...o, isZaixian: idSet.has(o._id) ? 1 : o.isZaixian }))
        this.list = res1
      } catch (error) {
        console.log(error)
      }
    },

• 在好友上线的时候，刷新你的好友列表

sockets: {
    users: function (data) {
      // console.log(data)
      // console.log(Object.keys(data))
      this.isZaixianArr = Object.keys(data)
      this.getMyfriendsFun()
    }
  },

image.png

• 这样就变亮了，但是还要处理下排序，在线的在上面

 async getMyfriendsFun() {
      try {
        const res = await getMyfriends()
        let arr = res.data
        console.log(this.isZaixianArr);
        const idSet = new Set(this.isZaixianArr)
        // https://blog.csdn.net/yiyueqinghui/article/details/107773347
        console.log(idSet);
        const res1 = arr.map(o => ({ ...o, isZaixian: idSet.has(o._id) ? 1 : o.isZaixian }))
        this.list = res1.sort(function (a, b) {
            return b.isZaixian - a.isZaixian
          })
      } catch (error) {
        console.log(error)
      }
    },