消息优化

components/message-input.vue

@@ -9,7 +9,7 @@
 <script lang="ts">
     import { Component, Ref, Vue, Watch } from "vue-property-decorator";
     import ChatInput, {
-        FILE_INFO_CLASS,
+        isFileElement,
         isImageOrFile,
     } from "../hybrid-input/index.vue";
     import { Message, MessageType } from "../model";
@@ -51,6 +51,8 @@
         @Ref("chat-input")
         private readonly chatInput!: ChatInput;
 
+        private sending = false;
+
         @Watch("chatRoomVisible")
         private whenChatRoomShow() {
             if (!this.chatRoomVisible) return;
@@ -58,27 +60,39 @@
         }
 
         private async sendMessage(msg: ChildNode[]) {
-            if (this.chatIniting) {
+            if (this.chatIniting || this.sending) {
                 return;
             }
+            const count = msg.length;
+            let finished = 0;
+            this.sending = true;
+            const onFinishedChanged = () => {
+                finished++;
+                if (finished === count) {
+                    this.sending = false;
+                }
+            };
+            setTimeout(() => (this.sending = false), 3000);
             for (const item of msg) {
                 if (isImageOrFile(item)) {
-                    if ((item as Element).classList.contains(FILE_INFO_CLASS)) {
-                        await this.sendFile(item, MessageType.File).catch((e) =>
-                            this.onError(e)
-                        );
+                    if (isFileElement(item)) {
+                        await this.sendFile(item, MessageType.File)
+                            .catch((e) => this.onError(e))
+                            .finally(onFinishedChanged);
                     } else {
-                        await this.sendFile(item, MessageType.Image).catch((e) =>
-                            this.onError(e)
-                        );
+                        await this.sendFile(item, MessageType.Image)
+                            .catch((e) => this.onError(e))
+                            .finally(onFinishedChanged);
                     }
                     continue;
                 }
 
                 if (item.textContent) {
-                    await this.sendText(item.textContent).catch((e) =>
-                        this.onError(e)
-                    );
+                    await this.sendText(item.textContent)
+                        .catch((e) => this.onError(e))
+                        .finally(onFinishedChanged);
+                } else {
+                    onFinishedChanged();
                 }
             }
             this.$emit("sent");
@@ -166,7 +180,8 @@
                             console.error(e);
 
                             this.setMsg2Failed(index);
-                            this.chatInput && this.chatInput.updateUploadProgress(0);
+                            this.chatInput &&
+                                this.chatInput.updateUploadProgress(0);
                         });
                 }
             }

hybrid-input/index.vue

@@ -125,6 +125,10 @@
         );
     }
 
+    export function isFileElement(node: ChildNode) {
+        return (node as Element).classList.contains(FILE_INFO_CLASS);
+    }
+
     const limitedFileExtension = [
         "ppt",
         "pptx",
@@ -149,9 +153,6 @@
         @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
         private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
 
-        @chatStore.Action(ChatStore.ACTION_GET_MY_CHAT_LIST)
-        protected readonly getMyChatList!: ChatStore.ACTION_GET_MY_CHAT_LIST;
-
         @Ref("input")
         private readonly messageInputBox!: HTMLDivElement;
 
@@ -350,8 +351,6 @@
                 if (this.chatId) {
                     chatCache[this.chatId] = [];
                 }
-
-                this.getMyChatList();
             }, 120);
         }