From ddff07f68ebbf04beaeef377446c7292d5d96956 Mon Sep 17 00:00:00 2001 From: bob <312777916@qq.com> Date: Fri, 20 Sep 2024 12:11:32 +0800 Subject: [PATCH] =?UTF-8?q?msgRecords=E5=85=A5=E4=BA=86=E7=BC=93=E5=AD=98,?= =?UTF-8?q?=E4=BD=86=E4=B8=8D=E6=8C=81=E4=B9=85=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/message/InputEditor.vue | 2 +- src/components/message/SessionBox.vue | 2 +- src/js/websocket/wsConnect.js | 4 +- src/stores/message.js | 23 ++++++--- src/stores/user.js | 10 ++-- src/views/message/MessageLayout.vue | 69 ++++++++++++++------------ 6 files changed, 61 insertions(+), 49 deletions(-) diff --git a/src/components/message/InputEditor.vue b/src/components/message/InputEditor.vue index b6a49a1..990ad4e 100644 --- a/src/components/message/InputEditor.vue +++ b/src/components/message/InputEditor.vue @@ -37,7 +37,7 @@ onUpdated(() => { // 监控session发生了切换 watch( - () => userData.lastSessionId, + () => userData.curSessionId, (newValue, oldValue) => { let content = getQuill().getText().trim() // 草稿若没发生变动，则不触发存储 diff --git a/src/components/message/SessionBox.vue b/src/components/message/SessionBox.vue index 6f7a041..249edbc 100644 --- a/src/components/message/SessionBox.vue +++ b/src/components/message/SessionBox.vue @@ -25,7 +25,7 @@ const exportSession = { } const hasBeenChoosed = computed(() => { - return props.sesionInfo.sessionId === userData.lastSessionId + return props.sesionInfo.sessionId === userData.curSessionId }) const showName = computed(() => { diff --git a/src/js/websocket/wsConnect.js b/src/js/websocket/wsConnect.js index cd013b8..3db6e38 100644 --- a/src/js/websocket/wsConnect.js +++ b/src/js/websocket/wsConnect.js @@ -74,7 +74,7 @@ class WsConnect { } /** - * 绑定事件，() => {}留白的需要业务自己定义处理逻辑 + * 绑定事件 */ events = { [MsgType.HELLO]: () => { @@ -82,7 +82,7 @@ class WsConnect { this.isConnect = true }, - [MsgType.DELIVERED]: () => {}, + [MsgType.DELIVERED]: () => {}, //需要发送时定义事件处理逻辑 [MsgType.CHAT]: (msg) => { const msgId = msg.body.msgId diff --git a/src/stores/message.js b/src/stores/message.js index 25ee453..78a89ce 100644 --- a/src/stores/message.js +++ b/src/stores/message.js @@ -42,15 +42,22 @@ export const messageStore = defineStore('anyim-message', () => { /** * 格式：{sessionId_1: msgRecord_1, sessionId_2: msgRecord_2, ...} + * 其中msgRecord_x是数组 */ - const msgRecordList = ref({}) + const msgRecordsList = ref({}) - const setMsgRecordList = (msgRecords) => { - msgRecordList.value = msgRecords + const addMsgRecords = (sessionId, msgRecords) => { + if (!msgRecordsList.value[sessionId]) { + msgRecordsList.value[sessionId] = msgRecords.sort((a, b) => a.msgId - b.msgId) + } else { + msgRecordsList.value[sessionId] = [...msgRecordsList.value[sessionId], msgRecords].sort( + (a, b) => a.msgId - b.msgId + ) + } } - const addMsgRecord = (msgRecord) => { - msgRecordList.value[msgRecord.sessionId] = msgRecord + const getMsgRecords = (sessionId) => { + return msgRecordsList.value[sessionId] ? msgRecordsList.value[sessionId] : [] } return { @@ -59,8 +66,8 @@ export const messageStore = defineStore('anyim-message', () => { addSession, updateSession, - msgRecordList, - setMsgRecordList, - addMsgRecord + msgRecordsList, + addMsgRecords, + getMsgRecords } }) diff --git a/src/stores/user.js b/src/stores/user.js index 826e164..2e28226 100644 --- a/src/stores/user.js +++ b/src/stores/user.js @@ -90,10 +90,10 @@ export const userStore = defineStore( clientId.value = id } - const lastSessionId = ref() + const curSessionId = ref() - const setLastSessionId = (sessionId) => { - lastSessionId.value = sessionId + const setCurSessionId = (sessionId) => { + curSessionId.value = sessionId } return { @@ -112,8 +112,8 @@ export const userStore = defineStore( setIsRemenberMe, clientId, setClientId, - lastSessionId, - setLastSessionId + curSessionId, + setCurSessionId } }, { diff --git a/src/views/message/MessageLayout.vue b/src/views/message/MessageLayout.vue index 9a74dec..ccaea97 100644 --- a/src/views/message/MessageLayout.vue +++ b/src/views/message/MessageLayout.vue @@ -47,12 +47,20 @@ const loadCursor = computed(() => { }) const choosedSession = computed(() => { - if (userData.lastSessionId) - return messageData.sessionList[userData.lastSessionId] + if (userData.curSessionId) + return messageData.sessionList[userData.curSessionId] else return {} }) -const msgRecords = ref([]) + +const msgRecords = computed(() => { + if (userData.curSessionId) { + return messageData.msgRecordsList[userData.curSessionId] + } + else { + return [] + } +}) const msgListDiv = ref() @@ -63,13 +71,12 @@ onMounted(async () => { const res = await msgChatSessionListService() messageData.setSessionList(res.data.data) //入缓存 - if (userData.lastSessionId) { + if (userData.curSessionId) { pullMsg() } if (msgListDiv.value) msgListDiv.value.scrollTop = msgListDiv.value.scrollHeight - bindMsgEvents() }) // 把sessionList转成数组，并按照lastMsgTime排序 @@ -131,30 +138,35 @@ const onInputBoxDragUpdate = ({ height }) => { } const pullMsg = () => { + // 1.如果session中存在未读信息，需要从服务器拉去，否则就使用本地缓存的消息，避免频繁查询服务器 + // 2.如果这个会话没有缓存过消息,需要从服务器拉去一定数量的历史消息 + if (!msgRecords.value || messageData.sessionList[userData.curSessionId].unreadCount > 0) { msgChatPullMsgService({ - sessionId: userData.lastSessionId, + sessionId: userData.curSessionId, readMsgId: choosedSession.value.readMsgId, readTime: choosedSession.value.readTime, pageSize: 20 - }) - .then((res) => { - msgRecords.value = res.data.data.msgList - messageData.updateSession({ - sessionId: userData.lastSessionId, - readMsgId: res.data.data.lastMsgId, - readTime: new Date(), - lastMsgId: res.data.data.lastMsgId, - lastMsgContent: res.data.data.msgList.content, - lastMsgTime: res.data.data.msgList.msgTime, - unreadCount: 0 }) - }) + .then((res) => { + messageData.addMsgRecords(userData.curSessionId, res.data.data.msgList) + + messageData.updateSession({ + sessionId: userData.curSessionId, + readMsgId: res.data.data.lastMsgId, + readTime: new Date(), + lastMsgId: res.data.data.lastMsgId, + lastMsgContent: res.data.data.msgList.content, + lastMsgTime: res.data.data.msgList.msgTime, + unreadCount: 0 + }) + }) + } } // 表示有个session被选中了 const handleIsChoosed = (exportSession) => { - if (userData.lastSessionId !== exportSession.sessionId) { - userData.setLastSessionId(exportSession.sessionId) + if (userData.curSessionId !== exportSession.sessionId) { + userData.setCurSessionId(exportSession.sessionId) pullMsg() } } @@ -169,7 +181,7 @@ const handleExportContent = (content) => { const now = new Date() messageData.updateSession({ - sessionId: userData.lastSessionId, + sessionId: userData.curSessionId, readMsgId: deliveredMsg.body.msgId, // 发消息视为已经读到最后一条消息（自己发的） readTime: now, lastMsgId: deliveredMsg.body.msgId, // lastMsgId = 最后一条消息（自己发的） @@ -180,9 +192,9 @@ const handleExportContent = (content) => { }) // 如果当前sessionid和这个“已发送”消息的sessionId，更新到msgRecords中 - if (userData.lastSessionId === deliveredMsg.body.sessionId) { - msgRecords.value.push({ - sessionId: userData.lastSessionId, + if (userData.curSessionId === deliveredMsg.body.sessionId) { + messageData.addMsgRecords(userData.curSessionId, { + sessionId: userData.curSessionId, msgId: deliveredMsg.body.msgId, fromId: userData.user.account, msgType: choosedSession.value.sessionType, @@ -193,19 +205,12 @@ const handleExportContent = (content) => { }) } -const bindMsgEvents = () => { - wsConnect.bindEvent() -} - const onLoadMore = () => { isTopLoading.value = true loadMoreTips.value = '' } watch(msgRecords, () => { - if (msgRecords.value) { - msgRecords.value = msgRecords.value.sort((a, b) => a.msgId - b.msgId) - } msgListReachBottom() }, {deep: true}) @@ -252,7 +257,7 @@ const msgListReachBottom = () => {