websocket 优化

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

@@ -62,25 +62,12 @@ public class PrivateMessageServiceImpl extends ServiceImpl<PrivateMessageMapper,
         this.save(msg);
         // 推送消息
         PrivateMessageVO msgInfo = BeanUtils.copyProperties(msg, PrivateMessageVO.class);
-
-
-
         IMPrivateMessage<PrivateMessageVO> sendMessage = new IMPrivateMessage<>();
-        // 发送方的id和终端类型
-        sendMessage.setSender(new IMUserInfo(1L, IMTerminalType.APP.code()));
-        // 对方的id
-        sendMessage.setRecvId(2L);
-        // 推送给对方所有终端
-        sendMessage.setRecvTerminals(IMTerminalType.codes());
-        // 同时推送给自己的其他类型终端
+        sendMessage.setSender(new IMUserInfo(session.getUserId(),session.getTerminal()));
+        sendMessage.setRecvId(msgInfo.getRecvId());
         sendMessage.setSendToSelf(true);
-        // 需要回推发送结果，将在IMListener接收发送结果
-        sendMessage.setSendResult(true);
-        // 推送的消息体
         sendMessage.setData(msgInfo);
-        // 推送消息
         imClient.sendPrivateMessage(sendMessage);
-
         log.info("发送私聊消息，发送id:{},接收id:{}，内容:{}", session.getUserId(), dto.getRecvId(), dto.getContent());
         return msg.getId();
     }

im-ui/src/api/wssocket.js

@@ -2,29 +2,27 @@ var websock = null;
 let rec; //断线重连后，延迟5秒重新创建WebSocket连接  rec用来存储延迟请求的代码
 let isConnect = false; //连接标识 避免重复连接
 let wsurl = "";
-let userId = null;
 let accessToken = "";
 let messageCallBack = null;
 let openCallBack = null;
-let hasLogin = false;
+let closeCallBack = null
 
