1

src/api/path/im.api.js

@@ -32,8 +32,8 @@ export function userUuid(uuid) {
 }
 
 // 获取消息
-export function getmessage(params) {
-  return service.post('message', { params });
+export function getMessageApi(data) {
+  return service.post('message', data );
 }
 
 // 获取好友申请审核列表

src/stores/modules/webSocketStore.js

@@ -3,6 +3,7 @@ import { defineStore } from "pinia";
 import { $root as protobuf } from "@/common/proto/proto";
 import * as Constant from "@/common/constant/Constant";
 import { useWalletStore } from "@/stores/modules/walletStore";
+import { getMessageApi  } from "@/api/path/im.api"
 
 export const useWebSocketStore = defineStore("webSocketStore", {
   // 状态定义
@@ -15,7 +16,7 @@ export const useWebSocketStore = defineStore("webSocketStore", {
     reconnectInterval: 3000, // 重连间隔
     messages: [], // 消息列表
     unreadMessages: [], // 未读消息列表
-    lastMessage: null, // 最后一条消息
+    uuid: null, 
 
     // 心跳检测配置
     heartCheck: {
@@ -30,10 +31,20 @@ export const useWebSocketStore = defineStore("webSocketStore", {
   getters: {
     isConnected: (state) => state.socket?.readyState === WebSocket.OPEN,
     hasUnreadMessages: (state) => state.unreadMessages.length > 0,
+
+   
   },
 
   // 方法
   actions: {
+     async getMessages(params){
+      const { data } = await getMessageApi({
+        messageType: params.messageType,
+        uuid: params.uuid,
+        friendUsername: params.friendUsername, 
+      })
+      this.messages = data || []
+    },
     // 初始化socket
     startHeartbeat() {
       const self = this;
@@ -73,6 +84,7 @@ export const useWebSocketStore = defineStore("webSocketStore", {
     },
     // 链接ws
     connect(userUuid) {
+      if(!userUuid) return
       console.log("开始连接...");
       this.disconnect(); // 确保先断开现有连接
 
@@ -121,10 +133,13 @@ export const useWebSocketStore = defineStore("webSocketStore", {
           });
 
           console.log("收到消息:", message);
-
-          // 更新状态
-          this.messages.push(message);
-          this.lastMessage = message;
+          if([1,2].includes(message.messageType)){
+            // 更新状态
+            this.messages.push({
+              ...message,
+              toUsername: message.to,
+            }); 
+          }
 
           if (message.type === "heatbeat") return;
 
@@ -216,12 +231,19 @@ export const useWebSocketStore = defineStore("webSocketStore", {
         fromUsername: walletStore.username,
         from: walletStore.account,
       };
-
+      if([1,2].includes(message.messageType)){
+        this.messages.push({
+          ...data,
+          toUsername: data.friendUsername
+        });  
+      }
       try {
         const MessageType = protobuf.lookupType("protocol.Message");
         const messagePB = MessageType.create(data);
         const buffer = MessageType.encode(messagePB).finish();
         this.socket.send(buffer);
+
+        
         return true;
       } catch (error) {
         console.error("消息编码错误:", error);

src/views/im/chat/index.vue

@@ -10,21 +10,21 @@
       <svg-icon class="page-icon" name="more" @click="goDetail" />
     </div>
     <div class="chat-list">
-      <div v-for="(item, index) in 1">
+      <div v-for="(item, index) in wsStore.messages" :key="index">
         <div class="chat-time">23:{{ 20 + index }}</div>
-        <div class="box" v-for="(text, i) in 3">
-          <div class="list-item" :class="i % 2 === 0 ? '' : 'flex-reverse'">
+        <div class="box">
+          <div class="list-item" :class="walletStore.account == item.toUsername ?'' : 'flex-reverse'">
             <van-image
               class="list-img"
-              :class="i % 2 === 0 ? 'mr12' : 'ml12'"
+              :class="index % 2 === 0 ? 'mr12' : 'ml12'"
               round
               src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
               @click="router.push('personal')"
             />
             <div class="list-cont">
-              <div :class="i % 2 === 0 ? '' : 'text-right'">苏苏编号</div>
+              <div>{{ item.fromUsername }}</div>
               <!-- 名片 -->
-              <div class="business-card" v-if="i % 2 === 0">
+              <!-- <div class="business-card" v-if="i % 2 === 0">
                 <div class="business-card-cont">
                   <van-image
                     class="list-img mr12"
@@ -35,17 +35,17 @@
                 </div>
                 <div class="line"></div>
                 <div class="business-card-text">个人名片</div>
-              </div>
+              </div> -->
               <!-- 文本信息 -->
-              <div class="content" v-if="i % 2 !== 0">
-                文本信息文本信息文本信息文本信息文本信息文本信息文本信息文本信息
+              <div class="content" v-if="item.contentType === 1">
+                {{ item.content }}
               </div>
             </div>
           </div>
           <!--消息撤回 -->
-          <div class="withdrawal">
+          <!-- <div class="withdrawal">
             <div class="withdrawal-text">哈哈哈撤回了一条消息</div>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
@@ -97,16 +97,17 @@
   </div>
 </template>
 
-<script setup>
-import { ref, computed } from "vue";
-import { useRouter } from "vue-router";
+<script setup> 
 import { Keyboard } from "@capacitor/keyboard";
 import { useWebSocketStore } from "@/stores/modules/webSocketStore.js";
+import { useWalletStore } from "@/stores/modules/walletStore.js";
 
 const router = useRouter();
+const route = useRoute()
 const text = ref("");
 
 const wsStore = useWebSocketStore();
+const walletStore = useWalletStore();
 
 // 状态管理
 const keyboardHeight = ref(0);
@@ -146,7 +147,10 @@ const onFocus = () => {
   // 隐藏所有面板
   showEmoji.value = false;
   showTools.value = false;
-  setupKeyboardListeners();
+  // 判断是不是web
+  if (Capacitor.getPlatform() != "web") {
+    setupKeyboardListeners();
+  }
 };
 
 // 键盘监听
@@ -175,13 +179,23 @@ const sendMessage = () => {
 
   let message = {
     content: text.value,
-    contentType: 1,
+    contentType: 1,  // 1: 文本消息 
+    messageType: 1, // 1: 单聊天
+    to:route.query.uuid, 
   };
   wsStore.sendMessage(message);
   // 清空输入框
   text.value = "";
 };
 
+onMounted(() => {
+  wsStore.getMessages({
+    uuid: walletStore.account,
+    messageType: 1,
+    friendUsername: route.query.uuid,
+  });
+});
+
 onUnmounted(() => {
   if (Capacitor.getPlatform() !== "web") {
     Keyboard.removeAllListeners();