Node + WebSocket + Vue 一对一、一对多聊天室消息已读未读 – 第四章
Node + WebSocket + Vue 一对一、一对多聊天室消息已读未读 – 第四章
Javanx
发布于 2019-09-04 10:36:48
发布于 2019-09-04 10:36:48
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;
})快速预览效果
Node + WebSocket + Vue 一对一、一对多聊天室消息已读未读 - 第四章
Node + WebSocket + Vue 一对一、一对多聊天室消息已读未读 - 第四章
总结
消息未读，主要是判断状态，然后搞清楚对象，是谁发的消息没有读。已读，就很简单了，就是当前展示的消息列表都改成已读，所以直接把currentMessage列表的消息改成已读即可。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年4月30日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录