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 = () => {
           <el-container class="message-content-wrapper">
             <el-header class="message-time">{{ msgTime }}</el-header>
             <el-main class="message-content">
-              <div class="div-blank"></div>
+              <div :class="{ remote_read: myMsgIsRead, remote_unread: !myMsgIsRead }"></div>
               <div class="div-content">{{ props.msg.content }}</div>
             </el-main>
           </el-container>
@@ -154,7 +160,6 @@ const onShowUserCard = () => {
             <el-header class="message-time">{{ msgTime }}</el-header>
             <el-main class="message-content">
               <div class="div-content">{{ props.msg.content }}</div>
-              <div class="div-blank"></div>
             </el-main>
           </el-container>
         </el-main>
@@ -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"