uniapp 解决小程序webscoket 无法连接的问题

im-ui/src/api/httpRequest.js

@@ -47,6 +47,8 @@ http.interceptors.response.use(async response => {
 			headers: {
 				refreshToken: refreshToken
 			}
+		}).catch(()=>{
+			router.replace("/login");
 		})
 		// 保存token
 		sessionStorage.setItem("accessToken", data.accessToken);

im-uniapp/App.vue

@@ -16,7 +16,7 @@
 					this.initWebSocket(loginInfo);
 				}).catch((e) => {
 					console.log(e);
-					this.quit();
+					this.exit();
 				})
 			},
 			initWebSocket(loginInfo) {
@@ -32,7 +32,7 @@
 							content: '您已在其他地方登陆，将被强制下线',
 							showCancel: false,
 						})
-						this.quit();
+						this.exit();
 					} else if (cmd == 3) {
 						// 标记这条消息是不是自己发的
 						msgInfo.selfSend = userId == msgInfo.sendId;
@@ -136,7 +136,7 @@
 				// 播放提示音
 				!msg.selfSend && this.playAudioTip();
 			},
-			quit() {
+			exit() {
 				this.$wsApi.closeWebSocket();
 				uni.removeStorageSync("loginInfo");
 				uni.navigateTo({

im-uniapp/common/request.js

@@ -1,14 +1,17 @@
+// 请求队列
+let requestList = [];
+// 是否正在刷新中
+let isRefreshToken = false;
 
-
-const request =  (options) => {
-	const header = options.header||{};
+const request = (options) => {
+	const header = options.header || {};
 	const loginInfo = uni.getStorageSync("loginInfo");
 	if (loginInfo) {
 		header.accessToken = loginInfo.accessToken;
 	}
 	return new Promise(function(resolve, reject) {
 		uni.request({
-			url:  process.env.BASE_URL + options.url,
+			url: process.env.BASE_URL + options.url,
 			method: options.method || 'GET',
 			header: header,
 			data: options.data || {},
@@ -16,41 +19,41 @@ const request =  (options) => {
 				if (res.data.code == 200) {
 					return resolve(res.data.data)
 				} else if (res.data.code == 400) {
-					uni.navigateTo({
-						url: '/pages/login/login'
-					});
+					navToLogin();
 				} else if (res.data.code == 401) {
 					console.log("token失效，尝试重新获取")
-					if (!loginInfo) {
-						uni.navigateTo({
-							url: '/pages/login/login'
-						});
+					if (isRefreshToken) {
+						// 正在刷新token,把其他请求存起来
+						return new Promise(resolve => {
+							requestList.push(() => {
+								resolve(request(options))
+							})
+						})
 					}
+					isRefreshToken = true;
 					// 发送请求, 进行刷新token操作, 获取新的token
-					const data = await request({
-						method: 'PUT',
-						url: '/refreshToken',
-						header: {
-							refreshToken: loginInfo.refreshToken
-						}
+					const res = await reqRefreshToken(loginInfo).catch((res) => {
+						return navToLogin();
+					}).finally(()=>{
+						requestList.forEach(cb => cb());
+						requestList = [];
+						isRefreshToken = false;
 					})
-					// 换取token失败，跳转至登录界面
-					if(data.code != 200){
-						uni.navigateTo({
-							url: '/pages/login/login'
-						});
+					if (res.data.code != 200) {
+						return navToLogin();
 					}
 					// 保存token
-					uni.setStorageSync("loginInfo", data);
+					uni.setStorageSync("loginInfo", res.data.data);
 					// 重新发送刚才的请求
 					return request(options)
+
 				} else {
 					uni.showToast({
 						icon: "none",
 						title: res.data.message,
 						duration: 1500
 					})
-					return reject(res.data.data)
+					return reject(res.data)
 				}
 			},
 			fail(error) {
@@ -64,4 +67,35 @@ const request =  (options) => {
 	});
 }
 
+
+const reqRefreshToken = (loginInfo) => {
+	return new Promise(function(resolve, reject) {
+		uni.request({
+			method: 'PUT',
+			url: process.env.BASE_URL + '/refreshToken',
+			header: {
+				refreshToken: loginInfo.refreshToken
+			},
+			success: (res) => {
+				resolve(res);
+			},
+			fail: (res) => {
+				reject(res);
+			}
+		});
+	});
+}
+
+
+const navToLogin = () => {
+	uni.showToast({
+		icon: "none",
+		title: "登录过期，请需要重新登录",
+		duration: 1500
+	})
+	uni.removeStorageSync("loginInfo");
+	uni.navigateTo({
+		url: '/pages/login/login'
+	});
+}
 export default request;

im-uniapp/main.js

@@ -14,6 +14,8 @@ export function createApp() {
   app.config.globalProperties.$wsApi = socketApi;
   app.config.globalProperties.$emo = emotion;
   app.config.globalProperties.$enums = enums;
+  app.config.globalProperties.$init = (data)=>{getApp().init(data)};
+  app.config.globalProperties.$exit = (data)=>{getApp().exit()};
   return {
     app
   }

im-uniapp/manifest.json

@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx37f146131db06a98",
+        "appid" : "wxda94f40bfad0262c",
         "setting" : {
             "urlCheck" : false
         },

im-uniapp/package.json

@@ -6,16 +6,16 @@
 				"browser":"chrome",
 				"env": {
 					"UNI_PLATFORM": "h5",
-					"BASE_URL": "http://127.0.0.1:8888",
-					"WS_URL": "ws://127.0.0.1:8878/im"
+					"BASE_URL": "http://192.168.1.5:8888",
+					"WS_URL": "ws://192.168.1.5:8878/im"
 				}
 			},
 			"dev-wx-mini": {
 				"title": "开发环境-微信小程序",
 				"env": {
 					"UNI_PLATFORM": "mp-weixin",
-					"BASE_URL": "http://127.0.0.1:8888",
-					"WS_URL": "ws://127.0.0.1:8878/im"
+					"BASE_URL": "http://192.168.1.5:8888",
+					"WS_URL": "ws://192.168.1.5:8878/im"
 				}
 			},
 			"prod-h5": {
@@ -31,6 +31,7 @@
 				"title": "正式环境-微信小程序",
 				"env": {
 					"UNI_PLATFORM": "mp-weixin",
+					"BASE_URL": "https://www.boxim.online/api",
 					"WS_URL": "wss://www.boxim.online:81/im"
 				}
 			}

im-uniapp/pages.json

@@ -46,7 +46,7 @@
 		"path": "pages/group/group-member"
 	}, {
 		"path": "pages/mine/mine-edit"
-	}{
+	},{
 		"path": "pages/mine/mine-password"
 	}],
 	"globalStyle": {

im-uniapp/pages/login/login.vue

@@ -49,7 +49,7 @@
 					console.log("登录成功,自动跳转到聊天页面...")
 					uni.setStorageSync("loginInfo", data);
 					// 调用App.vue的初始化方法
-					getApp().init(data);
+					this.$init(data);
 					// 跳转到聊天页面
 					uni.switchTab({
 						url: "/pages/chat/chat"

im-uniapp/pages/mine/mine.vue

@@ -52,7 +52,7 @@
 					title: '确认退出?',
 					success: (res) => {
 						if (res.confirm) {
-							getApp().quit();
+							this.$exit();
 						}
 					}
 				});