websocket站内信功能问题 vue

Question

我现在在用websocket做个简单的站内信聊天功能，现在有个问题不好解决，就是离线消息接收和未读消息提醒

<div class="subordinate">
<!-- 这是渲染的好友列表 -->
    <ul>
        <li v-for='(item,index) in subordinatelist' :key="index" @click="test(index,item)" :class="{on:activeButton==index ,'one':!index }">
            <!-- 这是好友头像姓名 -->
            <img :src="item.User.UserPic">
            <h3 class="down_name">{{item.User.Username}}</h3>
        </li>
    </ul>
</div>

<div class="right_top">
<!-- 聊天界面 -->
    <h4 class="chat_record">与{{item.User.Username}}聊天中<a @click="chatRecord(item)">(查看聊天记录)</a></h4>
    <div class="box_bd" id="content">
        <ul>
            <li class="message clearfloat" v-for='(item1,index) in infoList[item.User.Username]' v-if="infoList != null">
                <div class="mytime"><span>{{myDate | moment("HH:mm:ss")}}</span></div>
                <div class="mes_box">
                    <div class="message_p">
                        <!-- 自己发送的消息 -->
                        <div class="clearfloat mes_p_1" v-if="item1.myChat != null">
                            <div class="mes_p_2">
                                <p v-html="item1.myChat"></p>
                            </div>
                        </div>
                        <!-- 对方发送的消息 -->
                        <div class="clearfloat mes_p_3" v-if="item1.heChat != null">
                            <div class="mes_p_4">
                                <p v-html="item1.heChat"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

created() {
  this.$post('/chat', { token: this.token }).then(res => {
    this.subordinatelist = res.info.UserList
       for (let j = 0; j < this.subordinatelist.length; j++) {
           this.infoList[this.subordinatelist[j].User.Username] = []
    }
  })
},

先从接口调出所有好友的列表，在用循环给 this.infoList这个数组加用户名作为下标
this.message是输入的内容，直接push进infoList的myChat中显示在界面上

let messageMyChat = { myChat: this.message }
this.infoList[this.userName].push(messageMyChat)

isChat是websocket.vue传过来的值，message2就是对面发送的内容

watch: {
  isChat(Val, oldVal) {
    this.message2 = Val.Content
    this.sendChat()
  }
},

我用上文相同的方法直接push进infoList的heChat中显示在界面上

sendChat() {
   let contentLsit = this.message2.split(",")
   this.infoList[contentLsit[0].trim()].push({ heChat: contentLsit[1].trim() });
      //使滚顶条保持最低
   this.nextTick()
    }