修改：接收 websocket 连接和获取消息列表

src/layout/components/ImChat/src/ImChat.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { Dialog } from '@/components/Dialog'
 import { shallowRef, defineAsyncComponent, DefineComponent } from 'vue'
-import { webSocketStore } from '@/store/modules/webSocketStore'
+import { getAccessToken } from '@/utils/auth'
+import { useWebSocket } from '@vueuse/core'
+import { imMessageStore, ImMessageWebSocket } from '@/store/modules/imMessageStore'
+
+// 从 imMessageStore 中导入 addMessage 方法
+const { addMessage } = imMessageStore()
 
 // 异步加载可能的对话框内容组件
 const IMComponent = defineAsyncComponent(() => import('@/views/im/index.vue'))
@@ -14,11 +19,61 @@ function openDialog() {
   dialogVisible.value = true
   currentComponent.value = IMComponent // 加载 IM 组件
 }
-// 登录成功后初始化 WebSocket 连接
-const { status, data, initWebSocket } = webSocketStore()
 
-/** 监听接收到的数据 */
-const messageList = ref([] as { time: number; text: string }[]) // 消息列表
+// 初始化 WebSocket 连接
+function initWebSocket() {
+  const server =
+    (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
+    '?token=' +
+    getAccessToken()
+  const { data } = useWebSocket(server, {
+    autoReconnect: true,
+    heartbeat: true,
+    onMessage(ws, event) {
+      // ws 状态不是 open 时不处理
+      if (ws.readyState !== WebSocket.OPEN) return
+      try {
+        // 1. 收到心跳
+        if (data.value === 'pong') {
+          console.log('websocket 收到心跳包')
+          return
+        }
+        console.log('websocket 收到消息', event.data)
+        // 2.1 解析 type 消息类型
+        const jsonMessage = JSON.parse(data.value)
+        const type = jsonMessage.type
+        const content = JSON.parse(jsonMessage.content)
+        if (!type) {
+          // message.error('未知的消息类型：' + data.value)
+          return
+        }
+        // 2.2 消息类型：demo-message-receive
+        if (type === 'im-message-receive') {
+          const message: ImMessageWebSocket = {
+            id: content.id,
+            conversationType: content.conversationType,
+            senderId: content.senderId,
+            senderNickname: content.senderNickname,
+            senderAvatar: content.senderAvatar,
+            receiverId: content.receiverId,
+            contentType: content.contentType,
+            content: content.content,
+            sendTime: content.sendTime,
+            sequence: content.sequence
+          }
+
+          // 保存到 pina imMessageStore
+          addMessage(message)
+
+          return
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  })
+  console.log('websocket 初始化成功')
+}
 
 // ========== 初始化 =========
 onMounted(() => {

src/store/modules/imMessageStore.ts

@@ -18,9 +18,18 @@ export const imMessageStore = defineStore({
   state: () => ({
     messages: [] as ImMessageWebSocket[]
   }),
+  getters: {
+    getMessages(): ImMessageWebSocket[] {
+      return this.messages
+    }
+  },
   actions: {
     addMessage(message: ImMessageWebSocket) {
       this.messages.push(message)
     }
   }
 })
+
+export function useImMessageStore() {
+  return imMessageStore()
+}

src/store/modules/webSocketStore.ts

@@ -1,81 +0,0 @@
-import { defineStore } from 'pinia'
-import { useWebSocket, WebSocketStatus } from '@vueuse/core'
-import { getAccessToken } from '@/utils/auth'
-import { imMessageStore, ImMessageWebSocket } from './imMessageStore'
-
-// 从 imMessageStore 中导入 addMessage 方法
-const { addMessage } = imMessageStore()
-export const webSocketStore = defineStore({
-  id: 'websocket',
-  state: () => ({
-    data: ref(null) as any,
-    status: ref<WebSocketStatus> as any,
-    close: null as ((code?: number | undefined, reason?: string | undefined) => void) | null,
-    open: null as (() => void) | null,
-    send: null as
-      | ((data: string | ArrayBuffer | Blob, useBuffer?: boolean | undefined) => boolean)
-      | null,
-    pingInterval: null as NodeJS.Timeout | null
-  }),
-  actions: {
-    initWebSocket() {
-      const server =
-          (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
-          '?token=' +
-          getAccessToken(),
-        { data, status, close, open, send } = useWebSocket(server, {
-          autoReconnect: true,
-          heartbeat: true,
-          onMessage(ws, event) {
-            // ws 状态不是 open 时不处理
-            if (ws.readyState !== WebSocket.OPEN) return
-            try {
-              // 1. 收到心跳
-              if (data.value === 'pong') {
-                console.log('websocket 收到心跳包')
-                return
-              }
-              console.log('websocket 收到消息', event.data)
-              // 2.1 解析 type 消息类型
-              const jsonMessage = JSON.parse(data.value)
-              const type = jsonMessage.type
-              const content = JSON.parse(jsonMessage.content)
-              if (!type) {
-                // message.error('未知的消息类型：' + data.value)
-                return
-              }
-              // 2.2 消息类型：demo-message-receive
-              if (type === 'im-message-receive') {
-                const message: ImMessageWebSocket = {
-                  id: content.id,
-                  conversationType: content.conversationType,
-                  senderId: content.senderId,
-                  senderNickname: content.senderNickname,
-                  senderAvatar: content.senderAvatar,
-                  receiverId: content.receiverId,
-                  contentType: content.contentType,
-                  content: content.content,
-                  sendTime: content.sendTime,
-                  sequence: content.sequence
-                }
-
-                // 保存到 pina imMessageStore
-                addMessage(message)
-
-                return
-              }
-            } catch (error) {
-              console.error(error)
-            }
-          }
-        })
-      this.status = status
-      this.data = data
-      this.send = send
-      this.close = close
-      this.open = open
-
-      console.log('websocket 初始化成功')
-    }
-  }
-})

src/views/im/Message/index.vue

@@ -5,7 +5,7 @@ import { messageType } from '@/constant/im'
 import MessageList from './components/messageList/index.vue'
 import InputBox from './components/inputBox/index.vue'
 import * as MessageApi from '@/api/im/message'
-import { ImMessageRespVO } from '@/api/im/message'
+import { imMessageStore } from '@/store/modules/imMessageStore'
 
 const { query } = useRoute() // 查询参数
 
@@ -45,11 +45,17 @@ const groupDetail = computed(() => {
 })
 //获取对应的消息内容
 const pullParams = reactive({
-  sequence: 0,
-  size: 100
+  sequence: null, // 消息序列号 默认为null
+  size: 10
 })
 const messageData = ref([])
 const getMessageData = async () => {
+  // 获取消息列表
+  const imMessages = imMessageStore().getMessages
+  if (imMessages) {
+    console.log('imMessages:' + imMessages)
+    console.log('imMessages:' + imMessages.length)
+  }
   messageData.value = await MessageApi.pullMessageList(pullParams)
 }
 console.log(messageData)
@@ -63,10 +69,12 @@ const fechHistoryMessage = (loadType) => {
   console.log(loadType)
   console.log('加载更多')
   loadingHistoryMsg.value = true
+  // 如果 messageData 不为空 ，获取第一条数据的 sequence
+  if (messageData.value.length) {
+    pullParams.sequence = messageData.value[0].sequence
+  }
   getMessageData()
-  setTimeout(() => {
-    loadingHistoryMsg.value = false
-  }, 1000)
+  loadingHistoryMsg.value = false
 }
 //控制消息滚动
 const scrollMessageList = (direction) => {