From 294fb80b053685a5219b90fcb368a186a75cffe5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com>
Date: Wed, 29 May 2024 00:00:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E6=8E=A5=E6=94=B6?=
 =?UTF-8?q?=20websocket=20=E8=BF=9E=E6=8E=A5=E5=92=8C=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/ImChat/src/ImChat.vue | 65 +++++++++++++++--
 src/store/modules/imMessageStore.ts         |  9 +++
 src/store/modules/webSocketStore.ts         | 81 ---------------------
 src/views/im/Message/index.vue              | 20 +++--
 4 files changed, 83 insertions(+), 92 deletions(-)
 delete mode 100644 src/store/modules/webSocketStore.ts

diff --git a/src/layout/components/ImChat/src/ImChat.vue b/src/layout/components/ImChat/src/ImChat.vue
index 164cd8a1..b5f1db38 100644
--- a/src/layout/components/ImChat/src/ImChat.vue
+++ b/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(() => {
diff --git a/src/store/modules/imMessageStore.ts b/src/store/modules/imMessageStore.ts
index 852c8ad4..04d92a6d 100644
--- a/src/store/modules/imMessageStore.ts
+++ b/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()
+}
diff --git a/src/store/modules/webSocketStore.ts b/src/store/modules/webSocketStore.ts
deleted file mode 100644
index 88503fef..00000000
--- a/src/store/modules/webSocketStore.ts
+++ /dev/null
@@ -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 初始化成功')
-    }
-  }
-})
diff --git a/src/views/im/Message/index.vue b/src/views/im/Message/index.vue
index d0c119ac..099d4abc 100644
--- a/src/views/im/Message/index.vue
+++ b/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) => {