ZF/open-anylink-web
1
0
Fork 0
mirror of https://gitee.com/lijingbo-2021/open-anylink-web.git synced 2025-12-30 11:02:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

消息发送-6：sessionList和消息记录

Browse Source
This commit is contained in:
bob
2024-09-18 20:32:35 +08:00
parent b774c989e1
commit e026e03a7f
6 changed files with 238 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/message.js
View File

@@ -4,3 +4,11 @@ import { getReqBody } from '@/api/common'
export const msgChatSessionListService = () => {
return request.post('/chat/sessionList', getReqBody())
}
export const msgUpdateSessionService = (obj) => {
return request.post('/chat/updateSession', getReqBody(obj))
}
export const msgChatPullMsgService = (obj) => {
return request.post('/chat/pullMsg', getReqBody(obj))
}

23
src/components/message/InputEditor.vue
View File

@@ -1,20 +1,24 @@
<script setup>
import '@wangeditor/editor/dist/css/style.css'
import { onMounted, onBeforeUnmount, ref, shallowRef } from 'vue'
import { onMounted, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
import { Editor } from '@wangeditor/editor-for-vue'
import { messageStore } from '@/stores'
import { msgUpdateSessionService } from '@/api/message'
const mode = 'simple'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const editorStyleRef = ref()
const props = defineProps(['sessionInfo'])
const emit = defineEmits(['exportContent'])
const messageData = messageStore()
// 内容 HTML
const valueHtml = ref('')
const content = [
{
type: 'paragraph',
children: [{ text: '', fontSize: '14px' }],
children: [{ text: props.sessionInfo.draft || '', fontSize: '14px' }],
lineHeight: 0.5
}
]
@@ -46,6 +50,21 @@ const handleEnter = () => {
valueHtml.value = ''
}
}
// 监控session发生了切换
watch(
() => props.sessionInfo,
(newValue, oldValue) => {
valueHtml.value = newValue.draft || ''
// 草稿若没发生变动，则不触发存储
if (editorRef.value.getText().trim() !== oldValue.draft) {
oldValue.draft = editorRef.value.getText().trim()
messageData.updateSession(oldValue)
msgUpdateSessionService({ sessionId: oldValue.sessionId, draft: oldValue.draft })
}
},
{ deep: true }
)
</script>
<template>

131
src/components/message/SessionBox.vue
View File

