!168 fix: ios部分设备出现白屏的bug

Merge pull request !168 from blue/v_3.0.0

im-platform/src/main/java/com/bx/implatform/contant/Constant.java

@@ -15,6 +15,11 @@ public final class Constant {
      */
     public static final Long MAX_FILE_SIZE = 20 * 1024 * 1024L;
 
+    /**
+     * 最大文件名长度
+     */
+    public static final Long MAX_FILE_NAME_LENGTH = 128L;
+
     /**
      * 大群人数上限
      */

im-platform/src/main/java/com/bx/implatform/listener/PrivateMessageListener.java

@@ -26,6 +26,7 @@ public class PrivateMessageListener implements MessageListener<PrivateMessageVO>
     @Lazy
     @Autowired
     private PrivateMessageService privateMessageService;
+
     @Override
     public void process(List<IMSendResult<PrivateMessageVO>> results) {
         Set<Long> messageIds = new HashSet<>();
@@ -33,8 +34,11 @@ public class PrivateMessageListener implements MessageListener<PrivateMessageVO>
             PrivateMessageVO messageInfo = result.getData();
             // 更新消息状态,这里只处理成功消息，失败的消息继续保持未读状态
             if (result.getCode().equals(IMSendCode.SUCCESS.code()) && !Objects.isNull(messageInfo.getId())) {
+                if (result.getReceiver().getId().equals(messageInfo.getRecvId())) {
                     messageIds.add(messageInfo.getId());
-                log.info("消息送达，消息id:{}，发送者:{},接收者:{},终端:{}", messageInfo.getId(), result.getSender().getId(), result.getReceiver().getId(), result.getReceiver().getTerminal());
+                    log.info("消息送达，消息id:{}，发送者:{},接收者:{},终端:{}", messageInfo.getId(),
+                        result.getSender().getId(), result.getReceiver().getId(), result.getReceiver().getTerminal());
+                }
             }
         }
         // 批量修改状态

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

@@ -60,6 +60,8 @@ public class FileServiceImpl extends ServiceImpl<FileInfoMapper, FileInfo> imple
     public String uploadFile(MultipartFile file) {
         try {
             Long userId = SessionContext.getSession().getUserId();
+            // 文件名长度校验
+            checkFileNameLength(file);
             // 大小校验
             if (file.getSize() > Constant.MAX_FILE_SIZE) {
                 throw new GlobalException(ResultCode.PROGRAM_ERROR, "文件大小不能超过20M");
@@ -95,6 +97,8 @@ public class FileServiceImpl extends ServiceImpl<FileInfoMapper, FileInfo> imple
     public UploadImageVO uploadImage(MultipartFile file, Boolean isPermanent,Long thumbSize) {
         try {
             Long userId = SessionContext.getSession().getUserId();
+            // 文件名长度校验
+            checkFileNameLength(file);
             // 大小校验
             if (file.getSize() > Constant.MAX_IMAGE_SIZE) {
                 throw new GlobalException(ResultCode.PROGRAM_ERROR, "图片大小不能超过20M");
@@ -170,6 +174,7 @@ public class FileServiceImpl extends ServiceImpl<FileInfoMapper, FileInfo> imple
         LambdaQueryWrapper<FileInfo> wrapper = Wrappers.lambdaQuery();
         wrapper.eq(FileInfo::getMd5, md5);
         wrapper.eq(FileInfo::getFileType, fileType);
+        wrapper.last("limit 1");
         return getOne(wrapper);
     }
 
@@ -199,4 +204,9 @@ public class FileServiceImpl extends ServiceImpl<FileInfoMapper, FileInfo> imple
         this.save(fileInfo);
     }
 
+    private void checkFileNameLength(MultipartFile file){
+        if(file.getOriginalFilename().length() > Constant.MAX_FILE_NAME_LENGTH){
+            throw new GlobalException("文件名长度不能超过" + Constant.MAX_FILE_NAME_LENGTH);
+        }
+    }
 }

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

@@ -189,8 +189,8 @@ public class PrivateMessageServiceImpl extends ServiceImpl<PrivateMessageMapper,
         wrapper.orderByAsc(PrivateMessage::getId);
         List<PrivateMessage> messages = this.list(wrapper);
         // 更新消息为送达状态
-        List<Long> messageIds =
+        List<Long> messageIds = messages.stream().filter(m -> m.getRecvId().equals(session.getUserId()))
-            messages.stream().filter(m -> m.getStatus().equals(MessageStatus.PENDING.code())).map(PrivateMessage::getId)
+            .filter(m -> m.getStatus().equals(MessageStatus.PENDING.code())).map(PrivateMessage::getId)
             .collect(Collectors.toList());
         if (!messageIds.isEmpty()) {
             LambdaUpdateWrapper<PrivateMessage> updateWrapper = Wrappers.lambdaUpdate();

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

@@ -11,7 +11,7 @@
 				:name="showName" size="small"></head-image>
 			<view class="content">
 				<view v-if="msgInfo.groupId && !msgInfo.selfSend" class="top">
-					<text>{{ showName }}</text>
+					<text class="name">{{ showName }}</text>
 				</view>
 				<view class="bottom">
 					<view class="message-content-wrapper">
@@ -65,7 +65,7 @@
 								<text>{{ msgInfo.content }}</text>
 							</view>
 						</long-press-menu>
-						<view v-if="sending&&isTextMessage" class="sending">
+						<view v-if="sending&&(isTextMessage||isAudioMessage)" class="sending">
 							<loading :size="40" icon-color="#656adf" :mask="false"></loading>
 						</view>
 						<view v-else-if="sendFail" @click="onSendFail"
@@ -228,6 +228,9 @@ export default {
 		isTextMessage() {
 			return this.msgInfo.type == this.$enums.MESSAGE_TYPE.TEXT
 		},
+		isAudioMessage() {
+			return this.msgInfo.type == this.$enums.MESSAGE_TYPE.AUDIO
+		},
 		isAction() {
 			return this.$msgType.isAction(this.msgInfo.type);
 		},
@@ -291,10 +294,17 @@ export default {
 			.top {
 				display: flex;
 				flex-wrap: nowrap;
+				align-items: center;
+
+				.name {
 					color: $im-text-color-lighter;
 					font-size: $im-font-size-smaller;
 					line-height: $im-font-size-smaller;
 					height: $im-font-size-smaller;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
 			}
 
 			.bottom {

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

@@ -152,7 +152,8 @@ export default {
 			isInBottom: true, // 滚动条是否在底部
 			newMessageSize: 0, // 滚动条不在底部时新的消息数量
 			scrollTop: 0, // 用于ios h5定位滚动条
-			scrollViewHeight: 0 // 滚动条总长度
+			scrollViewHeight: 0, // 滚动条总长度
+			maxTmpId: 0 // 最后生成的临时id
 		}
 	},
 	methods: {
@@ -186,6 +187,7 @@ export default {
 			this.moveChatToTop();
 			this.sendMessageRequest(msgInfo).then((m) => {
 				// 更新消息
+				tmpMessage = JSON.parse(JSON.stringify(tmpMessage));
 				tmpMessage.id = m.id;
 				tmpMessage.status = m.status;
 				this.chatStore.updateMessage(tmpMessage, chat);
@@ -194,7 +196,10 @@ export default {
 				// 滚动到底部
 				this.scrollToBottom();
 				this.isReceipt = false;
-
+			}).catch(() => {
+				tmpMessage = JSON.parse(JSON.stringify(tmpMessage));
+				tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
+				this.chatStore.updateMessage(tmpMessage, chat);
 			})
 		},
 		onRtCall(msgInfo) {
@@ -474,6 +479,9 @@ export default {
 				msgInfo.status = m.status;
 				this.isReceipt = false;
 				this.chatStore.updateMessage(msgInfo, file.chat);
+			}).catch(() => {
+				msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
+				this.chatStore.updateMessage(msgInfo, file.chat);
 			})
 		},
 		onUploadImageFail(file, err) {
@@ -527,6 +535,9 @@ export default {
 				msgInfo.status = m.status;
 				this.isReceipt = false;
 				this.chatStore.updateMessage(msgInfo, file.chat);
+			}).catch(() => {
+				msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
+				this.chatStore.updateMessage(msgInfo, file.chat);
 			})
 		},
 		onUploadFileFail(file, res) {
@@ -631,13 +642,21 @@ export default {
 			});
 		},
 		onClickToBottom() {
+			/**
+			 * 有些ios设备在点击回到底部后页面会卡住，原因不详
+			 * 解决方式: 延迟300ms再滚动
+			 */
+			setTimeout(() => {
 				this.scrollToBottom();
-			// 有些设备滚到底部时会莫名触发滚动到顶部的事件
+				/**
-			// 所以这里延迟100s保证能准确设置底部标志
+				 * 有些设备滚到底部时会莫名触发滚动到顶部的事件
+				 * 解决方式: 延迟100ms保证能准确设置底部标志
+				 */
 				setTimeout(() => {
 					this.isInBottom = true;
 					this.newMessageSize = 0;
 				}, 100)
+			}, 300)
 		},
 		onScroll(e) {
 			// 记录当前滚动条高度
@@ -645,16 +664,14 @@ export default {
 		},
 		onScrollToTop() {
 			if (this.showMinIdx > 0) {
-				// #ifndef H5
+				// 防止滚动条定格在顶部，不能一直往上滚
-				// 防止滚动条定格在顶部，不能一直往上滚，app和小程序采用scroll-into-view定位
-				this.scrollToMsgIdx(this.showMinIdx);
-				// #endif
-				// #ifdef H5
-				// 防止滚动条定格在顶部，不能一直往上滚，h5采用scroll-top定位
 				if (uni.getSystemInfoSync().platform == 'ios') {
+					// ios采用scroll-top定位，否则可能会出现白屏
 					this.holdingScrollBar(this.scrollViewHeight);
+				} else {
+					// 安卓采用scroll-into-view定位
+					this.scrollToMsgIdx(this.showMinIdx);
 				}
-				// #endif
 				// 多展示20条信息
 				this.showMinIdx = this.showMinIdx > 20 ? this.showMinIdx - 20 : 0;
 			}
@@ -973,7 +990,13 @@ export default {
 		},
 		generateId() {
 			// 生成临时id 
-			return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
+			const id = String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
+			// 必须保证id是递增
+			if (this.maxTmpId > id) {
+				return this.generateId();
+			}
+			this.maxTmpId = id;
+			return id;
 		}
 	},
 	computed: {
@@ -1098,6 +1121,8 @@ export default {
 		// 清空底部标志
 		this.isInBottom = true;
 		this.newMessageSize = 0;
+		// 清空消息临时id
+		this.maxTmpId = 0;
 		// 监听键盘高度
 		this.listenKeyBoard();
 		// 计算聊天窗口高度

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

@@ -132,7 +132,8 @@ export default {
 			reqQueue: [], // 等待发送的请求队列
 			isSending: false, // 是否正在发消息
 			isInBottom: false, // 滚动条是否在底部
-			newMessageSize: 0 // 滚动条不在底部时新的消息数量
+			newMessageSize: 0, // 滚动条不在底部时新的消息数量
+			maxTmpId: 0 // 最后生成的临时ID
 		}
 	},
 	methods: {
@@ -164,6 +165,9 @@ export default {
 				msgInfo.status = m.status;
 				this.isReceipt = false;
 				this.chatStore.updateMessage(msgInfo, file.chat);
+			}).catch(() => {
+				msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
+				this.chatStore.updateMessage(msgInfo, file.chat);
 			})
 		},
 		onImageFail(e, file) {
@@ -227,6 +231,9 @@ export default {
 				this.isReceipt = false;
 				this.refreshPlaceHolder();
 				this.chatStore.updateMessage(msgInfo, file.chat);
+			}).catch(() => {
+				msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
+				this.chatStore.updateMessage(msgInfo, file.chat);
 			})
 		},
 		onFileFail(e, file) {
@@ -736,7 +743,13 @@ export default {
 		},
 		generateId() {
 			// 生成临时id 
-			return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
+			const id = String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
+			// 必须保证id是递增
+			if (this.maxTmpId > id) {
+				return this.generateId();
+			}
+			this.maxTmpId = id;
+			return id;
 		}
 	},
 	computed: {
@@ -816,6 +829,8 @@ export default {
 					this.resetEditor();
 					// 复位回执消息
 					this.isReceipt = false;
+					// 清空消息临时id
+					this.maxTmpId = 0;
 					// 更新placeholder
 					this.refreshPlaceHolder();
 				}