添加联系人的在线状态显示

src/pages/index/ChatPage.vue

@@ -113,6 +113,15 @@
             <div class="contact-name">
               {{ contact.contactName }}
             </div>
+
+            <div
+              class="contact-user-status"
+              :class="
+                onlineList.includes(contact.contactName) ? 'online' : 'offline'
+              "
+            >
+              {{ onlineList.includes(contact.contactName) ? "在线" : "离线" }}
+            </div>
           </div>
         </div>
       </div>
@@ -140,7 +149,10 @@
             </div>
 
             <div class="chat-user-status">
-              {{ currentContact.online ? "在线" : "离线" }}
+              <span v-if="onlineList.includes(currentContact.contactName)">
+                在线
+              </span>
+              <span v-else> 离线 </span>
             </div>
           </div>
         </div>
@@ -231,7 +243,7 @@ import {
 import {
   connectWebSocket,
   sendWebSocketMessage,
-  closeWebSocket
+  closeWebSocket,
 } from "@/utils/websocket";
 
 export default {
@@ -243,6 +255,8 @@ export default {
       currentUser: {},
       // 联系人
       contactList: [],
+      // 在线用户
+      onlineList: [],
       // 当前聊天联系人
       currentContact: null,
       // 最近聊天列表
@@ -524,11 +538,11 @@ export default {
           // 不是当前联系人，不加入 contactMessages，只更新最近聊天列表、未读数量
           this.updateRecentChat("receive", senderName, message);
         }
-        
+
         // 返回 ACK
         sendWebSocketMessage({
           type: "ack",
-          messageId: message.messageId
+          messageId: message.messageId,
         });
         this.$nextTick(() => {
           this.scrollToBottom();
@@ -538,6 +552,9 @@ export default {
         this.$nextTick(() => {
           this.scrollToBottom();
         });
+      } else if (data.type == "userOnline") {
+        // 获取所有在线用户
+        this.onlineList = data.userList;
       } else {
         return;
       }
@@ -901,10 +918,18 @@ export default {
   justify-content: flex-start;
 }
 
+.message-other .message-bubble {
+  float: left;
+}
+
 .message-me {
   justify-content: flex-end;
 }
 
+.message-me .message-bubble {
+  float: right;
+}
+
 .message-avatar {
   width: 38px;
   height: 38px;
@@ -935,7 +960,6 @@ export default {
   line-height: 1.5;
   word-break: break-word;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  float: right;
 }
 
 .message-me .message-bubble {
@@ -1020,4 +1044,17 @@ export default {
   background: #ddd;
   border-radius: 3px;
 }
+
+.contact-user-status {
+  margin-top: 5px;
+  font-size: 12px;
+}
+
+.contact-user-status.online {
+  color: #67c23a;
+}
+
+.contact-user-status.offline {
+  color: #999;
+}
 </style>