From 78f371960a34b1daaf4f43d0e811317199d9025d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=91=E6=96=87=E5=8F=AF?= <1041367524@qq.com>
Date: Mon, 16 May 2022 11:27:08 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20IM=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                           |  3 ++-
 src/layouts/default.vue        |  4 ++--
 src/store/modules/chat/chat.js | 15 +++++++++------
 src/views/chat/index.vue       | 25 +++++++++++++++++++++----
 vite.config.js                 |  4 ++--
 5 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/.env b/.env
index f6cfe6f..95809c2 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,4 @@
 VITE_BASE_URL=/api
-VITE_SOCKET_URL=wss://k8s-horse-gateway.mashibing.cn/ws
+#VITE_SOCKET_URL=wss://k8s-horse-gateway.mashibing.cn/ws
+VITE_SOCKET_URL=ws://192.168.10.93:8090/ws
 VITE_REQUEST_TIMEOUT=5000
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index da1ca78..f7a0f8f 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -22,8 +22,8 @@
     import LayoutMain from './components/main.vue';
     import LayoutMenu from './components/menu.vue';
     import LayoutTabs from './components/tabs.vue';
-    // const store = useStore();
-    // store.dispatch('chat/connect');
+    const store = useStore();
+    store.dispatch('chat/connect');
 </script>
 
 <style lang="less" scoped>
diff --git a/src/store/modules/chat/chat.js b/src/store/modules/chat/chat.js
index d94683d..a969716 100644
--- a/src/store/modules/chat/chat.js
+++ b/src/store/modules/chat/chat.js
@@ -144,9 +144,12 @@ const actions = {
         if (data.traceType !== 0) {
             let index = state.task.findIndex((item) => item.traceId === data.traceId);
             if (index !== -1) {
+                console.info('[chat] data', data);
                 commit('delTask', index);
                 dispatch('handle', data);
+            } else if (data.traceType === 25) {
                 console.info('[chat] msg', data);
+                dispatch('handle', data);
             } else {
                 console.info('[chat] deprecated', data);
             }
@@ -155,12 +158,12 @@ const actions = {
     /**
      * 处理数据
      */
-    handle: ({ state, commit, dispatch }, { code, traceType, content, session }) => {
+    handle: ({ state, commit, dispatch }, { code, traceType, content }) => {
         if (code === 200) {
             switch (traceType) {
                 case 25: // 收到消息
-                    if (session.id === state.currentSession) {
-                        commit('setMessageList', [...state.messageList, content.content]);
+                    if (content.sessionId === state.currentSession) {
+                        commit('setMessageList', [...state.messageList, content]);
                         dispatch('submitRead');
                     } else {
                         dispatch('querySession');
@@ -173,7 +176,7 @@ const actions = {
                     commit('setSessionData', content);
                     break;
                 case 28: // 消息列表
-                    commit('setMessageList', content);
+                    commit('setMessageList', [...content, ...state.messageList]);
                     break;
                 case 29: // 客服列表
                     commit('setCustomerServiceList', content);
@@ -195,10 +198,10 @@ const actions = {
     /**
      * 查询会话消息列表
      */
-    querySessionMessage: ({ state, dispatch }) => {
+    querySessionMessage: ({ state, dispatch }, data) => {
         dispatch('invoke', {
             traceType: 28,
-            content: { sessionId: state.currentSession, size: 100, topMessageId: null },
+            content: { sessionId: state.currentSession, size: 10, topMessageId: null, ...data },
         });
     },
     /**
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index 677514f..020667e 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -68,6 +68,9 @@
                     </div>
                 </div>
                 <el-scrollbar ref="refsMessageList" class="message-list">
+                    <el-button v-if="sessionMessageList.length" class="load" type="text" @click="handleLoadMore">
+                        加载更多
+                    </el-button>
                     <message-item
                         v-for="(item, index) in sessionMessageList"
                         :key="index"
@@ -156,6 +159,7 @@
     const currentSession = computed(() => sessionList.value.find((item) => item.id === currentSessionId.value));
     const handleChangeSession = (id) => {
         store.commit('chat/setCurrentSession', id);
+        store.commit('chat/setMessageList', []);
         store.dispatch('chat/querySessionMessage');
         store.dispatch('chat/submitRead');
     };
@@ -163,11 +167,21 @@
     // 聊天
     const sessionMessageList = computed(() => store.state.chat.messageList);
     const refsMessageList = ref(null);
-    watch(sessionMessageList, () => {
-        setTimeout(() => {
-            refsMessageList.value.setScrollTop(refsMessageList.value.scrollbar$.scrollHeight);
-        }, 1000);
+    watch(sessionMessageList, (value, old) => {
+        let offset = refsMessageList.value
+            ? refsMessageList.value.resize$.scrollHeight - refsMessageList.value.resize$.scrollTop
+            : 0;
+        nextTick(() => {
+            if (!old?.length || value.indexOf(old[0]) === 0) {
+                refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight);
+            } else {
+                refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight - offset);
+            }
+        });
     });
+    const handleLoadMore = () => {
+        store.dispatch('chat/querySessionMessage', { topMessageId: unref(sessionMessageList)[0].id });
+    };
     const handleSendMessage = (data) => {
         if (!data) {
             store.dispatch('chat/submitMessage', { text: state.message });
@@ -404,6 +418,9 @@
             .message-list {
                 flex: 1;
                 background-color: #f1f1f1;
+                .load {
+                    width: 100%;
+                }
             }
             .operation-bar {
                 display: flex;
diff --git a/vite.config.js b/vite.config.js
index 6516d2f..acd2dc5 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -23,8 +23,8 @@ export default (configEnv) => {
                     // target: 'http://192.168.10.109:8090/', // 显雨
                     // target: 'http://192.168.10.5:4500', // 高玉
                     // target: 'http://192.168.10.67:8090', // 罗战
-                    // target: 'http://192.168.10.93:8090', // 周渺
-                    target: 'https://k8s-horse-gateway.mashibing.cn/', // 测试地址
+                    target: 'http://192.168.10.93:8090', // 周渺
+                    // target: 'https://k8s-horse-gateway.mashibing.cn/', // 测试地址
                     // target: 'https://you-gateway.mashibing.com', // 生产环境
                     changeOrigin: true,
                     rewrite: (path) => path.replace(/^\/api/, ''),