新加离线消息提示功能

src/layout/indexCommon.vue

@@ -330,8 +330,7 @@ onMounted(() => {
   // console.log('router',router)
 });
 watchEffect(async() => {
-	console.log("===============有新消息了：",websoctStore.messOne)
-	
+  if(router.currentRoute.value.path=='/index') return;
 	if(websoctStore.noReadList!=null)hasNewMessage.value = true
 	else hasNewMessage.value = false
 	console.log("===============websoctStore.noReadList：",websoctStore.noReadList,'===========',hasNewMessage.value)

src/views/liveChat/index.vue

@@ -67,26 +67,18 @@ const searchData = ref([]);
 
 //聊天列表数据模拟
 const personList = reactive({ data: [] });
+let getchatUserState = false //获取会话人员列表状态.获取动作完成前接收到的消息需要临时缓存
+let tmpMsgList = ref([]) //临时消息队列。主要存储会话人员还未获取完成前收到的消息
 //获取好友列表
 const getMsgList = async () => {
+  getchatUserState = true
   const resFriend = await msgFriend();
   personList.data = resFriend.rows;
-  // .filter(
-  //   (item) => item.toId !== useUserStore().uid
-  // );
-
   searchData.value = personList.data;
   if (clickPersonId.value ==0 && personList.data.length>0) {
     clickPersonId.value = personList.data[0].fromId
   }
-  //圆点======
-  /*
-  searchData.value.map((i) => {
-    if (i.fromId == websoctStore.messOne?.fromId) {
-      i.showCircel = true;
-    }
-  });
-  */
+  console.log("会话列表获取完成！")
   //圆点======
   sendCont.data.toId =
     personList.data[0]?.toId == userIds.uid
@@ -96,6 +88,20 @@ const getMsgList = async () => {
     personList.data[0]?.toId == userIds.uid
       ? personList.data[0].fromName
       : personList.data[0].toName;
+  getchatUserState = false
+  if(tmpMsgList.value.length>0){
+    //处理临时缓存消息：将发送者标记为消息未读提示
+    searchData.value.map((user) => {
+      for(let i=0;i<tmpMsgList.value.length;i++){
+        let tmpFromID = tmpMsgList.value[i].fromId
+        if (tmpFromID == user.fromId && sendCont.data.toId!=tmpFromID) {
+          user.showCircel = true;
+        }
+      }
+    });
+    tmpMsgList.value = []
+    console.log("临时缓存消息处理完成：",searchData.value)
+  }
   if (sendCont.data.toId) {
     //调用聊天记录
     msgRecordEvent(sendCont.data.toId);
@@ -115,6 +121,7 @@ const boottmScroll = () => {
 };
 //获取用户的聊天记录
 const msgRecordEvent = async (toIdValue) => {
+  if(clickPersonId.value!=toIdValue) return;
   const queryParams = {
     pageNum: 1,
     pageSize: 10,
@@ -197,7 +204,9 @@ const delClick = (msgId) => {
 };
 
 //树选中的人传过来的选中人的信息，push进入列表中
-const changeMsg = async (val) => {
+// val 新的会话人员信息对象
+// isnew：false或null：自己添加的 true：其他人员发起的新消息会话
+const changeMsg = async (val,isnew) => {
   const resInfo = await userInfo(val.id);
   if (searchData.value.length > 0) {
     //判断是否有相同的聊天人
@@ -207,17 +216,26 @@ const changeMsg = async (val) => {
         (vPerson.userId && vPerson.userId == resInfo.userId)
     );
     if (filerData.length > 0) {
-      return ElMessage({ message: "该聊天已存在", type: "error" });
+      // 存在就算了，无需提示
+      //return ElMessage({ message: "该聊天已存在", type: "error" });
     } else {
+      if(isnew!=null){
+         resInfo.showCircel = true
+         resInfo.content = val.content
+         resInfo.file = val.file
+      }
       searchData.value.unshift(resInfo);
     }
   } else {
     //为空数组的时候无需判断
     searchData.value.unshift(resInfo);
   }
-  sendCont.data.toId = resInfo.userId;
-  msgRecordEvent(sendCont.data.toId);
-  headerName.value = resInfo.nickName;
+  if(isnew==null){
+    // 自己添加的会话人员，默认选中进行对话
+    sendCont.data.toId = resInfo.userId;
+    // msgRecordEvent(sendCont.data.toId);
+    headerName.value = resInfo.nickName;
+  }
 };
 
 //发送聊天
@@ -286,43 +304,46 @@ const handleNewMessage = async () => {
     websoctStore.newMessage = false; // 重置新消息标记
   }
 };
-
+//接收到的新消息
 watchEffect(async() => {
-  console.log("===============有新消息了：",websoctStore.messOne)
-  console.log(router.currentRoute.value.path)
-  if(router.currentRoute.value.path!='/index') return;
-  console.log("clickPersonId:",clickPersonId.value)  
+  let newMessages = {}
+  newMessages = websoctStore.messOne  
+  console.log("===============有新消息了：",newMessages)
+  if(router.currentRoute.value.path!='/index' || newMessages.fromId==null) return;
+  //此处判断messOne是否已发生更改，如果还未发生更改则清除该消息
+  if(websoctStore.messOne.fromId==newMessages.fromId){    
+    websoctStore.messOne={}
+  }
+  console.log("clickPersonId:",clickPersonId.value)
+  if(getchatUserState){
+    //会话列表还处理完成，临时缓存消息
+    tmpMsgList.value.push(newMessages)
+    console.log("===============会话列表还处理完成，临时缓存消息：",tmpMsgList.value)
+    return
+  }
   if(websoctStore.noReadList!=null) {
-    if(clickPersonId.value!=websoctStore.messOne.fromId){
+    // 是否正在对话的人员
+    if(clickPersonId.value!=newMessages.fromId){
+      let isExist=false // 当前消息发送人员是否已在对话人员列表中
       for(let i=0;i<searchData.value.length;i++){
-        if(searchData.value[i].fromId==websoctStore.messOne.fromId){
+        if(searchData.value[i].fromId==newMessages.fromId){
+          isExist = true
           searchData.value[i].showCircel = true
+          searchData.value[i].content = newMessages.content
+          searchData.value[i].file = newMessages.file
         }
       }
+      if(!isExist){
+        // 接收到其他人员发来的第一次会话消息，需要将该人员添加到会话人员列表
+        changeMsg({"id":newMessages.fromId,"content":newMessages.content,"file":newMessages.file},true)
+      }
       return;
     }
-    msgRecordEvent(websoctStore.messOne.fromId);
-    setTimeout(() => {
-      websoctStore.messOne={}
-    }, 1000);    
+    msgRecordEvent(newMessages.fromId);   
     // getYuan()    
-    getMsgList();
+    // getMsgList();
   }
 });
-  //圆点======
-// const getYuan=async ()=>{
-//   const res= await msgFriend();
-
-//   searchData.value.forEach(k=>{
-//     res.rows.forEach((i) => {
-//     if (i.fromId == websoctStore.messOne?.fromId) {
-//       k=i
-//       k.showCircel = true
-//     }
-//   });
-//   })
-// }
-  // 圆点======
 // 滚动翻页========
 const mainContainer = ref(null);
 const handleScroll = (event) => {
@@ -408,7 +429,7 @@ const SearchChat = () => {
       return i.toName == searchText.value;
     });
   } else {
-    getMsgList();
+    // getMsgList();
   }
 };
 //转聊天记录的/n为实际样式