修改：发送和接收优化

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

@@ -3,10 +3,11 @@ import { Dialog } from '@/components/Dialog'
 import { shallowRef, defineAsyncComponent, DefineComponent } from 'vue'
 import { getAccessToken } from '@/utils/auth'
 import { useWebSocket } from '@vueuse/core'
-import { imMessageStore, ImMessageWebSocket } from '@/store/modules/imMessageStore'
+import { chatStore, ImMessageWebSocket } from '@/store/modules/chatStore'
+import * as MessageApi from '@/api/im/message'
 
 // 从 imMessageStore 中导入 addMessage 方法
-const { addMessage } = imMessageStore()
+const { addMessage, setLocalMaxSeq, loadMessages } = chatStore()
 
 // 异步加载可能的对话框内容组件
 const IMComponent = defineAsyncComponent(() => import('@/views/im/index.vue'))
@@ -64,6 +65,7 @@ function initWebSocket() {
 
           // 保存到 pina imMessageStore
           addMessage(message)
+          setLocalMaxSeq(content.sequence)
 
           return
         }
@@ -75,10 +77,23 @@ function initWebSocket() {
   console.log('websocket 初始化成功')
 }
 
+// 初始化消息列表
+const pullParams = reactive({
+  sequence: 0, // 消息序列号
+  size: 10
+})
+async function loadImMessages() {
+  // 获取消息列表
+  const list: ImMessageWebSocket[] = await MessageApi.pullMessageList(pullParams)
+  loadMessages(list)
+}
+
 // ========== 初始化 =========
 onMounted(() => {
   // 首次加载 websocket
   initWebSocket()
+  // 加载loadMessages
+  loadImMessages()
 })
 </script>
 

src/store/modules/imMessageStore.ts → src/store/modules/chatStore.ts

@@ -1,3 +1,4 @@
+import { store } from '../index'
 import { defineStore } from 'pinia'
 
 export interface ImMessageWebSocket {
@@ -13,23 +14,33 @@ export interface ImMessageWebSocket {
   sequence: number // 序号
 }
 
-export const imMessageStore = defineStore({
+export const chatStore = defineStore({
   id: 'imMessage',
   state: () => ({
-    messages: [] as ImMessageWebSocket[]
+    messages: [] as ImMessageWebSocket[],
+    localMaxSeq: 0
   }),
   getters: {
     getMessages(): ImMessageWebSocket[] {
       return this.messages
+    },
+    getLocalMaxSeq(): number {
+      return this.localMaxSeq
     }
   },
   actions: {
+    loadMessages(messages: ImMessageWebSocket[]) {
+      this.messages = messages
+    },
     addMessage(message: ImMessageWebSocket) {
       this.messages.push(message)
+    },
+    setLocalMaxSeq(seq: number) {
+      this.localMaxSeq = seq
     }
   }
 })
 
-export function useImMessageStore() {
-  return imMessageStore()
+export const useImMessageStore = () => {
+  return chatStore(store)
 }

src/views/im/Message/components/messageList/index.vue

@@ -38,7 +38,7 @@ const handleMsgTimeShow = (sendTime, index) => {
 }
 /* computed-- 消息来源是否为自己 */
 const isMyself = (msgBody) => {
-  return msgBody.senderId === userStore.user.id || msgBody.receiverId === userStore.user.id
+  return msgBody.senderId === userStore.user.id
 }
 /* 文本中是否包含link */
 const isLink = computed(() => {
@@ -52,9 +52,7 @@ const loginUserInfo = {
 }
 //处理聊天对方昵称展示
 const handleNickName = (msgBody) => {
-  return msgBody.senderId === userStore.user.id || msgBody.receiverId === userStore.user.id
-    ? '我'
-    : '对方'
+  return msgBody.senderId === userStore.user.id ? '我' : '对方'
 }
 //引用消息
 let clickQuoteMsgId = ref('')

src/views/im/Message/index.vue

@@ -5,7 +5,10 @@ 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 { imMessageStore } from '@/store/modules/imMessageStore'
+import { chatStore, useImMessageStore } from '@/store/modules/chatStore'
+
+const { addMessage, setLocalMaxSeq } = chatStore()
+const { messages } = useImMessageStore()
 
 const { query } = useRoute() // 查询参数
 
@@ -15,15 +18,6 @@ const drawer = ref(false) //抽屉显隐
 const handleDrawer = () => {
   drawer.value = !drawer.value
 }
-//删除好友
-const delTheFriend = () => {
-  console.log(nowPickInfo.value)
-  if (nowPickInfo.value?.id) {
-    const targetId = nowPickInfo.value.id
-    // EaseChatClient.deleteContact(targetId)
-    // ElMessage({ type: 'success', center: true, message: '好友已删除~' })
-  }
-}
 // 当前聊天对象信息
 const nowPickInfo = ref({
   id: 100,
@@ -39,24 +33,15 @@ const nowPickInfo = ref({
   }
 })
 
-//获取群组详情
-const groupDetail = computed(() => {
-  return nowPickInfo.value.groupDetail
-})
 //获取对应的消息内容
 const pullParams = reactive({
-  sequence: null, // 消息序列号 默认为null
+  sequence: 0, // 消息序列号
   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)
+  messageData.value = messages
 }
 console.log(messageData)
 
@@ -69,10 +54,6 @@ const fechHistoryMessage = (loadType) => {
   console.log(loadType)
   console.log('加载更多')
   loadingHistoryMsg.value = true
-  // 如果 messageData 不为空 ，获取第一条数据的 sequence
-  if (messageData.value.length) {
-    pullParams.sequence = messageData.value[0].sequence
-  }
   getMessageData()
   loadingHistoryMsg.value = false
 }
@@ -80,11 +61,6 @@ const fechHistoryMessage = (loadType) => {
 const scrollMessageList = (direction) => {
   console.log(direction)
 }
-//消息重新编辑
-const inputBox = ref(null)
-const reEditMessage = (msg) => (inputBox.value.textContent = msg)
-//消息引用
-const messageQuote = (msg) => inputBox.value.handleQuoteMessage(msg)
 /** 初始化 **/
 onMounted(() => {
   getMessageData()