添加获取历史消息，添加消息提示

src/views/Chat.vue

@@ -18,7 +18,9 @@
                             <el-menu-item-group v-for="user in filteredUsers" :key="user.id">
                             <el-menu-item :index="String(user.id)" @click="handleGetMessage(user.id)" style="height: 40px;">
                                 {{ user.name }}
+                                <span v-if="hasUnreadMsg[user.id]" class="unread-dot"></span>
                             </el-menu-item>
+                            
                         </el-menu-item-group>
                         </el-scrollbar>
                     </el-sub-menu>
@@ -44,6 +46,12 @@
         <el-container width="800px">
             <el-header style="text-align: right; font-size: 12px">
                 <div class="toolbar">
+                  <el-button
+                        type="primary"
+                        size="mini"
+                        @click.prevent="getHistory()"
+                        >历史消息</el-button
+                        >
                     <el-button
                         type="primary"
                         size="mini"
@@ -135,6 +143,7 @@ export default {
       to_user_id:0,
       cur_user_id:0,
       searchName: '', // 搜索框内容
+      history_cnt: 1,
 
       cur_user_name: "",
       eventSource: null,  // 事件源
@@ -142,6 +151,7 @@ export default {
       currentMsg:"",
       MsgList: [],
       groupList: [],
+      hasUnreadMsg: {}, // 未读消息, key为用户id，value为true/false
     };
   },
 
@@ -157,6 +167,9 @@ export default {
       }
       let data = result.data;
       this.userList=data.friends;
+      for(let i = 0; i < data.friends.length; i++){
+          this.hasUnreadMsg[data.friends[i].id] = false;
+      }
       this.groupList=data.groups;
     },
     filterUsers() {  
@@ -164,8 +177,15 @@ export default {
         return user.name.toLowerCase().includes(this.searchName.toLowerCase());  
       });  
     },
+    getHistory() {
+      this.history_cnt++
+      this.handleGetMessage(this.cur_user_id);
+    },
     async handleGetMessage(id){
         let result = {};
+        if(this.to_user_id!=id){
+          this.history_cnt = 2;
+        }
         this.to_user_id=id;
         this.cur_user_id=id;
         console.log("uid:",this.uid,"\tcur_user_id:",this.cur_user_id)
@@ -175,6 +195,7 @@ export default {
                 break;
             }
         }
+        this.hasUnreadMsg[id] = false;
       try {
         let req={
             token: localStorage.getItem("token"),
@@ -183,7 +204,7 @@ export default {
             username: localStorage.getItem("username"),
             from_user_id:id,
             to_user_id:localStorage.getItem("userId"),
-            index:2,
+            index:this.history_cnt,
             type:1,
         }
         result = await getMessageService(req);
@@ -199,17 +220,26 @@ export default {
         return;
       }
       //data sort by created time
-      for (let i = 0; i < data.length; i++) {
-        for (let j = i + 1; j < data.length; j++) {
-          if (data[i].CreatedAt > data[j].CreatedAt) {
-            let temp = data[i];
-            data[i] = data[j];
-            data[j] = temp;
-          }
-        }
-      }
+      // for (let i = 0; i < data.length; i++) {
+      //   for (let j = i + 1; j < data.length; j++) {
+      //     if (data[i].CreatedAt > data[j].CreatedAt) {
+      //       let temp = data[i];
+      //       data[i] = data[j];
+      //       data[j] = temp;
+      //     }
+      //   }
+      // }
+      data.sort((a, b) => {
+        const dateA = new Date(a.CreatedAt);  
+        const dateB = new Date(b.CreatedAt);  
+          
+        // 返回时间差，用于排序  
+        return dateA - dateB; 
+      });
       this.MsgList=data;
+      if(this.history_cnt <=2){
         this.scrollToBottom();
+      }
     },
     formatTime(time){
         let date = new Date(time);
@@ -276,7 +306,14 @@ export default {
           if (data.type == "msg") {  // 如果是消息类型，解密消息内容
            // console.log("收到数据====" + JSON.stringify(msg.data));
             console.log("msg_:", data.data);
-            _this.MsgList.push(JSON.parse(data.data));
+            let msg_data=JSON.parse(data.data)
+            _this.MsgList.push(msg_data);
+            if(_this.cur_user_id != msg_data.FromUserID){
+                _this.hasUnreadMsg[msg_data.FromUserID] = true;
+            }else{
+              _this.scrollToBottom();
+            }
+
             //console.log("msglist:", _this.MsgList);
             // 构建消息内容
           }else if (data.type == "check") {
@@ -479,4 +516,14 @@ export default {
     margin-top: 20px;
     color: white;
 }
+.unread-dot {  
+  position: absolute;  
+  top: 0;  
+  right: 0;  
+  width: 8px;  
+  height: 8px;  
+  background-color: red;  
+  border-radius: 50%;  
+  transform: translate(50%, -50%);  
+}  
 </style>

src/views/DeviceRealVP.vue

@@ -13,6 +13,7 @@
   <script>
 import { ref, onMounted, inject, onUnmounted } from "vue";
 import router from "@/router/index.js";
+import { ElMessage } from 'element-plus';
 export default {
   data() {
     return {
@@ -60,14 +61,16 @@ export default {
         //打开事件
         this.socket.onopen = function () {
           this.loading = false;
-          alert("连接成功");
+          //alert("连接成功");
+          ElMessage.success("连接成功!");
         };
         this.socket.onerror = (error) => {
           console.error("WebSocket Error:", error);
         };
         //关闭事件
         this.socket.onclose = function () {
-          alert("连接已关闭!");
+          //alert("连接已关闭!");
+          ElMessage.success("连接已关闭!");
           router.push("/user");
         };
         //  浏览器端收消息，获得从服务端发送过来的文本消息