-let createWebSocket = (url, id,token) => {
+
+let init = (url,token) => {
 	wsurl = url;
-	userId = id;
 	accessToken = token;
-	initWebSocket();
 };
 
-let initWebSocket = () => {
+let connect = () => {
 	try {
-		console.log("初始化WebSocket");
-		closeWebSocket();
-		hasLogin = false;
+		if (isConnect) {
+			return;
+		}
+		console.log("连接WebSocket");
 		websock = new WebSocket(wsurl); 
 		websock.onmessage = function(e) {
 			let sendInfo = JSON.parse(e.data)
 			if (sendInfo.cmd == 0) {	
-				hasLogin = true;
 				heartCheck.start()
 				console.log('WebSocket登录成功')
 				// 登录成功才算连接完成
@@ -32,15 +30,17 @@ let initWebSocket = () => {
 			} else if (sendInfo.cmd == 1) {
 				// 重新开启心跳定时
 				heartCheck.reset();
+				console.log("")
 			} else {
 				// 其他消息转发出去
+				console.log("收到消息:",sendInfo);  
 				messageCallBack && messageCallBack(sendInfo.cmd, sendInfo.data)
 			}
 		}
 		websock.onclose = function(e) {
 			console.log('WebSocket连接关闭')
 			isConnect = false; //断开后修改标识
-			reConnect();
+			closeCallBack && closeCallBack(e);
 		}
 		websock.onopen = function() {
 			console.log("WebSocket连接成功");
@@ -53,7 +53,6 @@ let initWebSocket = () => {
 				}
 			};
 			websock.send(JSON.stringify(loginInfo));
-
 		}
 
 		// 连接发生错误的回调方法
@@ -71,14 +70,17 @@ let initWebSocket = () => {
 //定义重连函数
 let reConnect = () => {
 	console.log("尝试重新连接");
-	if (isConnect) return; //如果已经连上就不在重连了
+	if (isConnect){
+		//如果已经连上就不在重连了
+		return; 
+	}
 	rec && clearTimeout(rec);
 	rec = setTimeout(function() { // 延迟5秒重连  避免过多次过频繁请求重连
-		initWebSocket(wsurl);
+		connect();
 	}, 5000);
 };
 //设置关闭连接
-let closeWebSocket = () => {
+let close = () => {
 	websock && websock.close();
 };
 
@@ -129,24 +131,25 @@ function sendMessage(agentData) {
 }
 
 
-function onmessage(callback) {
+function onMessage(callback) {
 	messageCallBack = callback;
 }
 
 
-function onopen(callback) {
+function onOpen(callback) {
 	openCallBack = callback;
-	if (hasLogin) {
-		openCallBack();
-	}
 }
 
-
+function onClose(callback) {
+	closeCallBack = callback;
+}
 // 将方法暴露出去
 export {
-	createWebSocket,
-	closeWebSocket,
+	init,
+	connect,
+	close,
 	sendMessage,
-	onmessage,
-	onopen
+	onOpen,
+	onMessage,
+	onClose
 }

im-ui/src/view/Home.vue

@@ -83,11 +83,12 @@
 				this.$store.commit("setUserInfo", userInfo);
 				this.$store.commit("setUserState", this.$enums.USER_STATE.FREE);
 				this.$store.commit("initStore");
-				this.$wsApi.createWebSocket(process.env.VUE_APP_WS_URL, userInfo.id, sessionStorage.getItem("accessToken"));
-				this.$wsApi.onopen(() => {
+				this.$wsApi.init(process.env.VUE_APP_WS_URL, sessionStorage.getItem("accessToken"));
+				this.$wsApi.connect();
+				this.$wsApi.onOpen(() => {
 					this.pullUnreadMessage();
 				});
-				this.$wsApi.onmessage((cmd, msgInfo) => {
+				this.$wsApi.onMessage((cmd, msgInfo) => {
 					if (cmd == 2) {
 						// 异地登录，强制下线
 						this.$message.error("您已在其他地方登陆，将被强制下线");
@@ -106,6 +107,17 @@
 						this.handleGroupMessage(msgInfo);
 					}
 				})
+				this.$wsApi.onClose((e) => {
+					console.log(e);
+					if(e.code == 1006){
+						// 服务器主动断开
+						this.$message.error("连接已断开，请重新登录");
+						location.href = "/";
+					}else{
+						this.$wsApi.connect();
+					}
+				});
+				
 			},
 			pullUnreadMessage() {
 				// 拉取未读私聊消息
@@ -198,7 +210,7 @@
 				!msg.selfSend && this.playAudioTip();
 			},
 			handleExit() {
-				this.$wsApi.closeWebSocket();
+				this.$wsApi.close();
 				sessionStorage.removeItem("accessToken");
 				location.href = "/";
 			},
@@ -246,7 +258,7 @@
 			})
 		},
 		unmounted() {
-			this.$wsApi.closeWebSocket();
+			this.$wsApi.close();
 		}
 	}
 </script>

im-uniapp/App.vue

@@ -26,11 +26,13 @@
 			initWebSocket() {
 				let loginInfo = uni.getStorageSync("loginInfo")
 				let userId = store.state.userStore.userInfo.id;
-				wsApi.createWebSocket(process.env.WS_URL, loginInfo.accessToken);
-				wsApi.onopen(() => {
+				wsApi.init(process.env.WS_URL, loginInfo.accessToken);
+				wsApi.connect();
+				wsApi.onOpen(()=>{
+					// 拉取未读消息
 					this.pullUnreadMessage();
-				});
-				wsApi.onmessage((cmd, msgInfo) => {
+				})
+				wsApi.onMessage((cmd, msgInfo) => {
 					if (cmd == 2) {
 						// 异地登录，强制下线
 						uni.showModal({
@@ -49,6 +51,19 @@
 						// 插入群聊消息
 						this.handleGroupMessage(msgInfo);
 					}
+				});
+				wsApi.onClose((res)=>{
+					// 1006是服务器主动断开，3000是APP主动关闭
+					if(res.code == 1006 || res.code == 3000){
+						uni.showToast({
+							title: '连接已断开，请重新登录',
+							icon: 'none',
+						})
+						this.exit();
+					}else{
+						// 重新连接
+						wsApi.connect();
+					}
 				})
 			},
 			pullUnreadMessage() {
@@ -131,9 +146,9 @@
 			},
 			exit() {
 				console.log("exit");
-				wsApi.closeWebSocket();
+				wsApi.close();
 				uni.removeStorageSync("loginInfo");
-				uni.reLaunch({
+				uni.navigateTo({
 					url: "/pages/login/login"
 				})
 			},
@@ -198,4 +213,5 @@
 		// #endif
 		background-color: #f8f8f8;
 	}
+	
 </style>

im-uniapp/common/request.js

@@ -19,7 +19,7 @@ const request = (options) => {
 				if (res.data.code == 200) {
 					return resolve(res.data.data)
 				} else if (res.data.code == 400) {
-					navToLogin();
+					getApp().exit();
 				} else if (res.data.code == 401) {
 					console.log("token失效，尝试重新获取")
 					if (isRefreshToken) {
@@ -36,7 +36,7 @@ const request = (options) => {
 						requestList = [];
 						isRefreshToken = false;
 						console.log("刷新token失败")
-						navToLogin();
+						getApp().exit();
 						return;
 					}
 					uni.setStorageSync("loginInfo", res.data.data);
@@ -88,13 +88,4 @@ const reqRefreshToken = (loginInfo) => {
 	});
 }
 
-
-const navToLogin = () => {
-	uni.showToast({
-		icon: "none",
-		title: "登录过期，请需要重新登录",
-		duration: 1500
-	})
-	getApp().exit();
-}
 export default request;

im-uniapp/common/wssocket.js

@@ -1,38 +1,20 @@
 let wsurl = "";
 let accessToken = "";
-let messageCallBack = null;
 let openCallBack = null;
+let messageCallBack = null;
+let closeCallBack = null;
 let isConnect = false; //连接标识 避免重复连接
-let hasLogin = false;
 let hasInit = false;
-let createWebSocket = (url, token) => {
+
+let init = (url, token) => {
 	wsurl = url;
 	accessToken = token;
-	closeWebSocket().then(() => {
-		initWebSocket();
-	});
-
-};
-
-let initWebSocket = () => {
-	console.log("初始化WebSocket");
-	uni.connectSocket({
-		url: wsurl,
-		success: (res) => {
-			console.log("websocket连接成功");
-		},
-		fail: (err) => {
-			console.log(e);
-			console.log("websocket连接失败");
-			reConnect(); //如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
-		}
-	});
-	
-	// 不能绑定多次事件,不然多触发，即便之前已经调了uni.closeSocket
+	// 防止重新注册事件
 	if(hasInit){
 		return;
 	}
 	hasInit = true;
+	
 	uni.onSocketOpen((res) => {
 		console.log("WebSocket连接已打开");
 		isConnect = true;
@@ -48,11 +30,9 @@ let initWebSocket = () => {
 		});
 	})
 	
-
 	uni.onSocketMessage((res) => {
 		let sendInfo = JSON.parse(res.data)
 		if (sendInfo.cmd == 0) {
-			hasLogin = true;
 			heartCheck.start()
 			console.log('WebSocket登录成功')
 			// 登录成功才算连接完成
@@ -71,53 +51,54 @@ let initWebSocket = () => {
 		console.log(res)
 		console.log('WebSocket连接关闭')
 		isConnect = false; //断开后修改标识
-		//reConnect();
+		closeCallBack && closeCallBack(res);
 	})
 	
-	uni.onSocketError((err) => {
-		console.log(err)
+	uni.onSocketError((e) => {
+		console.log(e)
 		isConnect = false; //连接断开修改标识
 		uni.showModal({
 			content: '连接失败，可能是websocket服务不可用，请稍后再试',
 			showCancel: false,
 		})
 	})
-	
 };
 
-//定义重连函数
-let reConnect = () => {
-	console.log("尝试重新连接");
-	if (isConnect) return; //如果已经连上就不在重连了
-	rec && clearTimeout(rec);
-	rec = setTimeout(function() { // 延迟5秒重连  避免过多次过频繁请求重连
-		initWebSocket();
-	}, 5000);
-};
+let connect = ()=>{
+	if (isConnect) {
+		return;
+	}
+	uni.connectSocket({
+		url: wsurl,
+		success: (res) => {
+			console.log("websocket连接成功");
+		},
+		fail: (e) => {
+			console.log(e);
+			console.log("websocket连接失败，10s后重连");
+			setTimeout(()=>{
+				connect();
+			},10000)
+		}
+	});
+}
+
 
 //设置关闭连接
-let closeWebSocket = () => {
-	return new Promise((resolve, reject) => {
+let close = () => {
 	if (!isConnect) {
-			resolve();
 		return;
 	}
 	uni.closeSocket({
 		code: 3000,
 		complete: (res) => {
 			console.log("关闭websocket连接");
-				hasLogin = false;
 			isConnect = false;
-				resolve();
 		},
 		fail:(e)=>{
 			console.log("关闭websocket连接失败",e);
 		}
-		})
-		
-	})
-
-
+	});
 };
 
 
@@ -157,24 +138,26 @@ function sendMessage(agentData) {
 }
 
 
-function onmessage(callback) {
+function onMessage(callback) {
 	messageCallBack = callback;
 }
 
-
-function onopen(callback) {
+function onOpen(callback) {
 	openCallBack = callback;
-	if (hasLogin) {
-		openCallBack();
 }
+
+function onClose(callback) {
+	closeCallBack = callback;
 }
 
 
 // 将方法暴露出去
 export {
-	createWebSocket,
-	closeWebSocket,
+	init,
+	connect,
+	close,
 	sendMessage,
-	onmessage,
-	onopen
+	onMessage,
+	onOpen,
+	onClose
 }

im-uniapp/pages/chat/chat.vue

@@ -98,6 +98,11 @@
 				return count;
 			}
 		},
+		watch:{
+			unreadCount(newCount,oldCount){
+				this.refreshUnreadBadge();
+			}
+		},
 		onLoad() {
 			this.refreshUnreadBadge();
 		}