perf: 无限加载聊天记录

Kerwin · Kerwin · commit 612383f0e085 · 2023-04-01T21:52:30.000+08:00
fix: 左侧会话无法滚动
diff --git a/service/src/index.ts b/service/src/index.ts
@@ -93,14 +93,14 @@ router.post('/room-delete', auth, async (req, res) => {
 router.get('/chat-hisroty', auth, async (req, res) => {
   try {
     const userId = req.headers.userId as string
-    const roomId = +req.query.roomid
-    const lastTime = req.query.lasttime as string
+    const roomId = +req.query.roomId
+    const lastId = req.query.lastId as string
     if (!roomId || !await existsChatRoom(userId, roomId)) {
       res.send({ status: 'Success', message: null, data: [] })
       // res.send({ status: 'Fail', message: 'Unknow room', data: null })
       return
     }
-    const chats = await getChats(roomId, !lastTime ? null : parseInt(lastTime))
+    const chats = await getChats(roomId, !isNotEmptyString(lastId) ? null : parseInt(lastId))
 
     const result = []
     chats.forEach((c) => {
diff --git a/service/src/storage/mongo.ts b/service/src/storage/mongo.ts
@@ -73,12 +73,12 @@ export async function deleteAllChatRooms(userId: string) {
   await chatCol.updateMany({ userId, status: Status.Normal }, { $set: { status: Status.Deleted } })
 }
 
-export async function getChats(roomId: number, lastTime?: number) {
-  if (!lastTime)
-    lastTime = new Date().getTime()
-  const query = { roomId, dateTime: { $lt: lastTime }, status: { $ne: Status.Deleted } }
+export async function getChats(roomId: number, lastId?: number) {
+  if (!lastId)
+    lastId = new Date().getTime()
+  const query = { roomId, uuid: { $lt: lastId }, status: { $ne: Status.Deleted } }
   const sort = { dateTime: -1 }
-  const limit = 200
+  const limit = 20
   const cursor = await chatCol.find(query).sort(sort).limit(limit)
   const chats = []
   await cursor.forEach(doc => chats.push(doc))
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -102,9 +102,9 @@ export function fetchDeleteChatRoom<T = any>(roomId: number) {
   })
 }
 
-export function fetchGetChatHistory<T = any>(roomId: number) {
+export function fetchGetChatHistory<T = any>(roomId: number, lastId?: number) {
   return get<T>({
-    url: `/chat-hisroty?roomid=${roomId}`,
+    url: `/chat-hisroty?roomId=${roomId}&lastId=${lastId}`,
   })
 }
 
diff --git a/src/store/modules/chat/index.ts b/src/store/modules/chat/index.ts
@@ -48,18 +48,42 @@ export const useChatStore = defineStore('chat-store', {
       callback && callback()
     },
 
-    async syncChat(h: Chat.History, callback: () => void) {
+    async syncChat(h: Chat.History, lastId?: number, callback?: () => void,
+      callbackForStartRequest?: () => void,
+      callbackForEmptyMessage?: () => void) {
       if (!h.uuid) {
         callback && callback()
         return
       }
+      const hisroty = this.history.filter(item => item.uuid === h.uuid)[0]
+      if (hisroty === undefined || hisroty.loading || hisroty.all) {
+        // callback && callback()
+        if (hisroty?.all ?? false)
+          callbackForEmptyMessage && callbackForEmptyMessage()
+        return
+      }
+      try {
+        hisroty.loading = true
+        const chatIndex = this.chat.findIndex(item => item.uuid === h.uuid)
+        if (chatIndex <= -1 || this.chat[chatIndex].data.length <= 0 || lastId !== undefined) {
+          callbackForStartRequest && callbackForStartRequest()
+          const chatData = (await fetchGetChatHistory(h.uuid, lastId)).data
+          if (chatData.length <= 0)
+            hisroty.all = true
 
-      const chatIndex = this.chat.findIndex(item => item.uuid === h.uuid)
-      if (chatIndex <= -1 || this.chat[chatIndex].data.length <= 0) {
-        const chatData = (await fetchGetChatHistory(h.uuid)).data
-        this.chat.unshift({ uuid: h.uuid, data: chatData })
+          if (chatIndex <= -1)
+            this.chat.unshift({ uuid: h.uuid, data: chatData })
+          else
+            this.chat[chatIndex].data.unshift(...chatData)
+        }
+      }
+      finally {
+        hisroty.loading = false
+        if (hisroty.all)
+          callbackForEmptyMessage && callbackForEmptyMessage()
+        this.recordState()
+        callback && callback()
       }
-      callback && callback()
     },
 
     setUsingContext(context: boolean) {
diff --git a/src/typings/chat.d.ts b/src/typings/chat.d.ts
@@ -15,6 +15,8 @@ declare namespace Chat {
 		title: string
 		isEdit: boolean
 		uuid: number
+		loading?: boolean
+		all?: boolean
 	}
 
 	interface ChatState {
diff --git a/src/views/chat/hooks/useScroll.ts b/src/views/chat/hooks/useScroll.ts
@@ -5,6 +5,7 @@ type ScrollElement = HTMLDivElement | null
 
 interface ScrollReturn {
   scrollRef: Ref<ScrollElement>
+  scrollTo: (top: number) => Promise<void>
   scrollToBottom: () => Promise<void>
   scrollToTop: () => Promise<void>
   scrollToBottomIfAtBottom: () => Promise<void>
@@ -13,6 +14,12 @@ interface ScrollReturn {
 export function useScroll(): ScrollReturn {
   const scrollRef = ref<ScrollElement>(null)
 
+  const scrollTo = async (top: number) => {
+    await nextTick()
+    if (scrollRef.value)
+      scrollRef.value.scrollTop = top
+  }
+
   const scrollToBottom = async () => {
     await nextTick()
     if (scrollRef.value)
@@ -37,6 +44,7 @@ export function useScroll(): ScrollReturn {
 
   return {
     scrollRef,
+    scrollTo,
     scrollToBottom,
     scrollToTop,
     scrollToBottomIfAtBottom,
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
@@ -1,8 +1,9 @@
 <script setup lang='ts'>
 import type { Ref } from 'vue'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
+import type { MessageReactive } from 'naive-ui'
 import { NAutoComplete, NButton, NInput, NSpin, useDialog, useMessage } from 'naive-ui'
 import html2canvas from 'html2canvas'
 import { Message } from './components'
@@ -32,7 +33,7 @@ useCopyCode()
 
 const { isMobile } = useBasicLayout()
 const { addChat, updateChat, updateChatSome, getChatByUuidAndIndex } = useChat()
-const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll()
+const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom, scrollTo } = useScroll()
 const { usingContext, toggleUsingContext } = useUsingContext()
 
 const { uuid } = route.params as { uuid: string }
@@ -45,6 +46,10 @@ const firstLoading = ref<boolean>(false)
 const loading = ref<boolean>(false)
 const inputRef = ref<Ref | null>(null)
 
+let loadingms: MessageReactive
+let allmsg: MessageReactive
+let prevScrollTop: number
+
 // 添加PromptStore
 const promptStore = usePromptStore()
 
@@ -421,6 +426,40 @@ function handleStop() {
   }
 }
 
+async function loadMoreMessage(event: any) {
+  const chatIndex = chatStore.chat.findIndex(d => d.uuid === +uuid)
+  if (chatIndex <= -1)
+    return
+
+  const scrollPosition = event.target.scrollHeight - event.target.scrollTop
+
+  const lastId = chatStore.chat[chatIndex].data[0].uuid
+  await chatStore.syncChat({ uuid: +uuid } as Chat.History, lastId, () => {
+    loadingms && loadingms.destroy()
+    nextTick(() => scrollTo(event.target.scrollHeight - scrollPosition))
+  }, () => {
+    loadingms = ms.loading(
+      '加载中...', {
+        duration: 0,
+      },
+    )
+  }, () => {
+    allmsg && allmsg.destroy()
+    allmsg = ms.warning('没有更多了', {
+      duration: 1000,
+    })
+  })
+}
+
+const handleLoadMoreMessage = debounce(loadMoreMessage, 300)
+
+async function handleScroll(event: any) {
+  const scrollTop = event.target.scrollTop
+  if (scrollTop < 50 && (scrollTop < prevScrollTop || prevScrollTop === undefined))
+    handleLoadMoreMessage(event)
+  prevScrollTop = scrollTop
+}
+
 // 可优化部分
 // 搜索选项计算，这里使用value作为索引项，所以当出现重复value时渲染异常(多项同时出现选中效果)
 // 理想状态下其实应该是key作为索引项,但官方的renderOption会出现问题，所以就需要value反renderLabel实现
@@ -468,7 +507,7 @@ onMounted(() => {
   firstLoading.value = true
   debounce(() => {
     // 直接刷 极小概率不请求
-    chatStore.syncChat({ uuid: Number(uuid) } as Chat.History, () => {
+    chatStore.syncChat({ uuid: Number(uuid) } as Chat.History, undefined, () => {
       firstLoading.value = false
       scrollToBottom()
       if (inputRef.value && !isMobile.value)
@@ -492,7 +531,7 @@ onUnmounted(() => {
       @toggle-using-context="toggleUsingContext"
     />
     <main class="flex-1 overflow-hidden">
-      <div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
+      <div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto" @scroll="handleScroll">
         <div
           id="image-wrapper"
           class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
diff --git a/src/views/chat/layout/sider/List.vue b/src/views/chat/layout/sider/List.vue
@@ -70,8 +70,8 @@ function isActive(uuid: number) {
 </script>
 
 <template>
-  <NSpin :show="loadingRoom">
-    <NScrollbar class="px-4">
+  <NScrollbar class="px-4">
+    <NSpin :show="loadingRoom">
       <div class="flex flex-col gap-2 text-sm">
         <template v-if="!dataSources.length">
           <div class="flex flex-col items-center mt-4 text-center text-neutral-300">
@@ -121,6 +121,6 @@ function isActive(uuid: number) {
           </div>
         </template>
       </div>
-    </NScrollbar>
-  </NSpin>
+    </NSpin>
+  </NScrollbar>
 </template>

Original file line number	Diff line number	Diff line change
`@@ -102,9 +102,9 @@ export function fetchDeleteChatRoom<T = any>(roomId: number) {`
`102`	`102`	`})`
`103`	`103`	`}`
`104`	`104`
`105`		`-export function fetchGetChatHistory<T = any>(roomId: number) {`
	`105`	`+export function fetchGetChatHistory<T = any>(roomId: number, lastId?: number) {`
`106`	`106`	`return get<T>({`
`107`		- url: `/chat-hisroty?roomid=${roomId}`,
	`107`	+ url: `/chat-hisroty?roomId=${roomId}&lastId=${lastId}`,
`108`	`108`	`})`
`109`	`109`	`}`
`110`	`110`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,8 @@ declare namespace Chat {`
`15`	`15`	`title: string`
`16`	`16`	`isEdit: boolean`
`17`	`17`	`uuid: number`
	`18`	`+ loading?: boolean`
	`19`	`+ all?: boolean`
`18`	`20`	`}`
`19`	`21`
`20`	`22`	`interface ChatState {`