perf: IM交互优化

.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

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>

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 },
         });
     },
     /**

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;

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/, ''),