vue+websocket+nodejs实现聊天室 - 消息已读未读

前言
上一篇讲了聊天室增加一对一单聊，这次讲如何新增已读未读状态。

大概思路：
服务器返回消息列表，增加参数status为1，单聊和群聊通过过滤状态区分对应未读数量，当前聊天，直接在currentMessage里面设置status为0即可。

效果图：

上代码：

服务端：

其他的跟之前都一样，只是type为2时候，新增了status:1 
 ...
 broadcast({
    type: 2,
     nickname: obj.nickname,
     uid: obj.uid,
     msg: obj.msg,
     users,
     date: moment().format('YYYY-MM-DD HH:mm:ss'),
     brige: obj.brige,
     status: 1 // 表示未读
 })

客户端：

视图层：
（只是增加了未读提示，其他的都没变，通过getMsgNum()获取未读消息数）

<div class="left">
        <div class="user" @click="triggerGroup()">
          <span> 群一</span>
          <span class="msgtip" v-show="getMsgNum()">{{getMsgNum()}}</span>
        </div>
        <div class="user" v-for="(itm, idex) in users" :key="idex" v-show="itm.uid !== uid" @click="triggerUser(itm)">
          <span>{{itm.nickname}}</span>
          <span class="msgtip" v-show="getMsgNum(itm)">{{getMsgNum(itm)}}</span>
          </div>
      </div>

逻辑层：
(…表示跟之前代码一致)

computed: {
    // 筛选当前brige一致的放到一个聊天数组里，区分单聊和群聊
    currentMessage () {
      ...
      data.forEach(m => { // 当前群聊，所有status设置为0
        m.status = 0
      })
      return data
    }
  }
  // 获取消息未读数量，有user表示是单聊，没有表示群聊
    getMsgNum (user) {
      if (!user) {
        // 群聊，brige为空数组，找未读消息数
        return this.messageList.filter (item => {
          return !item.brige.length && item.status === 1
        }).length
      } else {
        // 增加了uid相同判断，确认是当前聊天对应人的消息数组
         return this.messageList.filter (m => {
          return m.brige.length && m.status === 1 && m.uid === user.uid
        }).length
      }
    },

这里使用messageList，是因为messageList包含了所有服务端返回的消息内容，需要由它过滤出对应的未读消息。

样式层：
样式不在写，可自行根据需求定义。

参考链接：Node + WebSocket + Vue 一对一、一对多聊天室消息已读未读 – 第四章