Node+WebSocket+Vue 一對一、一對多聊天室訊息已讀未讀

Node + 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;
})

快速預覽效果

總結

訊息未讀，主要是判斷狀態，然後搞清楚物件，是誰發的訊息沒有讀。已讀，就很簡單了，就是當前展示的訊息列表都改成已讀，所以直接把currentMessage列表的訊息改成已讀即可。

原始碼地址：