From 9bc97be665ec8b7889f1aa8d3d59dede0a1cfee1 Mon Sep 17 00:00:00 2001
From: bob <312777916@qq.com>
Date: Sun, 29 Sep 2024 17:59:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=B6=88=E6=81=AF=E4=BB=8E?=
=?UTF-8?q?=E6=9C=AA=E8=AF=BB=E5=88=B0=E5=B7=B2=E8=AF=BB=20=E7=9A=84?=
=?UTF-8?q?=E5=8F=98=E8=89=B2=E6=8F=90=E9=86=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/message/MessageItem.vue | 43 ++++++++++++++++++++------
src/js/event/index.js | 1 +
src/js/event/receiveChatReadMsg.js | 13 ++++++++
src/js/websocket/wsConnect.js | 4 +--
src/stores/message.js | 1 +
src/views/message/MessageLayout.vue | 5 +--
6 files changed, 53 insertions(+), 14 deletions(-)
create mode 100644 src/js/event/receiveChatReadMsg.js
diff --git a/src/components/message/MessageItem.vue b/src/components/message/MessageItem.vue
index 0b80738..b25b833 100644
--- a/src/components/message/MessageItem.vue
+++ b/src/components/message/MessageItem.vue
@@ -9,6 +9,7 @@ const props = defineProps([
'msg',
'obj',
'readMsgId',
+ 'remoteRead',
'lastMsgTime',
'firstMsgId',
'isFirstNew',
@@ -26,6 +27,11 @@ const loadMoreTips = computed(() => {
const isUnreadMsg = computed(() => {
return props.readMsgId < props.msg.msgId && !isSelf.value
})
+
+const myMsgIsRead = computed(() => {
+ return isSelf.value && props.msg.msgId <= props.remoteRead
+})
+
const isShowLoadMore = computed(() => {
if (props.msg.msgId === props.firstMsgId && !props.hasNoMoreMsg) {
return true
@@ -123,7 +129,7 @@ const onShowUserCard = () => {
{{ msgTime }}
-
+
{{ props.msg.content }}
@@ -154,7 +160,6 @@ const onShowUserCard = () => {
{{ msgTime }}
{{ props.msg.content }}
-
@@ -262,10 +267,11 @@ const onShowUserCard = () => {
margin-top: 5px;
padding: 0;
display: flex;
+ justify-content: right;
.div-content {
max-width: 500px;
- padding: 5px;
+ padding: 8px;
font-size: 14px;
background-color: #c6e2ff;
border-radius: 10px;
@@ -273,8 +279,28 @@ const onShowUserCard = () => {
user-select: text;
}
- .div-blank {
- flex: 1;
+ .remote_read {
+ margin-right: 5px;
+ display: flex;
+ align-items: end;
+
+ &::before {
+ content: '●';
+ font-size: 10px;
+ color: #95d475;
+ }
+ }
+
+ .remote_unread {
+ margin-right: 5px;
+ display: flex;
+ align-items: end;
+
+ &::before {
+ content: '●';
+ font-size: 10px;
+ color: #eebe77;
+ }
}
}
}
@@ -309,20 +335,17 @@ const onShowUserCard = () => {
margin-top: 5px;
padding: 0;
display: flex;
+ justify-content: left;
.div-content {
max-width: 500px;
- padding: 5px;
+ padding: 8px;
font-size: 14px;
background-color: #dedfe0;
border-radius: 10px;
border-top-left-radius: 0;
user-select: text;
}
-
- .div-blank {
- flex: 1;
- }
}
}
}
diff --git a/src/js/event/index.js b/src/js/event/index.js
index 7eeefe1..304d8c4 100644
--- a/src/js/event/index.js
+++ b/src/js/event/index.js
@@ -1 +1,2 @@
export * from './receiveChatMsg'
+export * from './receiveChatReadMsg'
diff --git a/src/js/event/receiveChatReadMsg.js b/src/js/event/receiveChatReadMsg.js
new file mode 100644
index 0000000..69148bd
--- /dev/null
+++ b/src/js/event/receiveChatReadMsg.js
@@ -0,0 +1,13 @@
+import { combineId } from '@/utils/common'
+import { messageStore } from '@/stores'
+
+export const onReceiveChatReadMsg = () => {
+ return async (msg) => {
+ const messageData = messageStore()
+ const sessionId = combineId(msg.body.fromId, msg.body.toId)
+ messageData.updateSession({
+ sessionId: sessionId,
+ remoteRead: msg.body.content
+ })
+ }
+}
diff --git a/src/js/websocket/wsConnect.js b/src/js/websocket/wsConnect.js
index b954867..4db3ba7 100644
--- a/src/js/websocket/wsConnect.js
+++ b/src/js/websocket/wsConnect.js
@@ -159,13 +159,13 @@ class WsConnect {
}
async onMessage(evt) {
- console.log('onMessage', evt)
+ // console.log('onMessage', evt)
const arrayBuffer = await evt.data.arrayBuffer()
const frames = this.decode(new Uint8Array(arrayBuffer))
frames.forEach((frame) => {
const msg = Msg.decode(frame)
- console.log(`receive a ${MsgType[msg.header.msgType]} msg: `, msg)
+ // console.log(`receive a ${MsgType[msg.header.msgType]} msg: `, msg)
if (this.events[msg.header.msgType]) this.events[msg.header.msgType](msg)
})
}
diff --git a/src/stores/message.js b/src/stores/message.js
index 90eb25f..1525ef6 100644
--- a/src/stores/message.js
+++ b/src/stores/message.js
@@ -45,6 +45,7 @@ export const messageStore = defineStore('anyim-message', () => {
if ('lastMsgContent' in obj) mySession.lastMsgContent = obj.lastMsgContent
if ('lastMsgTime' in obj) mySession.lastMsgTime = obj.lastMsgTime
if ('unreadCount' in obj) mySession.unreadCount = obj.unreadCount
+ if ('remoteRead' in obj) mySession.remoteRead = obj.remoteRead
if ('top' in obj) mySession.top = obj.top
if ('muted' in obj) mySession.muted = obj.muted
if ('draft' in obj) mySession.draft = obj.draft
diff --git a/src/views/message/MessageLayout.vue b/src/views/message/MessageLayout.vue
index b2d422d..682b660 100644
--- a/src/views/message/MessageLayout.vue
+++ b/src/views/message/MessageLayout.vue
@@ -28,7 +28,7 @@ import backgroupImage from '@/assets/messagebx_bg.webp'
import { msgChatSessionListService, msgChatPullMsgService } from '@/api/message'
import { MsgType } from '@/proto/msg'
import wsConnect from '@/js/websocket/wsConnect'
-import { onReceiveChatMsg } from '@/js/event'
+import { onReceiveChatMsg, onReceiveChatReadMsg } from '@/js/event'
const userData = userStore()
const settingData = settingStore()
@@ -93,6 +93,7 @@ onMounted(async () => {
const res = await msgChatSessionListService()
messageData.setSessionList(res.data.data) //入缓存
wsConnect.bindEvent(MsgType.CHAT, onReceiveChatMsg(msgListDiv, capacity)) //绑定接收Chat消息的事件
+ wsConnect.bindEvent(MsgType.CHAT_READ, onReceiveChatReadMsg()) //绑定接收Chat已读消息的事件
})
onUnmounted(() => {
@@ -455,7 +456,7 @@ watch(() => msgRecords.value, (oldValue) => {
:key="index"
:msg="item"
:obj="choosedSession.objectInfo"
- :readMsgId="choosedSession.readMsgId"
+ :remoteRead="choosedSession.remoteRead"
:lastMsgTime="getLastMsgTime(index)"
:isFirstNew="isFirstNew(index)"
:firstMsgId="firstMsgId"