消息撤回优化，支持离线撤回

im-platform/src/main/java/com/bx/implatform/controller/GroupMessageController.java

@@ -30,9 +30,8 @@ public class GroupMessageController {
 
     @DeleteMapping("/recall/{id}")
     @Operation(summary = "撤回消息", description = "撤回群聊消息")
-    public Result<Long> recallMessage(@NotNull(message = "消息id不能为空") @PathVariable Long id) {
-        groupMessageService.recallMessage(id);
-        return ResultUtils.success();
+    public Result<GroupMessageVO> recallMessage(@NotNull(message = "消息id不能为空") @PathVariable Long id) {
+        return ResultUtils.success(groupMessageService.recallMessage(id));
     }
 
     @GetMapping("/pullOfflineMessage")

im-platform/src/main/java/com/bx/implatform/controller/PrivateMessageController.java

@@ -30,9 +30,8 @@ public class PrivateMessageController {
 
     @DeleteMapping("/recall/{id}")
     @Operation(summary = "撤回消息", description = "撤回私聊消息")
-    public Result<Long> recallMessage(@NotNull(message = "消息id不能为空") @PathVariable Long id) {
-        privateMessageService.recallMessage(id);
-        return ResultUtils.success();
+    public Result<PrivateMessageVO> recallMessage(@NotNull(message = "消息id不能为空") @PathVariable Long id) {
+        return ResultUtils.success( privateMessageService.recallMessage(id));
     }
 
     @GetMapping("/pullOfflineMessage")

im-platform/src/main/java/com/bx/implatform/service/GroupMessageService.java

@@ -22,7 +22,7 @@ public interface GroupMessageService extends IService<GroupMessage> {
      *
      * @param id 消息id
      */
-    void recallMessage(Long id);
+    GroupMessageVO recallMessage(Long id);
 
     /**
      * 拉取离线消息，只能拉取最近1个月的消息，最多拉取1000条

im-platform/src/main/java/com/bx/implatform/service/PrivateMessageService.java

@@ -23,7 +23,7 @@ public interface PrivateMessageService extends IService<PrivateMessage> {
      *
      * @param id 消息id
      */
-    void recallMessage(Long id);
+    PrivateMessageVO recallMessage(Long id);
 
     /**
      * 拉取历史聊天记录

im-platform/src/main/java/com/bx/implatform/service/impl/GroupMessageServiceImpl.java

@@ -38,6 +38,7 @@ import org.apache.commons.lang3.StringUtils;
 import org.apache.commons.lang3.time.DateUtils;
 import org.springframework.data.redis.core.RedisTemplate;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
 import java.util.*;
 import java.util.concurrent.atomic.AtomicInteger;
@@ -92,8 +93,9 @@ public class GroupMessageServiceImpl extends ServiceImpl<GroupMessageMapper, Gro
         return msgInfo;
     }
 
+    @Transactional
     @Override
-    public void recallMessage(Long id) {
+    public GroupMessageVO recallMessage(Long id) {
         UserSession session = SessionContext.getSession();
         GroupMessage msg = this.getById(id);
         if (Objects.isNull(msg)) {
@@ -113,31 +115,26 @@ public class GroupMessageServiceImpl extends ServiceImpl<GroupMessageMapper, Gro
         // 修改数据库
         msg.setStatus(MessageStatus.RECALL.code());
         this.updateById(msg);
+        // 生成一条撤回消息
+        GroupMessage recallMsg = new GroupMessage();
+        recallMsg.setStatus(MessageStatus.UNSEND.code());
+        recallMsg.setType(MessageType.RECALL.code());
+        recallMsg.setGroupId(msg.getGroupId());
+        recallMsg.setSendId(session.getUserId());
+        recallMsg.setSendNickName(member.getShowNickName());
+        recallMsg.setContent(id.toString());
+        recallMsg.setSendTime(new Date());
+        this.save(recallMsg);
         // 群发
         List<Long> userIds = groupMemberService.findUserIdsByGroupId(msg.getGroupId());
-        // 不用发给自己
-        userIds = userIds.stream().filter(uid -> !session.getUserId().equals(uid)).collect(Collectors.toList());
-        GroupMessageVO msgInfo = BeanUtils.copyProperties(msg, GroupMessageVO.class);
-        msgInfo.setType(MessageType.RECALL.code());
-        String content = String.format("'%s'撤回了一条消息", member.getShowNickName());
-        msgInfo.setContent(content);
-        msgInfo.setSendTime(new Date());
-
+        GroupMessageVO msgInfo = BeanUtils.copyProperties(recallMsg, GroupMessageVO.class);
         IMGroupMessage<GroupMessageVO> sendMessage = new IMGroupMessage<>();
         sendMessage.setSender(new IMUserInfo(session.getUserId(), session.getTerminal()));
         sendMessage.setRecvIds(userIds);
         sendMessage.setData(msgInfo);
-        sendMessage.setSendResult(false);
-        sendMessage.setSendToSelf(false);
-        imClient.sendGroupMessage(sendMessage);
-
-        // 推给自己其他终端
-        msgInfo.setContent("你撤回了一条消息");
-        sendMessage.setSendToSelf(true);
-        sendMessage.setRecvIds(Collections.emptyList());
-        sendMessage.setRecvTerminals(Collections.emptyList());
         imClient.sendGroupMessage(sendMessage);
         log.info("撤回群聊消息，发送id:{},群聊id:{},内容:{}", session.getUserId(), msg.getGroupId(), msg.getContent());
+        return msgInfo;
     }
 
 
@@ -165,7 +162,6 @@ public class GroupMessageServiceImpl extends ServiceImpl<GroupMessageMapper, Gro
         wrapper.gt(GroupMessage::getId, minId)
             .gt(GroupMessage::getSendTime, minDate)
             .in(GroupMessage::getGroupId, groupIds)
-            .ne(GroupMessage::getStatus, MessageStatus.RECALL.code())
             .orderByAsc(GroupMessage::getId);
         List<GroupMessage> messages = this.list(wrapper);
         // 通过群聊对消息进行分组

im-platform/src/main/java/com/bx/implatform/service/impl/PrivateMessageServiceImpl.java

@@ -74,8 +74,9 @@ public class PrivateMessageServiceImpl extends ServiceImpl<PrivateMessageMapper,
         return msgInfo;
     }
 
+    @Transactional
     @Override
-    public void recallMessage(Long id) {
+    public PrivateMessageVO recallMessage(Long id) {
         UserSession session = SessionContext.getSession();
         PrivateMessage msg = this.getById(id);
         if (Objects.isNull(msg)) {
@@ -90,26 +91,24 @@ public class PrivateMessageServiceImpl extends ServiceImpl<PrivateMessageMapper,
         // 修改消息状态
         msg.setStatus(MessageStatus.RECALL.code());
         this.updateById(msg);
+        // 生成一条撤回消息
+        PrivateMessage recallMsg = new PrivateMessage();
+        recallMsg.setSendId(session.getUserId());
+        recallMsg.setStatus(MessageStatus.UNSEND.code());
+        recallMsg.setSendTime(new Date());
+        recallMsg.setRecvId(msg.getRecvId());
+        recallMsg.setType(MessageType.RECALL.code());
+        recallMsg.setContent(id.toString());
+        this.save(recallMsg);
         // 推送消息
-        PrivateMessageVO msgInfo = BeanUtils.copyProperties(msg, PrivateMessageVO.class);
-        msgInfo.setType(MessageType.RECALL.code());
-        msgInfo.setSendTime(new Date());
-        msgInfo.setContent("对方撤回了一条消息");
-
+        PrivateMessageVO msgInfo = BeanUtils.copyProperties(recallMsg, PrivateMessageVO.class);
         IMPrivateMessage<PrivateMessageVO> sendMessage = new IMPrivateMessage<>();
         sendMessage.setSender(new IMUserInfo(session.getUserId(), session.getTerminal()));
         sendMessage.setRecvId(msgInfo.getRecvId());
-        sendMessage.setSendToSelf(false);
         sendMessage.setData(msgInfo);
-        sendMessage.setSendResult(false);
-        imClient.sendPrivateMessage(sendMessage);
-
-        // 推给自己其他终端
-        msgInfo.setContent("你撤回了一条消息");
-        sendMessage.setSendToSelf(true);
-        sendMessage.setRecvTerminals(Collections.emptyList());
         imClient.sendPrivateMessage(sendMessage);
         log.info("撤回私聊消息，发送id:{},接收id:{}，内容:{}", msg.getSendId(), msg.getRecvId(), msg.getContent());
+        return msgInfo;
     }
 
     @Override
@@ -154,8 +153,7 @@ public class PrivateMessageServiceImpl extends ServiceImpl<PrivateMessageMapper,
         // 只能拉取最近3个月的消息,移动端只拉取一个月消息
         int months = session.getTerminal().equals(IMTerminalType.APP.code()) ? 1 : 3;
         Date minDate = DateUtils.addMonths(new Date(), -months);
-        queryWrapper.gt(PrivateMessage::getId, minId).ge(PrivateMessage::getSendTime, minDate)
-            .ne(PrivateMessage::getStatus, MessageStatus.RECALL.code()).and(wrap -> wrap.and(
+        queryWrapper.gt(PrivateMessage::getId, minId).ge(PrivateMessage::getSendTime, minDate).and(wrap -> wrap.and(
                     wp -> wp.eq(PrivateMessage::getSendId, session.getUserId()).in(PrivateMessage::getRecvId, friendIds))
                 .or(wp -> wp.eq(PrivateMessage::getRecvId, session.getUserId()).in(PrivateMessage::getSendId, friendIds)))
             .orderByAsc(PrivateMessage::getId);

im-uniapp/App.vue

@@ -107,6 +107,15 @@ export default {
 			})
 		},
 		handlePrivateMessage(msg) {
+			// 标记这条消息是不是自己发的
+			msg.selfSend = msg.sendId == this.userStore.userInfo.id;
+			// 好友id
+			let friendId = msg.selfSend ? msg.recvId : msg.sendId;
+			// 会话信息
+			let chatInfo = {
+				type: 'PRIVATE',
+				targetId: friendId
+			}
 			// 消息加载标志
 			if (msg.type == enums.MESSAGE_TYPE.LOADING) {
 				this.chatStore.setLoadingPrivateMsg(JSON.parse(msg.content))
@@ -114,10 +123,7 @@ export default {
 			}
 			// 消息已读处理，清空已读数量
 			if (msg.type == enums.MESSAGE_TYPE.READED) {
-				this.chatStore.resetUnreadCount({
-					type: 'PRIVATE',
-					targetId: msg.recvId
-				})
+				this.chatStore.resetUnreadCount(chatInfo);
 				return;
 			}
 			// 消息回执处理,改消息状态为已读
@@ -127,10 +133,12 @@ export default {
 				})
 				return;
 			}
-			// 标记这条消息是不是自己发的
-			msg.selfSend = msg.sendId == this.userStore.userInfo.id;
-			// 好友id
-			let friendId = msg.selfSend ? msg.recvId : msg.sendId;
+			// 消息撤回
+			if (msg.type == enums.MESSAGE_TYPE.RECALL) {
+				this.chatStore.recallMessage(msg, chatInfo);
+				return;
+			}
+			// 消息插入
 			this.loadFriendInfo(friendId, (friend) => {
 				this.insertPrivateMessage(friend, msg);
 			})
@@ -177,6 +185,12 @@ export default {
 
 		},
 		handleGroupMessage(msg) {
+			// 标记这条消息是不是自己发的
+			msg.selfSend = msg.sendId == this.userStore.userInfo.id;
+			let chatInfo = {
+				type: 'GROUP',
+				targetId: msg.groupId
+			}
 			// 消息加载标志
 			if (msg.type == enums.MESSAGE_TYPE.LOADING) {
 				this.chatStore.setLoadingGroupMsg(JSON.parse(msg.content))
@@ -185,19 +199,11 @@ export default {
 			// 消息已读处理
 			if (msg.type == enums.MESSAGE_TYPE.READED) {
 				// 我已读对方的消息，清空已读数量
-				let chatInfo = {
-					type: 'GROUP',
-					targetId: msg.groupId
-				}
 				this.chatStore.resetUnreadCount(chatInfo)
 				return;
 			}
 			// 消息回执处理
 			if (msg.type == enums.MESSAGE_TYPE.RECEIPT) {
-				let chatInfo = {
-					type: 'GROUP',
-					targetId: msg.groupId
-				}
 				// 更新消息已读人数
 				let msgInfo = {
 					id: msg.id,
@@ -205,11 +211,14 @@ export default {
 					readedCount: msg.readedCount,
 					receiptOk: msg.receiptOk
 				};
-				this.chatStore.updateMessage(msgInfo,chatInfo)
+				this.chatStore.updateMessage(msgInfo, chatInfo)
+				return;
+			}
+			// 消息撤回
+			if (msg.type == this.$enums.MESSAGE_TYPE.RECALL) {
+				this.chatStore.recallMessage(msg, chatInfo)
 				return;
 			}
-			// 标记这条消息是不是自己发的
-			msg.selfSend = msg.sendId == this.userStore.userInfo.id;
 			this.loadGroupInfo(msg.groupId, (group) => {
 				// 插入群聊消息
 				this.insertGroupMessage(group, msg);

im-uniapp/components/chat-message-item/chat-message-item.vue

@@ -1,13 +1,12 @@
 <template>
 	<view class="chat-msg-item">
-		<view class="chat-msg-tip"
-			v-if="msgInfo.type == $enums.MESSAGE_TYPE.RECALL || msgInfo.type == $enums.MESSAGE_TYPE.TIP_TEXT">
+		<view class="chat-msg-tip" v-if="msgInfo.type == $enums.MESSAGE_TYPE.TIP_TEXT">
 			{{ msgInfo.content }}
 		</view>
-		<view class="chat-msg-tip" v-if="msgInfo.type == $enums.MESSAGE_TYPE.TIP_TIME">
+		<view class="chat-msg-tip" v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.TIP_TIME">
 			{{ $date.toTimeText(msgInfo.sendTime) }}
 		</view>
-		<view class="chat-msg-normal" v-if="isNormal" :class="{ 'chat-msg-mine': msgInfo.selfSend }">
+		<view class="chat-msg-normal" v-else-if="isNormal" :class="{ 'chat-msg-mine': msgInfo.selfSend }">
 			<head-image class="avatar" @longpress.prevent="$emit('longPressHead')" :id="msgInfo.sendId" :url="headImage"
 				:name="showName" size="small"></head-image>
 			<view class="chat-msg-content">

im-uniapp/main.js

@@ -19,17 +19,15 @@ import arrowBar from '@/components/bar/arrow-bar'
 import btnBar from '@/components/bar/btn-bar'
 import switchBar from '@/components/bar/switch-bar'
 // #ifdef H5
-// import VConsole from 'vconsole'
-// new VConsole();
-// #endif
-// #ifdef H5  
+import * as recorder from './common/recorder-h5';
 import ImageResize from "quill-image-resize-mp";
 import Quill from "quill"; 
+// 以下组件用于兼容部分手机聊天边框无法输入的问题
 window.Quill = Quill;  
 window.ImageResize = { default: ImageResize };  
-// #endif  
-// #ifdef H5
-import * as recorder from './common/recorder-h5';
+// 调试器
+// import VConsole from 'vconsole'
+// new VConsole();
 // #endif
 // #ifndef H5
 import * as recorder from './common/recorder-app';

im-uniapp/pages/chat/chat-box.vue

@@ -519,12 +519,9 @@ export default {
 						this.$http({
 							url: url,
 							method: 'DELETE'
-						}).then(() => {
-							msgInfo = JSON.parse(JSON.stringify(msgInfo));
-							msgInfo.type = this.$enums.MESSAGE_TYPE.RECALL;
-							msgInfo.content = '你撤回了一条消息';
-							msgInfo.status = this.$enums.MESSAGE_STATUS.RECALL;
-							this.chatStore.insertMessage(msgInfo, this.chat);
+						}).then((m) => {
+							m.selfSend = true;
+							this.chatStore.recallMessage(m, this.chat);
 						})
 					}
 				}

im-uniapp/store/chatStore.js

@@ -156,10 +156,6 @@ export default defineStore('chatStore', {
 			let message = this.findMessage(chat, msgInfo);
 			if (message) {
 				Object.assign(message, msgInfo);
-				// 撤回消息需要显示
-				if (msgInfo.type == MESSAGE_TYPE.RECALL) {
-					chat.lastContent = msgInfo.content;
-				}
 				chat.stored = false;
 				this.saveToStorage();
 				return;
@@ -248,9 +244,8 @@ export default defineStore('chatStore', {
 					chat.messages.splice(idx, 1);
 					break;
 				}
-				// 正在发送中的消息可能没有id，根据发送时间删除
-				if (msgInfo.selfSend && chat.messages[idx].selfSend &&
-					chat.messages[idx].sendTime == msgInfo.sendTime) {
+				// 正在发送中的消息可能没有id，只有临时id
+				if (chat.messages[idx].tmpId && chat.messages[idx].tmpId == msgInfo.tmpId) {
 					chat.messages.splice(idx, 1);
 					break;
 				}
@@ -258,6 +253,35 @@ export default defineStore('chatStore', {
 			chat.stored = false;
 			this.saveToStorage();
 		},
+		recallMessage(msgInfo, chatInfo) {
+			let chat = this.findChat(chatInfo);
+			if (!chat) return;
+			// 要撤回的消息id
+			let id = msgInfo.content;
+			let name = msgInfo.selfSend ? '你' : chat.type == 'PRIVATE' ? '对方' : msgInfo.sendNickName;
+			for (let idx in chat.messages) {
+				let m = chat.messages[idx];
+				if (m.id && m.id == id) {
+					// 改造成一条提示消息
+					m.status = MESSAGE_STATUS.RECALL;
+					m.content = name + "撤回了一条消息";
+					m.type = MESSAGE_TYPE.TIP_TEXT
+					// 会话列表
+					chat.lastContent = m.content;
+					chat.lastSendTime = msgInfo.sendTime;
+					chat.sendNickName = '';
+					chat.unreadCount++;
+				}
+				// 被引用的消息也要撤回
+				if (m.quoteMessage && m.quoteMessage.id == msgInfo.id) {
+					m.quoteMessage.content = "引用内容已撤回";
+					m.quoteMessage.status = MESSAGE_STATUS.RECALL;
+					m.quoteMessage.type = MESSAGE_TYPE.TIP_TEXT
+				}
+			}
+			chat.stored = false;
+			this.saveToStorage();
+		},
 		updateChatFromFriend(friend) {
 			let chat = this.findChatByFriend(friend.id)
 			if (chat && (chat.headImage != friend.headImageThumb ||

im-web/src/components/chat/ChatBox.vue

@@ -490,13 +490,10 @@ export default {
 				this.$http({
 					url: url,
 					method: 'delete'
-				}).then(() => {
+				}).then((m) => {
 					this.$message.success("消息已撤回");
-					msgInfo = JSON.parse(JSON.stringify(msgInfo));
-					msgInfo.type = 10;
-					msgInfo.content = '你撤回了一条消息';
-					msgInfo.status = this.$enums.MESSAGE_STATUS.RECALL;
-					this.$store.commit("insertMessage", [msgInfo, this.chat]);
+					m.selfSend = true;
+					this.$store.commit("recallMessage", [m, this.chat]);
 				})
 			});
 		},
@@ -572,7 +569,6 @@ export default {
 			}
 		},
 		resetEditor() {
-
 			this.$nextTick(() => {
 				this.$refs.chatInputEditor.clear();
 				this.$refs.chatInputEditor.focus();

im-web/src/components/chat/ChatMessageItem.vue

@@ -1,13 +1,13 @@
 <template>
 	<div class="chat-msg-item">
 		<div class="chat-msg-tip"
-			v-if="msgInfo.type == $enums.MESSAGE_TYPE.RECALL || msgInfo.type == $enums.MESSAGE_TYPE.TIP_TEXT">
+			v-if="msgInfo.type == $enums.MESSAGE_TYPE.TIP_TEXT">
 			{{ msgInfo.content }}
 		</div>
-		<div class="chat-msg-tip" v-if="msgInfo.type == $enums.MESSAGE_TYPE.TIP_TIME">
+		<div class="chat-msg-tip" v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.TIP_TIME">
 			{{ $date.toTimeText(msgInfo.sendTime) }}
 		</div>
-		<div class="chat-msg-normal" v-if="isNormal" :class="{ 'chat-msg-mine': mine }">
+		<div class="chat-msg-normal" v-else-if="isNormal" :class="{ 'chat-msg-mine': mine }">
 			<div class="head-image">
 				<head-image :name="showName" :size="38" :url="headImage" :id="msgInfo.sendId"></head-image>
 			</div>

im-web/src/store/chatStore.js

@@ -151,10 +151,6 @@ export default {
 			let message = this.getters.findMessage(chat, msgInfo);
 			if (message) {
 				Object.assign(message, msgInfo);
-				// 撤回消息需要显示
-				if (msgInfo.type == MESSAGE_TYPE.RECALL) {
-					chat.lastContent = msgInfo.content;
-				}
 				chat.stored = false;
 				this.commit("saveToStorage");
 				return;
@@ -236,9 +232,8 @@ export default {
 					chat.messages.splice(idx, 1);
 					break;
 				}
-				// 正在发送中的消息可能没有id，根据发送时间删除
-				if (msgInfo.selfSend && chat.messages[idx].selfSend &&
-					chat.messages[idx].sendTime == msgInfo.sendTime) {
+				// 正在发送中的消息可能没有id，只有临时id
+				if (chat.messages[idx].tmpId && chat.messages[idx].tmpId == msgInfo.tmpId) {
 					chat.messages.splice(idx, 1);
 					break;
 				}
@@ -246,6 +241,37 @@ export default {
 			chat.stored = false;
 			this.commit("saveToStorage");
 		},
+		recallMessage(state, [msgInfo, chatInfo]) {
+			let chat = this.getters.findChat(chatInfo);
+			if (!chat) return;
+			// 要撤回的消息id
+			let id = msgInfo.content;
+			let name = msgInfo.selfSend ? '你' : chat.type == 'PRIVATE' ? '对方' : msgInfo.sendNickName;
+			for (let idx in chat.messages) {
+				let m = chat.messages[idx];
+				if (m.id && m.id == id) {
+					// 改造成一条提示消息
+					m.status = MESSAGE_STATUS.RECALL;
+					m.content = name + "撤回了一条消息";
+					m.type = MESSAGE_TYPE.TIP_TEXT
+					// 会话列表
+					chat.lastContent = m.content;
+					chat.lastSendTime = msgInfo.sendTime;
+					chat.sendNickName = '';
+					if(!msgInfo.selfSend){
+						chat.unreadCount++;
+					}
+				}
+				// 被引用的消息也要撤回
+				if (m.quoteMessage && m.quoteMessage.id == msgInfo.id) {
+					m.quoteMessage.content = "引用内容已撤回";
+					m.quoteMessage.status = MESSAGE_STATUS.RECALL;
+					m.quoteMessage.type = MESSAGE_TYPE.TIP_TEXT
+				}
+			}
+			chat.stored = false;
+			this.commit("saveToStorage");
+		},
 		updateChatFromFriend(state, friend) {
 			let chat = this.getters.findChatByFriend(friend.id);
 			// 更新会话中的群名和头像

im-web/src/view/Chat.vue

@@ -11,7 +11,7 @@
       </div>
       <el-scrollbar class="chat-list-items" v-else>
         <div v-for="(chat, index) in chatStore.chats" :key="index">
-          <chat-item v-show="!chat.delete && chat.showName.includes(searchText)" :chat="chat" :index="index"
+          <chat-item v-show="!chat.delete && chat.showName && chat.showName.includes(searchText)" :chat="chat" :index="index"
             @click.native="onActiveItem(index)" @delete="onDelItem(index)" @top="onTop(index)"
             :active="chat === chatStore.activeChat"></chat-item>
         </div>

im-web/src/view/Home.vue

@@ -6,7 +6,8 @@
 					<div class="top">
 						<div class="user-head-image">
 							<head-image :name="$store.state.userStore.userInfo.nickName" :size="38"
-                :url="$store.state.userStore.userInfo.headImageThumb" @click.native="showSettingDialog = true">
+								:url="$store.state.userStore.userInfo.headImageThumb"
+								@click.native="showSettingDialog = true">
 							</head-image>
 						</div>
 
@@ -157,6 +158,15 @@ export default {
 			})
 		},
 		handlePrivateMessage(msg) {
+			// 标记这条消息是不是自己发的
+			msg.selfSend = msg.sendId == this.$store.state.userStore.userInfo.id;
+			// 好友id
+			let friendId = msg.selfSend ? msg.recvId : msg.sendId;
+			// 会话信息
+			let chatInfo = {
+				type: 'PRIVATE',
+				targetId: friendId
+			}
 			// 消息加载标志
 			if (msg.type == this.$enums.MESSAGE_TYPE.LOADING) {
 				this.$store.commit("loadingPrivateMsg", JSON.parse(msg.content))
@@ -164,10 +174,7 @@ export default {
 			}
 			// 消息已读处理，清空已读数量
 			if (msg.type == this.$enums.MESSAGE_TYPE.READED) {
-        this.$store.commit("resetUnreadCount", {
-          type: 'PRIVATE',
-          targetId: msg.recvId
-        })
+				this.$store.commit("resetUnreadCount", chatInfo)
 				return;
 			}
 			// 消息回执处理,改消息状态为已读
@@ -177,15 +184,17 @@ export default {
 				})
 				return;
 			}
-      // 标记这条消息是不是自己发的
-      msg.selfSend = msg.sendId == this.$store.state.userStore.userInfo.id;
+			// 消息撤回
+			if (msg.type == this.$enums.MESSAGE_TYPE.RECALL) {
+				this.$store.commit("recallMessage", [msg, chatInfo])
+				return;
+			}
 			// 单人webrtc 信令
 			if (this.$msgType.isRtcPrivate(msg.type)) {
 				this.$refs.rtcPrivateVideo.onRTCMessage(msg)
 				return;
 			}
 			// 好友id
-      let friendId = msg.selfSend ? msg.recvId : msg.sendId;
 			this.loadFriendInfo(friendId).then((friend) => {
 				this.insertPrivateMessage(friend, msg);
 			})
@@ -209,6 +218,12 @@ export default {
 			}
 		},
 		handleGroupMessage(msg) {
+			// 标记这条消息是不是自己发的
+			msg.selfSend = msg.sendId == this.$store.state.userStore.userInfo.id;
+			let chatInfo = {
+				type: 'GROUP',
+				targetId: msg.groupId
+			}
 			// 消息加载标志
 			if (msg.type == this.$enums.MESSAGE_TYPE.LOADING) {
 				this.$store.commit("loadingGroupMsg", JSON.parse(msg.content))
@@ -217,10 +232,6 @@ export default {
 			// 消息已读处理
 			if (msg.type == this.$enums.MESSAGE_TYPE.READED) {
 				// 我已读对方的消息，清空已读数量
-        let chatInfo = {
-          type: 'GROUP',
-          targetId: msg.groupId
-        }
 				this.$store.commit("resetUnreadCount", chatInfo)
 				return;
 			}
@@ -233,11 +244,14 @@ export default {
 					readedCount: msg.readedCount,
 					receiptOk: msg.receiptOk
 				};
-        this.$store.commit("updateMessage", msgInfo)
+				this.$store.commit("updateMessage", [msgInfo, chatInfo])
+				return;
+			}
+			// 消息撤回
+			if (msg.type == this.$enums.MESSAGE_TYPE.RECALL) {
+				this.$store.commit("recallMessage", [msg, chatInfo])
 				return;
 			}
-      // 标记这条消息是不是自己发的
-      msg.selfSend = msg.sendId == this.$store.state.userStore.userInfo.id;
 			// 群视频信令
 			if (this.$msgType.isRtcGroup(msg.type)) {
 				this.$nextTick(() => {