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-num
tips，先展示未讀消息。
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;
}) 複制
快速預覽效果
總結
消息未讀，主要是判斷狀态，然後搞清楚對象，是誰發的消息沒有讀。已讀，就很簡單了，就是目前展示的消息清單都改成已讀，是以直接把
currentMessage
清單的消息改成已讀即可。