111

.env

@@ -14,4 +14,6 @@ VITE_PRO_PATH='https://wallet.angeltokens.io'
 VITE_PRO_IM_PATH='http://192.168.0.59:8888'
 VITE_DEV_IM_PATH='http://192.168.0.59:8888'
 
+VITE_IM_PATH_FIlE ='http://192.168.0.59:8888/api/v1/file/'
+
 VITE_PRO_BACKEND_PATH='https://backend.angeltoken.net'

src/common/constant/msgType.js

@@ -19,3 +19,4 @@ export const MSG_TYPE_MAP = [
 
 export const MESSAGE_TYPE_USER = 1; // 单聊
 export const MESSAGE_TYPE_GROUP = 2; // 群聊
+ 

src/stores/modules/webSocketStore.js

@@ -132,10 +132,26 @@ export const useWebSocketStore = defineStore("webSocketStore", {
           });
 
           console.log("收到消息:", message);
-          if (MSG_TYPE_MAP.includes(message.messageType)) {
-            // 更新状态
+          // 处理消息
+          // if (MSG_TYPE_MAP.includes(message.messageType)) {
+
+          // 文本消息
+          if (message.messageType === MSG_TYPE.TEXT) {
+            this.messages.push({
+              ...message,
+              toUsername: message.to,
+            });
+          }
+          // 音频消息
+          if (message.messageType === MSG_TYPE.AUDIO) {
+            const audioBlob = new Blob([message.file], {
+              type: `audio/${message.fileSuffix}`,
+            });
+            // 生成可播放的 ObjectURL
+            const audioUrl = URL.createObjectURL(audioBlob);
             this.messages.push({
               ...message,
+              file: audioUrl,
               toUsername: message.to,
             });
           }
@@ -230,19 +246,34 @@ export const useWebSocketStore = defineStore("webSocketStore", {
         fromUsername: walletStore.username,
         from: walletStore.account,
       };
-
+      console.log("发送消息=", data);
       try {
         const MessageType = protobuf.lookupType("protocol.Message");
         const messagePB = MessageType.create(data);
         const buffer = MessageType.encode(messagePB).finish();
         this.socket.send(buffer);
-        if (MSG_TYPE_MAP.includes(data.messageType)) {
+
+        // 文本消息
+        if (data.messageType == MSG_TYPE.TEXT) {
           this.messages.push({
             ...data,
             toUsername: data.friendUsername,
           });
         }
 
+        // 音频消息
+        if (message.messageType === MSG_TYPE.AUDIO) {
+          const audioBlob = new Blob([message.file], {
+            type: `audio/${message.fileSuffix}`,
+          });
+          const audioUrl = URL.createObjectURL(audioBlob);
+          this.messages.push({
+            ...message,
+            toUsername: message.to,
+            url: audioUrl,
+          });
+        }
+
         return true;
       } catch (error) {
         console.error("消息编码错误:", error);

src/views/im/chat/index.vue

@@ -29,7 +29,7 @@
               class="list-img"
               :class="walletStore.account == item.toUsername ? 'mr12' : 'ml12'"
               round
-              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+              :src="IM_PATH + item.avatar"
               @click="router.push('personal')"
             />
             <!-- 内容 -->
@@ -37,7 +37,7 @@
               <div>{{ item.fromUsername || "匿名用户" }}</div>
 
               <!-- 文本消息 -->
-              <div class="content" v-if="item.contentType === 1">
+              <div class="content" v-if="item.contentType === MSG_TYPE.TEXT">
                 {{ item.content }}
               </div>
 
@@ -54,7 +54,7 @@
 
               <!-- 录音消息 -->
               <div class="audio-message" v-else-if="item.contentType === MSG_TYPE.AUDIO">
-                <audio :src="item.file" controls style="width: 200px;" />
+                <audio :src="IM_PATH + item.url" controls style="width: 200px;" />
               </div>
 
               <!-- 其他未知类型 -->
@@ -155,6 +155,9 @@ 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;
+console.log("avatar=>", IM_PATH)
+
 // 路由 & store
 const router = useRouter();
 const route = useRoute();
@@ -282,7 +285,6 @@ const stopRecording = async () => {
     mediaRecorder.value.onstop = async () => {
       // 合并所有音频片段
       const audioBlob = new Blob(audioChunks.value, { type: "audio/webm" });
-
       // 转换为 Uint8Array
       const arrayBuffer = await audioBlob.arrayBuffer();
       const audioData = new Uint8Array(arrayBuffer);
@@ -307,8 +309,8 @@ const sendAudioMessage = async (event) => {
       contentType: MSG_TYPE.AUDIO, // 音频消息类型
       messageType: MESSAGE_TYPE_USER, // 单聊消息
       to: route.query.uuid, // 接收方ID
-      fileSuffix: "webm", // 使用webm后缀更准确
-      file: Array.from(audioData), // 将Uint8Array转为普通数组
+      fileSuffix: "wav", // 使用webm后缀更准确
+      file: audioData, // 将Uint8Array转为普通数组
     };
 
     // 3. 通过WebSocket发送