若干优化

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

@@ -16,13 +16,13 @@ public final class Constant {
     public static final Long MAX_FILE_SIZE = 20 * 1024 * 1024L;
 
     /**
-     * 群聊最大人数
+     * 大群人数上限
      */
-    public static final Long MAX_GROUP_MEMBER = 10000L;
+    public static final Long MAX_LARGE_GROUP_MEMBER = 10000L;
 
     /**
-     * 回执消息限制最大人数
+     * 普通群人数上限
      */
-    public static final Long LARGE_GROUP_MEMBER = 500L;
+    public static final Long MAX_NORMAL_GROUP_MEMBER = 500L;
 
 }

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

@@ -65,9 +65,9 @@ public class GroupMessageServiceImpl extends ServiceImpl<GroupMessageMapper, Gro
         }
         // 群聊成员列表
         List<Long> userIds = groupMemberService.findUserIdsByGroupId(group.getId());
-        if (dto.getReceipt() && userIds.size() > Constant.LARGE_GROUP_MEMBER) {
+        if (dto.getReceipt() && userIds.size() > Constant.MAX_LARGE_GROUP_MEMBER) {
             // 大群的回执消息过于消耗资源，不允许发送
-            throw new GlobalException(String.format("当前群聊大于%s人,不支持发送回执消息", Constant.LARGE_GROUP_MEMBER));
+            throw new GlobalException(String.format("当前群聊大于%s人,不支持发送回执消息", Constant.MAX_LARGE_GROUP_MEMBER));
         }
         // 不用发给自己
         userIds = userIds.stream().filter(id -> !session.getUserId().equals(id)).collect(Collectors.toList());

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

@@ -123,7 +123,8 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
         String key = StrUtil.join(":", RedisKey.IM_GROUP_READED_POSITION, groupId);
         redisTemplate.delete(key);
         // 推送解散群聊提示
-        this.sendTipMessage(groupId, userIds, String.format("'%s'解散了群聊", session.getNickName()));
+        String content = String.format("'%s'解散了群聊", session.getNickName());
+        this.sendTipMessage(groupId, userIds, content, true);
         // 推送同步消息
         this.sendDelGroupMessage(groupId, userIds, false);
         log.info("删除群聊，群聊id:{},群聊名称:{}", group.getId(), group.getName());
@@ -142,7 +143,7 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
         String key = StrUtil.join(":", RedisKey.IM_GROUP_READED_POSITION, groupId);
         redisTemplate.opsForHash().delete(key, userId.toString());
         // 推送退出群聊提示
-        this.sendTipMessage(groupId, List.of(userId), "您已退出群聊");
+        this.sendTipMessage(groupId, List.of(userId), "您已退出群聊", false);
         // 推送同步消息
         this.sendDelGroupMessage(groupId, Lists.newArrayList(), true);
         log.info("退出群聊，群聊id:{},群聊名称:{},用户id:{}", group.getId(), group.getName(), userId);
@@ -164,7 +165,7 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
         String key = StrUtil.join(":", RedisKey.IM_GROUP_READED_POSITION, groupId);
         redisTemplate.opsForHash().delete(key, userId.toString());
         // 推送踢出群聊提示
-        this.sendTipMessage(groupId, List.of(userId), "您已被移出群聊");
+        this.sendTipMessage(groupId, List.of(userId), "您已被移出群聊", false);
         // 推送同步消息
         this.sendDelGroupMessage(groupId, List.of(userId), false);
         log.info("踢出群聊，群聊id:{},群聊名称:{},用户id:{}", group.getId(), group.getName(), userId);
@@ -234,8 +235,8 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
         // 群聊人数校验
         List<GroupMember> members = groupMemberService.findByGroupId(vo.getGroupId());
         long size = members.stream().filter(m -> !m.getQuit()).count();
-        if (vo.getFriendIds().size() + size > Constant.MAX_GROUP_MEMBER) {
-            throw new GlobalException("群聊人数不能大于" + Constant.MAX_GROUP_MEMBER + "人");
+        if (vo.getFriendIds().size() + size > Constant.MAX_LARGE_GROUP_MEMBER) {
+            throw new GlobalException("群聊人数不能大于" + Constant.MAX_LARGE_GROUP_MEMBER + "人");
         }
         // 找出好友信息
         List<Friend> friends = friendsService.findByFriendIds(vo.getFriendIds());
@@ -267,7 +268,7 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
         List<Long> userIds = groupMemberService.findUserIdsByGroupId(vo.getGroupId());
         String memberNames = groupMembers.stream().map(GroupMember::getShowNickName).collect(Collectors.joining(","));
         String content = String.format("'%s'邀请'%s'加入了群聊", session.getNickName(), memberNames);
-        this.sendTipMessage(vo.getGroupId(), userIds, content);
+        this.sendTipMessage(vo.getGroupId(), userIds, content, true);
         log.info("邀请进入群聊，群聊id:{},群聊名称:{},被邀请用户id:{}", group.getId(), group.getName(),
             vo.getFriendIds());
     }
@@ -287,7 +288,7 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
         }).sorted((m1, m2) -> m2.getOnline().compareTo(m1.getOnline())).collect(Collectors.toList());
     }
 
