123

src/stores/modules/webSocketStore.js

@@ -6,7 +6,6 @@ import { useWalletStore } from "@/stores/modules/walletStore";
 import { getMessageApi } from "@/api/path/im.api";
 import { MSG_TYPE, MSG_TYPE_MAP } from "@/common/constant/msgType";
 
-
 const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
 
 export const useWebSocketStore = defineStore("webSocketStore", {
@@ -19,7 +18,7 @@ export const useWebSocketStore = defineStore("webSocketStore", {
     maxReconnectAttempts: 5, // 最大重连次数
     reconnectInterval: 3000, // 重连间隔
     messages: [], // 消息列表
-    toAvatar: "",
+    toUserInfo: {},
     unreadMessages: [], // 未读消息列表
     uuid: null,
 
@@ -31,7 +30,15 @@ export const useWebSocketStore = defineStore("webSocketStore", {
       num: 3, // 重连次数
     },
   }),
-
+  persist: {
+    key: "toUserInfo",
+    storage: localStorage,
+    paths: ["toUserInfo"], // 正确的简单路径格式
+    serializer: {
+      serialize: (state) => JSON.stringify(state.toUserInfo),
+      deserialize: (str) => ({ toUserInfo: JSON.parse(str) }),
+    },
+  },
   // 计算属性
   getters: {
     isConnected: (state) => state.socket?.readyState === WebSocket.OPEN,
@@ -46,10 +53,11 @@ export const useWebSocketStore = defineStore("webSocketStore", {
         uuid: params.uuid,
         friendUsername: params.friendUsername,
       });
-      this.messages = data.map(item =>{ 
-        item.avatar = item.avatar ?  IM_PATH +item.avatar :  item.avatar
-        return item
-      }) || [];
+      this.messages =
+        data.map((item) => {
+          item.avatar = item.avatar ? IM_PATH + item.avatar : item.avatar;
+          return item;
+        }) || [];
     },
     // 初始化socket
     startHeartbeat() {
@@ -143,7 +151,7 @@ export const useWebSocketStore = defineStore("webSocketStore", {
           // if (MSG_TYPE_MAP.includes(message.messageType)) {
 
           // 文本消息
-          message.avatar = this.toAvatar
+          message.avatar = this.toUserInfo.avatar;
           if (message.contentType === MSG_TYPE.TEXT) {
             this.messages.push({
               ...message,
@@ -261,7 +269,7 @@ export const useWebSocketStore = defineStore("webSocketStore", {
         const buffer = MessageType.encode(messagePB).finish();
         this.socket.send(buffer);
 
-        data.avatar = walletStore.avatar
+        data.avatar = walletStore.avatar;
         // 文本消息
         if (data.contentType == MSG_TYPE.TEXT) {
           this.messages.push({
@@ -274,7 +282,7 @@ export const useWebSocketStore = defineStore("webSocketStore", {
         if (data.contentType === MSG_TYPE.AUDIO) {
           const blob = new Blob([data.file], { type: data.fileSuffix });
           const url = URL.createObjectURL(blob);
-          console.log("url=",url)
+          console.log("url=", url);
           this.messages.push({
             ...data,
             toUsername: data.to,

src/views/im/chat/index.vue

@@ -55,7 +55,7 @@
               <!-- 录音消息 -->
               <div class="audio-message" v-else-if="item.contentType === MSG_TYPE.AUDIO">
                 <audio v-if="item.localUrl" :src="item.localUrl" controls style="width: 200px;" />
-                <audio  v-else :src="item.url" controls style="width: 200px;" />
+                <audio  v-else :src="IM_PATH + item.url" controls style="width: 200px;" />
               </div>
 
               <!-- 其他未知类型 -->
@@ -155,7 +155,7 @@ import { Keyboard } from "@capacitor/keyboard";
 import { Capacitor } from "@capacitor/core";
 import { MSG_TYPE, MESSAGE_TYPE_USER } from "@/common/constant/msgType";
  
-
+const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
 // 路由 & store
 const router = useRouter();
 const route = useRoute();

src/views/im/index.vue

@@ -103,7 +103,7 @@ const getuserList = async () => {
 }
 
 const goToChat = (item) => {
-  wsStore.toAvatar = item.avatar
+  wsStore.toUserInfo = item
   router.push({
     path: 'chat',
     query:{ uuid:item.uuid }