diff --git a/src/js/websocket/constructor.js b/src/js/websocket/constructor.js
index 87f5db6..4c7c3e0 100644
--- a/src/js/websocket/constructor.js
+++ b/src/js/websocket/constructor.js
@@ -26,6 +26,29 @@ export const chatConstructor = (toId, content, tempMsgId) => {
   return data
 }
 
+export const groupChatConstructor = (groupId, content, tempMsgId) => {
+  const header = Header.create({
+    magic: proto.magic,
+    version: proto.version,
+    msgType: MsgType.GROUP_CHAT,
+    isExtension: false
+  })
+
+  const userData = userStore()
+  const body = Body.create({
+    fromId: userData.user.account,
+    fromClient: userData.clientId,
+    groupId: groupId,
+    content: content,
+    tempMsgId: tempMsgId
+  })
+  const msg = Msg.create({ header: header, body: body })
+  const payload = Msg.encode(msg).finish()
+  const data = encodePayload(payload)
+
+  return data
+}
+
 export const heartBeatConstructor = () => {
   const header = Header.create({
     magic: proto.magic,
diff --git a/src/js/websocket/wsConnect.js b/src/js/websocket/wsConnect.js
index 17ee6dd..13dd1cb 100644
--- a/src/js/websocket/wsConnect.js
+++ b/src/js/websocket/wsConnect.js
@@ -8,7 +8,8 @@ import {
   helloConstructor,
   chatReadConstructor,
   statusReqConstructor,
-  statusSyncConstructor
+  statusSyncConstructor,
+  groupChatConstructor
 } from './constructor'
 import { onReceiveStatusResMsg } from '@/js/event'
 
@@ -113,6 +114,7 @@ class WsConnect {
     [MsgType.HEART_BEAT]: heartBeatConstructor,
     [MsgType.CHAT]: chatConstructor,
     [MsgType.CHAT_READ]: chatReadConstructor,
+    [MsgType.GROUP_CHAT]: groupChatConstructor,
     [MsgType.STATUS_REQ]: statusReqConstructor,
     [MsgType.STATUS_SYNC]: statusSyncConstructor
   }
diff --git a/src/views/message/MessageLayout.vue b/src/views/message/MessageLayout.vue
index 9e5687e..db5475d 100644
--- a/src/views/message/MessageLayout.vue
+++ b/src/views/message/MessageLayout.vue
@@ -266,6 +266,18 @@ const getPreMsgTime = (index) => {
   }
 }
 
+const getMsgSenderObj = (item) => {
+  if (selectedSession.value.sessionType === MsgType.GROUP_CHAT) {
+    return groupData.groupMembersList[selectedSession.value.objectInfo.groupId][item.fromId]
+  } else {
+    if (userData.user.account === item.fromId) {
+      return userData.user
+    } else {
+      return selectedSession.value.objectInfo
+    }
+  }
+}
+
 const lastReadMsgId = ref()
 /**
  * 判断是否是打开session后的第一条未读消息
@@ -364,6 +376,19 @@ const handleSelectedSession = async (sessionId) => {
     initSession(sessionId)
     locateSession(sessionId)
 
+    // 如果是群组，要加载成员列表（显示消息需要account，nickName，avatar信息）
+    if (selectedSession.value.sessionType === MsgType.GROUP_CHAT) {
+      const groupId = selectedSession.value.objectInfo.groupId
+      // 没有members数据才需要加载成员列表，加载过了就不重复加载了
+      if (!groupData.groupMembersList[groupId]) {
+        const res = await groupInfoService({ groupId: groupId })
+        groupData.setGroupMembers({
+          groupId: groupId,
+          members: res.data.data.members
+        })
+      }
+    }
+
     // 如果切换到的session在之前都没有pull过消息,则需要pull一次(mode=0),且lastMsgId有值才pull
     if (!msgRecords.value && selectedSession.value.lastMsgId) {
       await pullMsg()
@@ -771,7 +796,7 @@ const onMoreSetting = () => {
                 :key="index"
                 :sessionId="selectedSessionId"
                 :msg="item"
-                :obj="selectedSession.objectInfo"
+                :obj="getMsgSenderObj(item)"
                 :readMsgId="selectedSession.readMsgId"
                 :remoteRead="selectedSession.remoteRead"
                 :preMsgTime="getPreMsgTime(index)"
diff --git a/src/views/message/components/MessageItem.vue b/src/views/message/components/MessageItem.vue
index 7628e9a..529cc6a 100644
--- a/src/views/message/components/MessageItem.vue
+++ b/src/views/message/components/MessageItem.vue
@@ -20,6 +20,11 @@ const props = defineProps([
 const emit = defineEmits(['loadMore', 'showUserCard'])
 
 const userData = userStore()
+
+const isChatMsgType = computed(() => {
+  return props.msg.msgType === MsgType.CHAT
+})
+
 const loadMoreTips = computed(() => {
   return props.isLoadMoreLoading ? '' : '查看更多消息'
 })
@@ -55,15 +60,15 @@ const isSelf = computed(() => {
 })
 
 const account = computed(() => {
-  return isSelf.value ? userData.user.account : props.obj.account
+  return props.obj.account
 })
 
 const nickName = computed(() => {
-  return isSelf.value ? userData.user.nickName : props.obj.nickName
+  return props.obj.nickName
 })
 
 const avatarThumb = computed(() => {
-  return isSelf.value ? userData.user.avatarThumb : props.obj.avatarThumb
+  return props.obj.avatarThumb
 })
 
 const sysShowTime = computed(() => {
@@ -98,11 +103,7 @@ const onShowUserCard = () => {
 </script>
 
 <template>
-  <div
-    v-if="props.msg.msgType === MsgType.CHAT"
-    class="message-item"
-    :class="{ unreadMsg: isUnreadMsg }"
-  >
+  <div class="message-item" :class="{ unreadMsg: isUnreadMsg }">
     <span v-if="isShowNoMoreMsg" class="no-more-message">当前无更多消息</span>
     <div v-if="isShowLoadMore" class="load-more-wrapper">
       <div
@@ -124,7 +125,10 @@ const onShowUserCard = () => {
           <el-container class="message-content-wrapper">
             <el-header class="message-time">{{ msgTime }}</el-header>
             <el-main class="message-content">
-              <div :class="{ remote_read: myMsgIsRead, remote_unread: !myMsgIsRead }"></div>
+              <div
+                v-if="isChatMsgType"
+                :class="{ remote_read: myMsgIsRead, remote_unread: !myMsgIsRead }"
+              ></div>
               <div class="div-content">{{ props.msg.content }}</div>
             </el-main>
           </el-container>