Node+WebSocket+Vue 一对一、一对多聊天室消息已读未读 - 第四章

左手的ㄟ右手 2022-11-22 05:30 273阅读 0赞

### 前言 ###

这篇文章非常的短小，在之前文章基础上就实现一个非常小的功能点，消息已读和未读。如果您还没有看过之前的文字，请点击下方链接查看！  
推荐文章：

[《WebSocket简介-第一章》][WebSocket_-]

[《Nodejs + WebSocket + Vue 实现多人聊天室- 第二章》][Nodejs _ WebSocket _ Vue _-]

[《Nodejs + WebSocket + Vue 一对一、一对多聊天室 - 第三章》][Nodejs _ WebSocket _ Vue _ -]

### WebSocket客户端UI界面更改 ###

...
    <div class="user-list">
      <div class="user" @click="triggerGroup">群1
        <span class="tips-num">{ { getMsgNum()}}</span>
      </div>
      <div class="user" @click="triggerPersonal(item)" v-if="item.uid!=uid" v-for="item in users">
        { { item.nickname}}
        <span class="tips-num">{ { getMsgNum(item)}}</span>
      </div>
    </div>
    ...

这里就加了一个非常小的改动，加了一个tips-numtips，先展示未读消息。

### WebSocket服务端 ###

boardcast({ 
      type: 2,
      date: moment().format('YYYY-MM-DD HH:mm:ss'),
      msg: obj.msg,
      uid: obj.uid,
      nickname: obj.nickname,
      // 增加参数
      bridge: obj.bridge,
      status: 1
    });

服务端就在发送消息的地方增加一个字段，status：1来表示未读。

### WebSocket客户端 ###

由UI界面的代码可以看出，我们调用了一个getMsgNum方法来展示未读消息数量。所以我们客户端只需要在原来的基础上，添加一个获取未读消息数量的方法即可。

export default { 
      ...
      data(){ 
        ...
      },
      mounted() { 
        ...
      },
      computed: { 
        currentMessage() { 
          let vm = this;
          let data = vm.messageList.filter(item=>{ 
            return item.bridge.sort().join(',') == vm.bridge.sort().join(',')
          })
          data.map(item=>{ 
            item.status = 0
            return item;
          })
          return data;
        }
      },
      methods: { 
        getMsgNum(user){ 
          if(!user){ 
            return this.messageList.filter(item=>{ 
              return !item.bridge.length && item.status === 1
            }).length
          }
          return this.messageList.filter(item=>{ 
            return item.bridge.length && item.uid === user.uid && item.status === 1
          }).length
        }
        ...
      }
    }

上方…的代码区域都是和前面文章一样的地方，所有就省略了。

1、参数user没有值时，表示是获取群消息未读，判断messageList里面的没有bridge（即是群聊消息）,并且status为1（即未读）  
2、如果有user时，获取对应用户未读消息，判断messageList里面的有bridge（即是用户对话消息）、uid相等，并且status为1（即未读）  
3、打开的是当前对话，即将当前对话的消息状态status改为0（已读）

data.map(item=>{ 
      item.status = 0
      return item;
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]

### 总结 ###

消息未读，主要是判断状态，然后搞清楚对象，是谁发的消息没有读。已读，就很简单了，就是当前展示的消息列表都改成已读，所以直接把currentMessage列表的消息改成已读即可。

备注：本文由 [web秀][web] 作者：Javan 发表

[WebSocket_-]: https://blog.csdn.net/weixin_43638968/article/details/109461280
[Nodejs _ WebSocket _ Vue _-]: https://blog.csdn.net/weixin_43638968/article/details/109472253
[Nodejs _ WebSocket _ Vue _ -]: https://blog.csdn.net/weixin_43638968/article/details/109474819
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/c799572d03a44913b1fbe81c6a0629cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201103203223818.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA==,size_16,color_FFFFFF,t_70#pic_center
[web]: http://www.javanx.cn/special/websocket/