From 512678dde3a30f90914888248cd8f63946fba0ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kaizheng=28=E9=83=91=E5=87=AF=29?= Date: Sat, 15 Feb 2025 17:38:39 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BA=A4=E6=98=93=E5=9C=88=E6=8A=95?= =?UTF-8?q?=E9=A1=BE=E8=A6=81=E6=98=AF=E5=8F=91=E8=A8=80=E5=B7=B2=E8=AF=BB?= =?UTF-8?q?=E4=B8=8A=E6=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Circle/components/ChatFrame.vue | 5 ++ src/views/Circle/hooks/storage.js | 62 ------------- src/views/Circle/hooks/useChatData.js | 7 +- src/views/Circle/hooks/useReadMessage.js | 104 ++++++++++++++++++++++ src/views/Circle/hooks/useWebSocket.js | 3 + src/views/Circle/interact.vue | 10 ++- 6 files changed, 126 insertions(+), 65 deletions(-) delete mode 100644 src/views/Circle/hooks/storage.js create mode 100644 src/views/Circle/hooks/useReadMessage.js diff --git a/src/views/Circle/components/ChatFrame.vue b/src/views/Circle/components/ChatFrame.vue index 4a341a5..eb8a5ad 100644 --- a/src/views/Circle/components/ChatFrame.vue +++ b/src/views/Circle/components/ChatFrame.vue @@ -181,6 +181,10 @@ const props = defineProps({ type: Object, default: () => {}, }, + stompClient: { + type: Object, + default: null, + }, }); const defaultAvatar = { @@ -237,6 +241,7 @@ const { className: `.interact-scroll${props.type}`, id: route.query.id, type: props.type, + stompClient: props.stompClient, }); const maskUserName = (value) => { diff --git a/src/views/Circle/hooks/storage.js b/src/views/Circle/hooks/storage.js deleted file mode 100644 index a81159b..0000000 --- a/src/views/Circle/hooks/storage.js +++ /dev/null @@ -1,62 +0,0 @@ -import { readMessage } from "@/api/circle"; - -// type 1 公共互动 2私聊 -function getStorageTeacherMsg({ - productId, - productType = 41, - type = 1, - userId, -}) { - const getMsgIds = localStorage.getItem( - `read-msg-${productType}-${productId}-${userId}-${type}` - ); - if (getMsgIds) { - return JSON.parse(getMsgIds); - } else { - return []; - } -} - -// 老师发的言，并且已经上报的缓存起来 -export function setStorageTeacherMsg({ - productId, - productType = 41, - userId, - type = 1, // type 1 公共互动 2私聊 - msg, // 单条消息 - msgArr, // 多条消息 -}) { - const storageMsgIds = getStorageTeacherMsg({ - productId, - productType, - type, - userId, - }); - - let messageIds = []; - // userType用户类型：1投顾；2用户；3助教；4运营人员 - if (msg) { - if (!storageMsgIds.includes(msg.id) && msg.userType !== 2) { - messageIds = [msg.id]; - } - } else if (msgArr && msgArr.length) { - msgArr.forEach((msg) => { - if (msg.userType !== 2 && !storageMsgIds.includes(msg.id)) { - messageIds.push(msg.id); - } - }); - } else { - return; - } - if (messageIds.length) { - setTimeout(async () => { - let ret = await readMessage({ messageIds }).catch(() => {}); - if (ret && ret.code === 0) { - localStorage.setItem( - `read-msg-${productType}-${productId}-${userId}-${type}`, - JSON.stringify(messageIds.concat(storageMsgIds)) - ); - } - }, Math.random() * 3); - } -} diff --git a/src/views/Circle/hooks/useChatData.js b/src/views/Circle/hooks/useChatData.js index f4740bf..828eb81 100644 --- a/src/views/Circle/hooks/useChatData.js +++ b/src/views/Circle/hooks/useChatData.js @@ -4,13 +4,13 @@ import BScroll from "@better-scroll/core"; import PullDown from "@better-scroll/pull-down"; import MouseWheel from "@better-scroll/mouse-wheel"; import useDisableScroll from "@/hooks/useDisableScroll"; -import { setStorageTeacherMsg } from "./storage"; +import useReadMessage from "./useReadMessage"; import store from "@/store/index"; BScroll.use(PullDown); BScroll.use(MouseWheel); -export default function useChatData({ id, className, type }) { +export default function useChatData({ id, className, type, stompClient }) { const { addScrollEvent } = useDisableScroll(); const hasNext = ref(true); let bs = ref(); @@ -20,6 +20,8 @@ export default function useChatData({ id, className, type }) { const msgIdsObj = ref({}); const loading = ref(false); + const { setStorageTeacherMsg } = useReadMessage(); + const getLiveHisMsg = async () => { loading.value = true; if (isPullingDown.value) return; @@ -47,6 +49,7 @@ export default function useChatData({ id, className, type }) { userId: store.state.userInfo.account, msgArr: list, type: type === 5 ? 2 : 1, + stompClient, }); } isPullingDown.value = false; diff --git a/src/views/Circle/hooks/useReadMessage.js b/src/views/Circle/hooks/useReadMessage.js new file mode 100644 index 0000000..a36ca78 --- /dev/null +++ b/src/views/Circle/hooks/useReadMessage.js @@ -0,0 +1,104 @@ +// import { readMessage } from "@/api/circle"; + +export default function useReadMessage() { + // type 1 公共互动 2私聊 + const getStorageTeacherMsg = ({ + productId, + productType = 41, + type = 1, + userId, + }) => { + const getMsgIds = localStorage.getItem( + `read-msg-${productType}-${productId}-${userId}-${type}` + ); + if (getMsgIds) { + return JSON.parse(getMsgIds); + } else { + return []; + } + }; + + // 老师发的言，并且已经上报的缓存起来 + let uploadReadMsgIds = []; // 存储需要上传的ids + let timeout = null; + + const uploadReadMsg = ({ + productId, + productType, + userId, + type, // type 1 公共互动 2私聊 + stompClient, + messageIds, + storageMsgIds, + }) => { + console.log("stompClient", stompClient); + uploadReadMsgIds = Array.from(new Set(uploadReadMsgIds.concat(messageIds))); + clearTimeout(timeout); + timeout = setTimeout(async () => { + stompClient && + stompClient.publish({ + destination: `/chat/group/readMessage`, + headers: { + userId: userId, + messageIds: uploadReadMsgIds, + }, + }); + localStorage.setItem( + `read-msg-${productType}-${productId}-${userId}-${type}`, + JSON.stringify(uploadReadMsgIds.concat(storageMsgIds).sort()) + ); + uploadReadMsgIds = []; + }, 5000); + }; + + const setStorageTeacherMsg = ({ + productId, + productType = 41, + userId, + type = 1, // type 1 公共互动 2私聊 + msg, // 单条消息 + msgArr, // 多条消息 + stompClient, + }) => { + const storageMsgIds = getStorageTeacherMsg({ + productId, + productType, + type, + userId, + }); + + let messageIds = []; + // userType用户类型：1投顾；2用户；3助教；4运营人员 + if (msg) { + if (!storageMsgIds.includes(msg.id) && msg.userType !== 2) { + messageIds = [msg.id]; + } + } else if (msgArr && msgArr.length) { + msgArr.forEach((msg) => { + if (msg.userType !== 2 && !storageMsgIds.includes(msg.id)) { + messageIds.push(msg.id); + } + }); + } else { + return; + } + + if (messageIds.length) { + uploadReadMsg({ + productId, + productType, + userId, + type, // type 1 公共互动 2私聊 + msg, // 单条消息 + msgArr, // 多条消息 + stompClient, + messageIds, + storageMsgIds, + }); + } + }; + + return { + setStorageTeacherMsg, + }; +} diff --git a/src/views/Circle/hooks/useWebSocket.js b/src/views/Circle/hooks/useWebSocket.js index 5470926..d0aecba 100644 --- a/src/views/Circle/hooks/useWebSocket.js +++ b/src/views/Circle/hooks/useWebSocket.js @@ -138,4 +138,7 @@ export default function ({ id, privateMessage, chatMessage }) { } } }); + return { + stompClient, + }; } diff --git a/src/views/Circle/interact.vue b/src/views/Circle/interact.vue index 340885a..016d396 100644 --- a/src/views/Circle/interact.vue +++ b/src/views/Circle/interact.vue @@ -19,6 +19,7 @@ :bsRefresh="active === 0" :detail="detail" :newMsg="newMsg" + :stompClient="stompClient" /> @@ -27,6 +28,7 @@ :bsRefresh="active === 1" :detail="detail" :newMsg="newMsg" + :stompClient="stompClient" /> @@ -35,6 +37,7 @@ :bsRefresh="active === 2" :detail="detail" :newMsg="privateNewMsg" + :stompClient="stompClient" /> @@ -43,6 +46,7 @@ :bsRefresh="active === 3" :detail="detail" :newMsg="newMsg" + :stompClient="stompClient" /> @@ -138,7 +142,11 @@ const chatMessage = (msg) => { detail.value.showMemberCount = data; } }; -useWebSocket({ id: route.query.id, privateMessage, chatMessage }); +const { stompClient } = useWebSocket({ + id: route.query.id, + privateMessage, + chatMessage, +}); const sendMsg = async () => { let ret = await sendMessage({