222

src/stores/modules/webSocketStore.js

@@ -6,6 +6,11 @@ import { useWalletStore } from "@/stores/modules/walletStore";
 import { getMessageApi } from "@/api/path/im.api";
 import { MSG_TYPE, MSG_TYPE_MAP } from "@/common/constant/msgType";
 
+import {
+  setMessageHook,
+  handleMessageHook,
+} from "@/views/im/hook/messagesHook";
+
 const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
 
 export const useWebSocketStore = defineStore("webSocketStore", {
@@ -130,6 +135,33 @@ export const useWebSocketStore = defineStore("webSocketStore", {
         this.reconnect();
       };
     },
+    // 发送消息
+    sendMessage(messageData) {
+      if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
+        console.error("WebSocket未连接");
+        return false;
+      }
+
+      const walletStore = useWalletStore();
+      let data = {
+        ...messageData,
+        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);
+        data.avatar = walletStore.avatar;
+        setMessageHook(data, this);
+        return true;
+      } catch (error) {
+        console.error("消息编码错误:", error);
+        return false;
+      }
+    },
     // 处理消息
     handleMessage(data) {
       const MessageType = protobuf.lookupType("protocol.Message");
@@ -148,37 +180,13 @@ export const useWebSocketStore = defineStore("webSocketStore", {
 
           console.log("收到消息:", message);
           // 处理消息
-          // if (MSG_TYPE_MAP.includes(message.messageType)) {
-
-          // 文本消息
-          message.avatar = this.toUserInfo.avatar;
-          if (message.contentType === MSG_TYPE.TEXT) {
-            this.messages.push({
-              ...message,
-              toUsername: message.to,
-            });
-          }
-          // 音频消息
-          if (message.contentType === 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,
-            });
-          }
-
+          handleMessageHook(message, this);
           if (message.type === "heatbeat") return;
 
           if (message.type === Constant.MESSAGE_TRANS_TYPE) {
             this.dealWebRtcMessage(message);
             return;
           }
-
           // 其他消息处理逻辑...
         } catch (error) {
           console.error("消息解码错误:", error);
@@ -249,53 +257,7 @@ export const useWebSocketStore = defineStore("webSocketStore", {
       }
       this.reconnectAttempts = 0;
     },
-    // 发送消息
-    sendMessage(messageData) {
-      if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
-        console.error("WebSocket未连接");
-        return false;
-      }
-
-      const walletStore = useWalletStore();
-      let data = {
-        ...messageData,
-        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);
-
-        data.avatar = walletStore.avatar;
-        // 文本消息
-        if (data.contentType == MSG_TYPE.TEXT) {
-          this.messages.push({
-            ...data,
-            toUsername: data.friendUsername,
-          });
-        }
-
-        // 音频消息
-        if (data.contentType === MSG_TYPE.AUDIO) {
-          const blob = new Blob([data.file], { type: data.fileSuffix });
-          const url = URL.createObjectURL(blob);
-          console.log("url=", url);
-          this.messages.push({
-            ...data,
-            toUsername: data.to,
-            localUrl: url,
-          });
-        }
 
-        return true;
-      } catch (error) {
-        console.error("消息编码错误:", error);
-        return false;
-      }
-    },
     // 发送WebRTC消息
     dealWebRtcMessage(message) {
       // 实现WebRTC消息处理逻辑

src/views/im/chat/index.vue

@@ -43,27 +43,44 @@
 
               <!-- 图片消息 -->
               <div class="content" v-else-if="item.contentType === 2">
-                <img :src="item.content" alt="图片" style="max-width: 120px; border-radius: 8px;" />
+                <img
+                  :src="item.content"
+                  alt="图片"
+                  style="max-width: 120px; border-radius: 8px"
+                />
               </div>
 
               <!-- 名片消息 -->
-              <div class="content card-message" v-else-if="item.contentType === 3">
+              <div
+                class="content card-message"
+                v-else-if="item.contentType === 3"
+              >
                 <div class="card-title">名片</div>
                 <div class="card-name">{{ item.content }}</div>
               </div>
 
               <!-- 录音消息 -->
-              <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="IM_PATH + item.url" controls style="width: 200px;" />
+              <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="IM_PATH + item.url"
+                  controls
+                  style="width: 200px"
+                />
               </div>
 
               <!-- 其他未知类型 -->
-              <div class="content" v-else>
-                [未知消息类型]
-              </div>
+              <div class="content" v-else>[未知消息类型]</div>
             </div>
-
           </div>
         </div>
       </div>
@@ -154,7 +171,7 @@ import { useWalletStore } from "@/stores/modules/walletStore.js";
 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();
@@ -184,9 +201,12 @@ const scrollToBottom = () => {
   });
 };
 
-watch(() => wsStore.messages.length, ()=>{
-  scrollToBottom();
-})
+watch(
+  () => wsStore.messages.length,
+  () => {
+    scrollToBottom();
+  }
+);
 
 // 平台判断
 const isMobile = Capacitor.getPlatform() !== "web";
@@ -322,17 +342,16 @@ const sendAudioMessage = async (event) => {
   }
 };
 
-const audio = ref(null)
+const audio = ref(null);
 
 const playAudio = (url) => {
-  const audioUrl = `${IM_PATH}${url}`
+  const audioUrl = `${IM_PATH}${url}`;
   if (audio.value) {
-    audio.value.pause()
+    audio.value.pause();
   }
-  audio.value = new Audio(audioUrl)
-  audio.value.play()
-}
-
+  audio.value = new Audio(audioUrl);
+  audio.value.play();
+};
 
 // 发送消息
 const sendMessage = () => {
@@ -544,7 +563,6 @@ const goDetail = () => router.push("detail");
             width: 18px;
             height: 18px;
           }
-
         }
       }
       .withdrawal {

src/views/im/hook/messagesHook.js

@@ -0,0 +1,48 @@
+import { MSG_TYPE, MSG_TYPE_MAP } from "@/common/constant/msgType";
+
+// 发送消息处理
+export const setMessageHook = (message, state) => {
+  // 文本消息
+  if (message.contentType == MSG_TYPE.TEXT) {
+    state.messages.push({
+      ...message,
+      toUsername: message.friendUsername,
+    });
+  }
+
+  // 音频消息
+  if (message.contentType === MSG_TYPE.AUDIO) {
+    const blob = new Blob([message.file], { type: message.fileSuffix });
+    const url = URL.createObjectURL(blob);
+
+    state.messages.push({
+      ...message,
+      toUsername: message.to,
+      localUrl: url,
+    });
+  }
+};
+
+export const handleMessageHook = (message, state) => {
+  // 文本消息
+  message.avatar = state.toUserInfo.avatar;
+  if (message.contentType === MSG_TYPE.TEXT) {
+    state.messages.push({
+      ...message,
+      toUsername: message.to,
+    });
+  }
+  // 音频消息
+  if (message.contentType === MSG_TYPE.AUDIO) {
+    const audioBlob = new Blob([message.file], {
+      type: `audio/${message.fileSuffix}`,
+    });
+    // 生成可播放的 ObjectURL
+    const audioUrl = URL.createObjectURL(audioBlob);
+    state.messages.push({
+      ...message,
+      file: audioUrl,
+      toUsername: message.to,
+    });
+  }
+};