-    private void sendTipMessage(Long groupId, List<Long> recvIds, String content) {
+    private void sendTipMessage(Long groupId, List<Long> recvIds, String content, Boolean sendToAll) {
         UserSession session = SessionContext.getSession();
         // 消息入库
         GroupMessage message = new GroupMessage();
@@ -298,7 +299,7 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
         message.setSendNickName(session.getNickName());
         message.setGroupId(groupId);
         message.setSendId(session.getUserId());
-        message.setRecvIds(CommaTextUtils.asText(recvIds));
+        message.setRecvIds(sendToAll ? "" : CommaTextUtils.asText(recvIds));
         groupMessageMapper.insert(message);
         // 推送
         GroupMessageVO msgInfo = BeanUtils.copyProperties(message, GroupMessageVO.class);

im-platform/src/main/java/com/bx/implatform/vo/GroupInviteVO.java

@@ -3,6 +3,7 @@ package com.bx.implatform.vo;
 import io.swagger.v3.oas.annotations.media.Schema;
 import jakarta.validation.constraints.NotEmpty;
 import jakarta.validation.constraints.NotNull;
+import jakarta.validation.constraints.Size;
 import lombok.Data;
 
 import java.util.List;
@@ -15,6 +16,7 @@ public class GroupInviteVO {
     @Schema(description = "群id")
     private Long groupId;
 
+    @Size(max = 50, message = "一次最多只能邀请50位用户")
     @NotEmpty(message = "群id不可为空")
     @Schema(description = "好友id列表不可为空")
     private List<Long> friendIds;

im-uniapp/App.vue

@@ -17,6 +17,7 @@ export default {
 	},
 	methods: {
 		init() {
+			this.reconnecting = false;
 			this.isExit = false;
 			// 加载数据
 			this.loadStore().then(() => {
@@ -30,20 +31,17 @@ export default {
 		},
 		initWebSocket() {
 			let loginInfo = uni.getStorageSync("loginInfo")
-			wsApi.init();
 			wsApi.connect(UNI_APP.WS_URL, loginInfo.accessToken);
 			wsApi.onConnect(() => {
-				// 重连成功提示
 				if (this.reconnecting) {
-					this.reconnecting = false;
-					uni.showToast({
-						title: "已重新连接",
-						icon: 'none'
-					})
-				}
+					// 重连成功
+					this.onReconnectWs();
+				} else {
 					// 加载离线消息
 					this.pullPrivateOfflineMessage(this.chatStore.privateMsgMaxId);
 					this.pullGroupOfflineMessage(this.chatStore.groupMsgMaxId);
+
+				}
 			});
 			wsApi.onMessage((cmd, msgInfo) => {
 				if (cmd == 2) {
@@ -371,12 +369,11 @@ export default {
 			// 记录标志
 			this.reconnecting = true;
 			// 重新加载一次个人信息，目的是为了保证网络已经正常且token有效
-			this.reloadUserInfo().then((userInfo) => {
+			this.userStore.loadUser().then((userInfo) => {
 				uni.showToast({
 					title: '连接已断开，尝试重新连接...',
-					icon: 'none',
+					icon: 'none'
 				})
-				this.userStore.setUserInfo(userInfo);
 				// 重新连接
 				let loginInfo = uni.getStorageSync("loginInfo")
 				wsApi.reconnect(UNI_APP.WS_URL, loginInfo.accessToken);
@@ -387,10 +384,23 @@ export default {
 				}, 5000)
 			})
 		},
-		reloadUserInfo() {
-			return http({
-				url: '/user/self',
-				method: 'GET'
+		onReconnectWs() {
+			this.reconnecting = false;
+			// 重新加载好友和群聊
+			const promises = [];
+			promises.push(this.friendStore.loadFriend());
+			promises.push(this.groupStore.loadGroup());
+			Promise.all(promises).then(() => {
+				uni.showToast({
+					title: "已重新连接",
+					icon: 'none'
+				})
+				// 加载离线消息
+				this.pullPrivateOfflineMessage(this.chatStore.privateMsgMaxId);
+				this.pullGroupOfflineMessage(this.chatStore.groupMsgMaxId);
+			}).catch((e) => {
+				console.log(e);
+				this.exit();
 			})
 		},
 		closeSplashscreen(delay) {

im-uniapp/common/wssocket.js

@@ -1,20 +1,33 @@
-let wsurl = "";
 let accessToken = "";
 let messageCallBack = null;
 let closeCallBack = null;
 let connectCallBack = null;
 let isConnect = false; //连接标识 避免重复连接
 let rec = null;
-let isInit = false;
 let lastConnectTime = new Date(); // 最后一次连接时间
+let socketTask = null;
 
-let init = () => {
-	// 防止重复初始化
-	if (isInit) {
+let connect = (wsurl, token) => {
+	accessToken = token;
+	if (isConnect) {
 		return;
 	}
-	isInit = true;
-	uni.onSocketOpen((res) => {
+	lastConnectTime = new Date();
+	socketTask = uni.connectSocket({
+		url: wsurl,
+		success: (res) => {
+			console.log("websocket连接成功");
+		},
+		fail: (e) => {
+			console.log(e);
+			console.log("websocket连接失败，10s后重连");
+			setTimeout(() => {
+				connect();
+			}, 10000)
+		}
+	});
+
+	socketTask.onOpen((res) => {
 		console.log("WebSocket连接已打开");
 		isConnect = true;
 		// 发送登录命令
@@ -24,12 +37,12 @@ let init = () => {
 				accessToken: accessToken
 			}
 		};
-		uni.sendSocketMessage({
+		socketTask.send({
 			data: JSON.stringify(loginInfo)
 		});
 	})
 
-	uni.onSocketMessage((res) => {
+	socketTask.onMessage((res) => {
 		let sendInfo = JSON.parse(res.data)
 		if (sendInfo.cmd == 0) {
 			heartCheck.start()
@@ -45,47 +58,24 @@ let init = () => {
 		}
 	})
 
-	uni.onSocketClose((res) => {
+	socketTask.onClose((res) => {
 		console.log('WebSocket连接关闭')
 		isConnect = false;
 		closeCallBack && closeCallBack(res);
 	})
 
-	uni.onSocketError((e) => {
+	socketTask.onError((e) => {
 		console.log(e)
 		isConnect = false;
 		// APP 应用切出超过一定时间(约1分钟)会触发报错，此处回调给应用进行重连
 		closeCallBack && closeCallBack({ code: 1006 });
 	})
-};
-
-let connect = (url, token) => {
-	wsurl = url;
-	accessToken = token;
-	if (isConnect) {
-		return;
-	}
-	lastConnectTime = new Date();
-	uni.connectSocket({
-		url: wsurl,
-		success: (res) => {
-			console.log("websocket连接成功");
-		},
-		fail: (e) => {
-			console.log(e);
-			console.log("websocket连接失败，10s后重连");
-			setTimeout(() => {
-				connect();
-			}, 10000)
-		}
-	});
 }
 
 //定义重连函数
 let reconnect = (wsurl, accessToken) => {
 	console.log("尝试重新连接");
 	if (isConnect) {
-		//如果已经连上就不在重连了
 		return;
 	}
 	// 延迟10秒重连  避免过多次过频繁请求重连
@@ -102,7 +92,7 @@ let close = (code) => {
 	if (!isConnect) {
 		return;
 	}
-	uni.closeSocket({
+	socketTask.close({
 		code: code,
 		complete: (res) => {
 			console.log("关闭websocket连接");
@@ -116,8 +106,8 @@ let close = (code) => {
 
 
 // 心跳设置
-var heartCheck = {
-	timeout: 10000, //每段时间发送一次心跳包 这里设置为30s
+let heartCheck = {
+	timeout: 20000, // 每段时间发送一次心跳包 这里设置为20s
 	timeoutObj: null, // 延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）
 	start: function() {
 		if (isConnect) {
@@ -126,28 +116,17 @@ var heartCheck = {
 				cmd: 1,
 				data: {}
 			};
-			uni.sendSocketMessage({
-				data: JSON.stringify(heartBeat),
-				fail(res) {
-					console.log(res);
-				}
-			})
+			sendMessage(JSON.stringify(heartBeat))
 		}
 	},
 	reset: function() {
 		clearTimeout(this.timeoutObj);
-		this.timeoutObj = setTimeout(function () {
-			heartCheck.start();
-		}, this.timeout);
-	}
-
+		this.timeoutObj = setTimeout(() => heartCheck.start(), this.timeout);
 	}
+};
 
-// 实际调用的方法
-function sendMessage(agentData) {
-	uni.sendSocketMessage({
-		data: agentData
-	})
+let sendMessage = (message) => {
+	socketTask.send({ data: message })
 }
 
 let onConnect = (callback) => {
@@ -155,19 +134,18 @@ let onConnect = (callback) => {
 }
 
 
-function onMessage(callback) {
+let onMessage = (callback) => {
 	messageCallBack = callback;
 }
 
 
-function onClose(callback) {
+let onClose = (callback) => {
 	closeCallBack = callback;
 }
 
 
 // 将方法暴露出去
 export {
-	init,
 	connect,
 	reconnect,
 	close,

im-uniapp/manifest.json

@@ -2,8 +2,8 @@
     "name" : "盒子IM",
     "appid" : "__UNI__69DD57A",
     "description" : "",
-    "versionName" : "3.1.0",
-    "versionCode" : 3100,
+    "versionName" : "3.4.0",
+    "versionCode" : 3400,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

im-uniapp/pages/chat/chat.vue

@@ -76,6 +76,12 @@ export default {
 		moveToTop(chatIdx) {
 			this.chatStore.moveTop(chatIdx);
 		},
+		isShowChat(chat) {
+			if (chat.delete) {
+				return false;
+			}
+			return !this.searchText || chat.showName.includes(this.searchText)
+		},
 		onSearch() {
 			this.showSearch = !this.showSearch;
 			this.searchText = "";
@@ -146,7 +152,6 @@ export default {
 		width: 100%;
 		height: 120rpx;
 		background: white;
-
 		color: $im-text-color-lighter;
 
 		.loading-box {

im-uniapp/pages/login/login.vue

@@ -1,6 +1,7 @@
 <template>
 	<view class="login">
 		<view class="title">欢迎登录</view>
+		<view class="form">
 			<uni-forms :modelValue="loginForm" :rules="rules" validate-trigger="bind">
 				<uni-forms-item name="userName">
 					<uni-easyinput type="text" v-model="loginForm.userName" prefix-icon="person" placeholder="用户名" />
@@ -10,6 +11,7 @@
 				</uni-forms-item>
 				<button class="btn-submit" @click="submit" type="primary">登录</button>
 			</uni-forms>
+		</view>
 		<navigator class="nav-register" url="/pages/register/register">
 			没有账号,前往注册
 		</navigator>
@@ -69,10 +71,10 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .login {
 	.title {
-		padding-top: 150rpx;
+		padding-top: 250rpx;
 		padding-bottom: 50rpx;
 		color: $im-color-primary;
 		text-align: center;
@@ -80,7 +82,7 @@ export default {
 		font-weight: bold;
 	}
 
-	.uni-forms {
+	.form {
 		padding: 50rpx;
 
 		.btn-submit {

im-uniapp/pages/register/register.vue

@@ -1,6 +1,7 @@
 <template>
 	<view class="register">
 		<view class="title">欢迎注册</view>
+		<view class="form">
 			<uni-forms  ref="form" :modelValue="dataForm" :rules="rules" validate-trigger="bind" label-width="80px">
 				<uni-forms-item name="userName" label="用户名">
 					<uni-easyinput type="text" v-model="dataForm.userName" placeholder="用户名" />
@@ -16,6 +17,7 @@
 				</uni-forms-item>
 				<button class="btn-submit" @click="submit" type="primary">注册并登录</button>
 			</uni-forms>
+		</view>
 		<navigator class="nav-login" url="/pages/login/login">
 			返回登录页面
 		</navigator>
@@ -111,10 +113,10 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .register {
 	.title {
-		padding-top: 150rpx;
+		padding-top: 250rpx;
 		padding-bottom: 50rpx;
 		color: $im-color-primary;
 		text-align: center;
@@ -122,7 +124,7 @@ export default {
 		font-weight: 600;
 	}
 
-	.uni-forms {
+	.form {
 		padding: 50rpx;
 
 		.btn-submit {

im-web/src/api/emotion.js

@@ -7,19 +7,19 @@ const emoTextList = ['憨笑', '媚眼', '开心', '坏笑', '可怜', '爱心',
 ];
 
 
-let transform = (content) => {
-	return content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, textToImg);
+let transform = (content, extClass) => {
+	return content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, (text) => textToImg(text, extClass));
 }
 
 // 将匹配结果替换表情图片
-let textToImg = (emoText) => {
+let textToImg = (emoText, extClass) => {
 	let word = emoText.replace(/\#|\;/gi, '');
 	let idx = emoTextList.indexOf(word);
 	if (idx == -1) {
 		return emoText;
 	}
 	let url = require(`@/assets/emoji/${idx}.gif`);
-	return `<img src="${url}" style="width:32px;height:32px;vertical-align:bottom;"/>`
+	return `<img src="${url}" class="${extClass}" />`
 }
 
 let textToUrl = (emoText) => {

im-web/src/assets/style/im.scss

@@ -89,3 +89,21 @@ section {
   }
 
 }
+
+.emoji-large {
+  width: 32px;
+  height: 32px;
+  vertical-align: bottom;
+}
+
+.emoji-normal {
+  width: 26px;
+  height: 26px;
+  vertical-align: bottom;
+}
+
+.emoji-small {
+  width: 20px;
+  height: 20px;
+  vertical-align: bottom;
+}

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

@@ -819,72 +819,6 @@ export default {
 			height: 100%;
 			background-color: white !important;
 
-			.send-text-area {
-				box-sizing: border-box;
-				padding: 5px;
-				width: 100%;
-				flex: 1;
-				resize: none;
-				font-size: 16px;
-				outline: none;
-
-				text-align: left;
-				line-height: 30px;
-
-				&:before {
-					content: attr(placeholder);
-					color: gray;
-				}
-
-				.at {
-					color: blue;
-					font-weight: 600;
-				}
-
-				.receipt {
-					color: darkblue;
-					font-size: 15px;
-					font-weight: 600;
-				}
-
-				.emo {
-					width: 30px;
-					height: 30px;
-					vertical-align: bottom;
-				}
-			}
-
-			.send-image-area {
-				text-align: left;
-				border: #53a0e7 solid 1px;
-
-				.send-image-box {
-					position: relative;
-					display: inline-block;
-
-					.send-image {
-						max-height: 180px;
-						border: 1px solid #ccc;
-						border-radius: 2%;
-						margin: 2px;
-					}
-
-					.send-image-close {
-						position: absolute;
-						padding: 3px;
-						right: 7px;
-						top: 7px;
-						color: white;
-						cursor: pointer;
-						font-size: 15px;
-						font-weight: 600;
-						background-color: #aaa;
-						border-radius: 50%;
-						border: 1px solid #ccc;
-					}
-				}
-			}
-
 			.send-btn-area {
 				padding: 10px;
 				position: absolute;

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

@@ -249,7 +249,7 @@ export default {
 		},
 		insertEmoji(emojiText) {
 			let emojiElement = document.createElement('img');
-			emojiElement.className = 'chat-emoji no-text';
+			emojiElement.className = 'emoji-normal no-text';
 			emojiElement.dataset.emojiCode = emojiText;
 			emojiElement.src = this.$emo.textToUrl(emojiText);
 
@@ -482,7 +482,7 @@ export default {
 		bottom: 0;
 		outline: none;
 		padding: 5px;
-		line-height: 1.5;
+		line-height: 26px;
 		font-size: var(--im-font-size);
 		text-align: left;
 		overflow-y: auto;
@@ -504,13 +504,6 @@ export default {
 			cursor: pointer;
 		}
 
-		.chat-emoji {
-			width: 30px;
-			height: 30px;
-			vertical-align: top;
-			cursor: pointer;
-		}
-
 		.chat-file-container {
 			max-width: 65%;
 			padding: 10px;

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

@@ -16,7 +16,7 @@
 			<div class="chat-content">
 				<div class="chat-at-text">{{ atText }}</div>
 				<div class="chat-send-name" v-show="isShowSendName">{{ chat.sendNickName + ':&nbsp;' }}</div>
-				<div class="chat-content-text" v-html="$emo.transform(chat.lastContent)"></div>
+				<div class="chat-content-text" v-html="$emo.transform(chat.lastContent,'emoji-small')"></div>
 			</div>
 		</div>
 		<right-menu v-show="rightMenu.show" :pos="rightMenu.pos" :items="rightMenu.items"
@@ -216,11 +216,6 @@ export default {
 				font-size: var(--im-font-size-small);
 				color: var(--im-text-color-light);
 
-				img {
-					width: 20px !important;
-					height: 20px !important;
-					vertical-align: bottom;
-				}
 			}
 
 		}

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

@@ -207,7 +207,7 @@ export default {
 		htmlText() {
 			let color = this.msgInfo.selfSend ? 'white' : '';
 			let text = this.$url.replaceURLWithHTMLLinks(this.msgInfo.content, color)
-			return this.$emo.transform(text)
+			return this.$emo.transform(text,'emoji-normal')
 		}
 	}
 }

im-web/src/components/common/Emotion.vue

@@ -4,7 +4,7 @@
 			<el-scrollbar style="height: 220px">
 				<div class="emotion-item-list">
 					<div class="emotion-item" v-for="(emoText, i) in $emo.emoTextList" :key="i"
-						@click="onClickEmo(emoText)" v-html="$emo.textToImg(emoText)">
+						@click="onClickEmo(emoText)" v-html="$emo.textToImg(emoText,'emoji-large')">
 					</div>
 				</div>
 			</el-scrollbar>

im-web/src/view/Friend.vue

@@ -13,8 +13,9 @@
 				<div v-for="(friends, i) in friendValues" :key="i">
 					<div class="index-title">{{ friendKeys[i] }}</div>
 					<div v-for="(friend) in friends" :key="friend.id">
-						<friend-item :friend="friend" :active="friend.id === activeFriend.id" @chat="onSendMessage(friend)"
-							@delete="onDelFriend(friend)" @click.native="onActiveItem(friend)">
+						<friend-item :friend="friend" :active="friend.id === activeFriend.id"
+							@chat="onSendMessage(friend)" @delete="onDelFriend(friend)"
+							@click.native="onActiveItem(friend)">
 						</friend-item>
 					</div>
 					<div v-if="i < friendValues.length - 1" class="divider"></div>
@@ -184,10 +185,10 @@ export default {
 			// 按首字母分组
 			let map = new Map();
 			this.friendStore.friends.forEach((f) => {
-				if (f.deleted || (this.searchText && !f.showNickName.includes(this.searchText))) {
+				if (f.deleted || (this.searchText && !f.nickName.includes(this.searchText))) {
 					return;
 				}
-				let letter = this.firstLetter(f.showNickName).toUpperCase();
+				let letter = this.firstLetter(f.nickName).toUpperCase();
 				// 非英文一律为#组
 				if (!this.isEnglish(letter)) {
 					letter = "#"
@@ -246,6 +247,13 @@ export default {
 
 		.friend-list-items {
 			flex: 1;
+
+			.index-title {
+				text-align: left;
+				font-size: var(--im-larger-size-larger);
+				padding: 5px 15px;
+				color: var(--im-text-color-light);
+			}
 		}
 	}
 

im-web/src/view/Group.vue

@@ -11,7 +11,8 @@
 				<div v-for="(groups, i) in groupValues" :key="i">
 					<div class="index-title">{{ groupKeys[i] }}</div>
 					<div v-for="group in groups" :key="group.id">
-            <group-item :group="group" :active="group.id == activeGroup.id" @click.native="onActiveItem(group)">
+						<group-item :group="group" :active="group.id == activeGroup.id"
+							@click.native="onActiveItem(group)">
 						</group-item>
 					</div>
 					<div v-if="i < groupValues.length - 1" class="divider"></div>
@@ -26,8 +27,8 @@
 				<div v-show="activeGroup.id">
 					<div class="group-info">
 						<div>
-              <file-upload v-show="isOwner" class="avatar-uploader" :action="imageAction" :showLoading="true"
-                :maxSize="maxSize" @success="onUploadSuccess"
+							<file-upload v-show="isOwner" class="avatar-uploader" :action="imageAction"
+								:showLoading="true" :maxSize="maxSize" @success="onUploadSuccess"
 								:fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/webp']">
 								<img v-if="activeGroup.headImage" :src="activeGroup.headImage" class="avatar">
 								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
@@ -35,7 +36,8 @@
 							<head-image v-show="!isOwner" class="avatar" :size="160" :url="activeGroup.headImage"
 								:name="activeGroup.showGroupName" radius="10%">
 							</head-image>
-              <el-button class="send-btn" icon="el-icon-position" type="primary" @click="onSendMessage()">发消息
+							<el-button class="send-btn" icon="el-icon-position" type="primary"
+								@click="onSendMessage()">发消息
 							</el-button>
 						</div>
 						<el-form class="group-form" label-width="130px" :model="activeGroup" :rules="rules" size="small"
@@ -55,8 +57,8 @@
 									:placeholder="$store.state.userStore.userInfo.nickName"></el-input>
 							</el-form-item>
 							<el-form-item label="群公告">
-                <el-input v-model="activeGroup.notice" :disabled="!isOwner" type="textarea" :rows="3" maxlength="1024"
-                  placeholder="群主未设置"></el-input>
+								<el-input v-model="activeGroup.notice" :disabled="!isOwner" type="textarea" :rows="3"
+									maxlength="1024" placeholder="群主未设置"></el-input>
 							</el-form-item>
 							<div>
 								<el-button type="warning" v-show="isOwner" @click="onInviteMember()">邀请</el-button>
@@ -74,12 +76,14 @@
 									<i class="el-icon-plus"></i>
 								</div>
 								<div class="invite-member-text">邀请</div>
-                <add-group-member :visible="showAddGroupMember" :groupId="activeGroup.id" :members="groupMembers"
-                  @reload="loadGroupMembers" @close="onCloseAddGroupMember"></add-group-member>
+								<add-group-member :visible="showAddGroupMember" :groupId="activeGroup.id"
+									:members="groupMembers" @reload="loadGroupMembers"
+									@close="onCloseAddGroupMember"></add-group-member>
 							</div>
 							<div v-for="(member, idx) in showMembers" :key="member.id">
 								<group-member v-if="idx < showMaxIdx" class="group-member" :member="member"
-                  :showDel="isOwner && member.userId != activeGroup.ownerId" @del="onKick"></group-member>
+									:showDel="isOwner && member.userId != activeGroup.ownerId"
+									@del="onKick"></group-member>
 							</div>
 						</div>
 					</el-scrollbar>
@@ -361,6 +365,13 @@ export default {
 
 		.group-list-items {
 			flex: 1;
+
+			.index-title {
+				text-align: left;
+				font-size: var(--im-larger-size-larger);
+				padding: 5px 15px;
+				color: var(--im-text-color-light);
+			}
 		}
 	}
 

im-web/src/view/Home.vue

@@ -81,7 +81,8 @@ export default {
 		return {
 			showSettingDialog: false,
 			lastPlayAudioTime: new Date().getTime() - 1000,
-			isFullscreen: true
+			isFullscreen: true,
+			reconnecting: false
 		}
 	},
 	methods: {
@@ -99,9 +100,13 @@ export default {
 				// ws初始化
 				this.$wsApi.connect(process.env.VUE_APP_WS_URL, sessionStorage.getItem("accessToken"));
 				this.$wsApi.onConnect(() => {
+					if (this.reconnecting) {
+						this.onReconnectWs();
+					} else {
 						// 加载离线消息
 						this.pullPrivateOfflineMessage(this.$store.state.chatStore.privateMsgMaxId);
 						this.pullGroupOfflineMessage(this.$store.state.chatStore.groupMsgMaxId);
+					}
 				});
 				this.$wsApi.onMessage((cmd, msgInfo) => {
 					if (cmd == 2) {
@@ -130,15 +135,44 @@ export default {
 					console.log(e);
 					if (e.code != 3000) {
 						// 断线重连
-						this.$message.error("连接断开，正在尝试重新连接...");
-						this.$wsApi.reconnect(process.env.VUE_APP_WS_URL, sessionStorage.getItem(
-							"accessToken"));
+						this.reconnectWs();
 					}
 				});
 			}).catch((e) => {
 				console.log("初始化失败", e);
 			})
 		},
+		reconnectWs() {
+			// 记录标志
+			this.reconnecting = true;
+			// 重新加载一次个人信息，目的是为了保证网络已经正常且token有效
+			this.$store.dispatch("loadUser").then(() => {
+				// 断线重连
+				this.$message.error("连接断开，正在尝试重新连接...");
+				this.$wsApi.reconnect(process.env.VUE_APP_WS_URL, sessionStorage.getItem(
+					"accessToken"));
+			}).catch(() => {
+				// 10s后重试
+				setTimeout(() => this.reconnectWs(), 10000)
+			})
+		},
+		onReconnectWs() {
+			// 重连成功
+			this.reconnecting = false;
+			// 重新加载群和好友
+			const promises = [];
+			promises.push(this.$store.dispatch("loadFriend"));
+			promises.push(this.$store.dispatch("loadGroup"));
+			Promise.all(promises).then(() => {
+				// 加载离线消息
+				this.pullPrivateOfflineMessage(this.$store.state.chatStore.privateMsgMaxId);
+				this.pullGroupOfflineMessage(this.$store.state.chatStore.groupMsgMaxId);
+				this.$message.success("重新连接成功");
+			}).catch(() => {
+				this.$message.error("初始化失败");
+				this.onExit();
+			})
+		},
 		pullPrivateOfflineMessage(minId) {
 			this.$store.commit("loadingPrivateMsg", true)
 			this.$http({