@@ -8,57 +8,61 @@ import { sessionShowTime } from '@/utils/common'
import { Top, Bottom, MuteNotification, Bell } from '@element-plus/icons-vue'
import { MsgType } from '@/proto/msg'
const props = defineProps(['sessionId', 'sessionType', 'objectInfo'])
const emit = defineEmits(['exportData'])
const isPinToTop = ref(false)
const isMute = ref(false)
const props = defineProps(['sesionInfo', 'choosedSessionId'])
const emit = defineEmits(['beChoosed', 'switchTag'])
const top = ref(props.sesionInfo.top)
const muted = ref(props.sesionInfo.muted)
const isShowUserCard = ref(false)
const isShowGroupCard = ref(false)
const sessionInfo = computed(() => {
return {
sessionId: props.sessionId,
sessionType: props.sessionType,
objectInfo: props.objectInfo
}
})
const exportSession = {
sessionId: props.sesionInfo.sessionId,
sessionType: props.sesionInfo.sessionType,
objectInfo: props.sesionInfo.objectInfo
}
const showName = computed(() => {
switch (props.sessionType) {
switch (props.sesionInfo.sessionType) {
case MsgType.CHAT:
return props.objectInfo.nickName
return props.sesionInfo.objectInfo.nickName
case MsgType.GROUP_CHAT:
return props.objectInfo.groupName
return props.sesionInfo.objectInfo.groupName
default:
return ''
}
})
const showId = computed(() => {
switch (props.sessionType) {
switch (props.sesionInfo.sessionType) {
case MsgType.CHAT:
return props.objectInfo.account
return props.sesionInfo.objectInfo.account
case MsgType.GROUP_CHAT:
return props.objectInfo.groupId
return props.sesionInfo.objectInfo.groupId
default:
return ''
}
})
const showAvatarThumb = computed(() => {
switch (props.sessionType) {
switch (props.sesionInfo.sessionType) {
case MsgType.CHAT:
case MsgType.GROUP_CHAT:
return props.objectInfo.avatarThumb
return props.sesionInfo.objectInfo.avatarThumb
default:
return ''
}
})
const showTime = computed(() => {
const now = new Date()
const oneDayAgo = new Date(now.getTime() - 0 * 24 * 60 * 60 * 1000)
return sessionShowTime(oneDayAgo)
return sessionShowTime(props.sesionInfo.lastMsgTime)
})
const isShowDraft = computed(() => {
return props.sesionInfo.sessionId !== props.choosedSessionId && props.sesionInfo.draft
})
const isShowUnreadCount = computed(() => {
return props.sesionInfo.sessionId !== props.choosedSessionId && props.sesionInfo.unreadCount > 0
})
const handleUserCard = (flag) => {
@@ -68,7 +72,7 @@ const handleGroupCard = (flag) => {
isShowGroupCard.value = flag
}
const showSomeoneCard = () => {
switch (props.sessionType) {
switch (props.sesionInfo.sessionType) {
case MsgType.CHAT:
isShowUserCard.value = true
break
@@ -79,6 +83,19 @@ const showSomeoneCard = () => {
break
}
}
let timer
const switchTag = (func) => {
func()
clearTimeout(timer)
timer = setTimeout(() => {
emit('switchTag', {
sessionId: props.sesionInfo.sessionId,
top: top.value,
muted: muted.value
})
}, 1000)
}
</script>
<template>
@@ -89,16 +106,17 @@ const showSomeoneCard = () => {
:showAvatarThumb="showAvatarThumb"
@click="showSomeoneCard"
></AvatarIcon>
<div class="content-box" @click="emit('exportData', sessionInfo)">
<div v-if="isShowUnreadCount" class="unread-tips"></div>
<div class="content-box" @click="emit('beChoosed', exportSession)">
<div class="header">
<div class="title">
<span class="showName">{{ showName || showId }}</span>
<span v-if="props.objectInfo.account" class="showAccount">
{{ props.objectInfo.account }}
<span v-if="props.sesionInfo.objectInfo.account" class="showAccount">
{{ props.sesionInfo.objectInfo.account }}
</span>
<SessionTag :tagType="props.sessionType"></SessionTag>
<SessionTag v-if="isPinToTop" tagType="pinToTop"></SessionTag>
<SessionTag v-if="isMute" tagType="mute"></SessionTag>
<SessionTag :tagType="props.sesionInfo.sessionType"></SessionTag>
<SessionTag v-if="top" tagType="top"></SessionTag>
<SessionTag v-if="muted" tagType="mute"></SessionTag>
</div>
<div class="datetime">
<span>{{ showTime }}</span>
@@ -106,20 +124,33 @@ const showSomeoneCard = () => {
</div>
<div class="body">
<div class="content">
<span class="draft">[草稿]</span>
<span class="detail">你吃饭了吗？</span>
<span v-if="isShowUnreadCount" class="unread-count"
>[{{ props.sesionInfo.unreadCount }}条]</span
>
<span v-if="isShowDraft" class="draft">[草稿]</span>
<span class="detail">{{
props.sesionInfo.draft ? props.sesionInfo.draft : props.sesionInfo.lastMsgContent
}}</span>
</div>
<div class="action">
<el-button
class="action-button pin-to-top"
:icon="isPinToTop ? Bottom : Top"
@click="isPinToTop = !isPinToTop"
class="action-button"
:icon="top ? Bottom : Top"
@click="
switchTag(() => {
top = !top
})
"
circle
/>
<el-button
class="action-button no-not-disturb"
:icon="isMute ? Bell : MuteNotification"
@click="isMute = !isMute"
class="action-button"
:icon="muted ? Bell : MuteNotification"
@click="
switchTag(() => {
muted = !muted
})
"
circle
/>
</div>
@@ -129,12 +160,12 @@ const showSomeoneCard = () => {
<UserCard
:isShow="isShowUserCard"
@update:isShow="handleUserCard"
:account="props.objectInfo.account"
:account="props.sesionInfo.objectInfo.account"
></UserCard>
<GroupCard
:isShow="isShowGroupCard"
@update:isShow="handleGroupCard"
:group="props.objectInfo"
:group="props.sesionInfo.objectInfo"
></GroupCard>
</template>
@@ -147,13 +178,23 @@ const showSomeoneCard = () => {
display: flex;
align-items: center;
user-select: none;
// cursor: pointer;
position: relative;
&:hover {
background-color: #c6e2ff;
border-radius: 6px;
}
.unread-tips {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
position: absolute;
top: 5px;
left: 40px;
}
.content-box {
width: 100%;
height: 100%;
@@ -182,6 +223,7 @@ const showSomeoneCard = () => {
white-space: nowrap; /*不换行*/
overflow: hidden; /*超出的文本隐藏*/
text-overflow: ellipsis; /* 溢出用省略号*/
flex-shrink: 0;
}
.showAccount {
@@ -205,7 +247,7 @@ const showSomeoneCard = () => {
.body {
height: 20px;
display: flex;
align-items: center;
justify-content: space-between;
.content {
font-size: 12px;
@@ -213,6 +255,11 @@ const showSomeoneCard = () => {
flex: 1 1;
overflow: hidden;
.unread-count {
color: gray;
flex-shrink: 0;
}
.draft {
color: red;
flex-shrink: 0;
@@ -227,6 +274,8 @@ const showSomeoneCard = () => {
}
.action {
display: flex;
.action-button {
width: 20px;
height: 20px;

2
src/components/message/SessionTag.vue
View File

@@ -5,7 +5,7 @@ const items = {
team: { color: '#67C23A', label: '团' },
organize: { color: '#E6A23C', label: '组' },
assistant: { color: '#E734F5', label: '助' },
pinToTop: { color: '#F56C6C', label: '顶' },
top: { color: '#F56C6C', label: '顶' },
mute: { color: '#73767a', label: '静' }
}

56
src/stores/message.js
View File

@@ -5,51 +5,35 @@ import { ref } from 'vue'
export const messageStore = defineStore(
'anyim-message',
() => {
const last = ref({
lastSessionId: '',
lastSessionType: '',
lastObject: {}
})
const lastSessionId = ref()
const msgRecords = ref({})
const sessionList = ref({})
const setLast = ({ sessionId, sessionType, objectInfo }) => {
last.value = {
lastSessionId: sessionId ? sessionId : last.value.lastSessionId,
lastSessionType: sessionType ? sessionType : last.value.lastSessionType,
lastObject: objectInfo ? objectInfo : last.value.lastObject
}
const setLastSessionId = (sessionId) => {
lastSessionId.value = sessionId
}
const addMsgRecord = (sessionId, { msgId, fromId, msgType, msgTime, content }) => {
if (!msgRecords.value[sessionId]) {
// 如果这个sessionId还没有数据，直接赋值成一个元素的数组
msgRecords.value[sessionId] = [
{
msgId: msgId,
fromId: fromId,
msgType: msgType,
msgTime: msgTime,
content: content
}
]
const setSessionList = (sessions) => {
sessionList.value = sessions
}
const updateSession = (session) => {
if (sessionList.value[session.sessionId]) {
sessionList.value[session.sessionId] = session
} else {
// 如果这个sessionId有数据，在原有数组基础上追加
msgRecords.value[sessionId].push({
msgId: msgId,
fromId: fromId,
msgType: msgType,
msgTime: msgTime,
content: content
})
sessionList.value = {
...sessionList.value,
[session.sessionId]: session
}
}
}
return {
last,
setLast,
msgRecords,
addMsgRecord
lastSessionId,
sessionList,
setLastSessionId,
setSessionList,
updateSession
}
},
{

150
src/views/message/MessageLayout.vue
View File

@@ -23,7 +23,7 @@ import InputEditor from '@/components/message/InputEditor.vue'
import MessageItem from '@/components/message/MessageItem.vue'
import { userStore, settingStore, messageStore } from '@/stores'
import backgroupImage from '@/assets/messagebx_bg.webp'
import { msgChatSessionListService } from '@/api/message'
import { msgChatSessionListService, msgUpdateSessionService, msgChatPullMsgService } from '@/api/message'
import { MsgType } from '@/proto/msg'
import wsConnect from '@/js/websocket/wsConnect'
@@ -39,19 +39,10 @@ const inputBoxHeight = ref(0)
const inputBoxHeightMin = 150
const inputBoxHeightMax = 400
const curSessionId = ref('')
const curSessionType = ref('')
const curObject = ref({})
const sessionList = ref([])
const sessionRecords = computed(() => {
const records = messageData.msgRecords[curSessionId.value]
if (records) {
return records.sort((a, b) => a.msgId - b.msgId)
}
else {
return []
}
})
const sessionList = ref({})
const choosedSessionId = ref()
const choosedSession = ref({})
const msgRecords = ref([])
const isShowTopLoading = ref(true)
const isTopLoading = ref(false)
@@ -63,36 +54,48 @@ const loadCursor = computed(() => {
const msgListDiv = ref()
onMounted(async () => {
curSessionId.value = messageData.last.lastSessionId
curSessionType.value = messageData.last.lastSessionType
curObject.value = messageData.last.lastObject
asideWidth.value = settingData.sessionListDrag[userData.user.account] || 200
inputBoxHeight.value = settingData.inputBoxDrag[userData.user.account] || 200
const res = await msgChatSessionListService()
sessionList.value = sessionList.value.concat(res.data.data)
messageData.setSessionList(res.data.data) //入缓存
sessionList.value = messageData.sessionList
choosedSessionId.value = messageData.lastSessionId
msgListDiv.value.scrollTop = msgListDiv.value.scrollHeight
if (msgListDiv.value) {
// 首次进到消息页面，不会有有值
msgListDiv.value.scrollTop = msgListDiv.value.scrollHeight
}
})
// 把sessionList转成数组，并按照lastMsgTime排序
const sessionListSorted = computed(() => {
if (!sessionList.value) {
return []
}
else {
let sessionArr = Object.values(sessionList.value)
return sessionArr.sort((a, b) => b.lastMsgTime - a.lastMsgTime)
}
})
const showName = computed(() => {
switch (curSessionType.value) {
switch (choosedSession.value.sessionType) {
case MsgType.CHAT:
return curObject.value.nickName
return choosedSession.value.objectInfo.nickName
case MsgType.GROUP_CHAT:
return curObject.value.groupName
return choosedSession.value.objectInfo.groupName
default:
return ''
}
})
const showId = computed(() => {
switch (curSessionType.value) {
switch (choosedSession.value.sessionType) {
case MsgType.CHAT:
return curObject.value.account
return choosedSession.value.objectInfo.account
case MsgType.GROUP_CHAT:
return curObject.value.groupId
return choosedSession.value.objectInfo.groupId
default:
return ''
}
@@ -100,7 +103,7 @@ const showId = computed(() => {
const getLastMsgTime = (index) => {
if (index > 0) {
return sessionRecords.value[index - 1].msgTime;
return msgRecords.value[index - 1].msgTime;
} else {
return null;
}
@@ -123,30 +126,26 @@ const onInputBoxDragUpdate = ({ height }) => {
})
}
const handleExportData = (data) => {
curSessionId.value = data.sessionId
curSessionType.value = data.sessionType
curObject.value = data.objectInfo
messageData.setLast({
sessionId: data.sessionId,
sessionType: data.sessionType,
objectInfo: data.objectInfo
})
const handleBeChoosed = (session) => {
choosedSessionId.value = session.sessionId // sessionId变化会引发watch
}
const handleSwitchTag = (obj) => {
msgUpdateSessionService(obj)
}
// 发送事件要做的事情
const handleExportContent = (content) => {
// TODO 这里还要考虑失败情况：1）消息发不出去；2）消息发出去了，服务器不发“已发送”
wsConnect.sendMsg(showId.value, curSessionType.value, content, (deliveredMsg) => {
messageData.addMsgRecord(curSessionId.value, {
wsConnect.sendMsg(showId.value, choosedSession.value.sessionType, content, (deliveredMsg) => {
messageData.addRecord(choosedSessionId.value, {
msgId: deliveredMsg.body.msgId,
fromId: userData.user.account,
msgType: curSessionType.value,
msgType: choosedSession.value.sessionType,
msgTime: new Date(),
content: content
})
})
}
const onLoadMore = () => {
@@ -154,10 +153,52 @@ const onLoadMore = () => {
loadMoreTips.value = ''
}
watch(() => messageData.msgRecords[curSessionId.value], () => {
// watch到哪个，表示哪个会话被选中
watch(choosedSessionId, (newValue, oldValue) => {
console.log('====>111: ', newValue, oldValue)
messageData.setLastSessionId(newValue)
choosedSession.value = sessionList.value[newValue]
msgChatPullMsgService({
sessionId: choosedSessionId.value,
lastMsgId: sessionList.value[choosedSessionId.value].readMsgId,
lastPullTime: sessionList.value[choosedSessionId.value].readTime,
pageSize: 20
})
.then((res) => {
msgRecords.value = res.data.data.msgList
if (res.data.data.lastMsgId > choosedSession.value.readMsgId) {
const now = new Date()
choosedSession.value.readMsgId = res.data.data.lastMsgId
choosedSession.value.readTime = now
choosedSession.value.unreadCount = 0;
msgUpdateSessionService({
sessionId: choosedSessionId.value,
readMsgId: res.data.data.lastMsgId,
readTime: now })
}
})
})
watch(msgRecords, () => {
if (msgRecords.value) {
msgRecords.value = msgRecords.value.sort((a, b) => a.msgId - b.msgId)
}
msgListReachBottom()
}, {deep: true})
watch(() => messageData.sessionRecordsSize, async () => {
// TODO 这里还要检查messageData中的sessionId是否都在sessionList中
// 如果有不在的，要直接刷新sessionList
// if (xxx)
// const res = await msgChatSessionListService()
// sessionList.value = sessionList.value.concat(res.data.data)
}, {deep: true})
const msgListReachBottom = () => {
nextTick(() => {
msgListDiv.value.scrollTo({
@@ -180,12 +221,12 @@ const msgListReachBottom = () => {
<div class="session-list my-scrollbar">
<SessionBox
v-for="item in sessionList"
v-for="item in sessionListSorted"
:key="item.sessionId"
:objectInfo="item.objectInfo"
:sessionId="item.sessionId"
:sessionType="item.sessionType"
@exportData="handleExportData"
:sesionInfo="item"
:choosedSessionId="choosedSessionId"
@beChoosed="handleBeChoosed"
@switchTag="handleSwitchTag"
></SessionBox>
</div>
</div>
@@ -202,7 +243,7 @@ const msgListReachBottom = () => {
<el-main class="msg-box">
<el-image
class="backgroup-image"
v-if="!curSessionId"
v-if="!choosedSessionId"
:src="backgroupImage"
fit="cover"
></el-image>
@@ -211,7 +252,9 @@ const msgListReachBottom = () => {
<el-header class="header bdr-b">
<div class="show-name-id">
<span class="show-name">{{ showName }}</span>
<span v-if="curSessionType === MsgType.CHAT" class="show-id">{{ showId }}</span>
<span v-if="choosedSession.sessionType === MsgType.CHAT" class="show-id">{{
showId
}}</span>
</div>
<div class="action-set">
@@ -238,10 +281,10 @@ const msgListReachBottom = () => {
<div class="message-main">
<span class="no-more-message">当前无更多消息</span>
<MessageItem
v-for="(item, index) in sessionRecords"
v-for="(item, index) in msgRecords"
:key="index"
:msg="item"
:obj="curObject"
:obj="choosedSession.objectInfo"
:lastMsgTime="getLastMsgTime(index)"
></MessageItem>
</div>
@@ -294,7 +337,10 @@ const msgListReachBottom = () => {
</div>
</el-header>
<el-main class="input-box-main">
<InputEditor @exportContent="handleExportContent"></InputEditor>
<InputEditor
:sessionInfo="choosedSession"
@exportContent="handleExportContent"
></InputEditor>
</el-main>
</el-container>
</div>