添加开始游戏前，进行连接检测

src/App.vue

@@ -1,24 +1,23 @@
 <script setup>
-import { watch, onMounted, onUnmounted } from "vue";
+import { watch } from "vue";
 import { onShow } from "@dcloudio/uni-app";
 import websocket from "@/websocket";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
-const { updateConnect, updateUser } = store;
+const { updateUser } = store;
 
 watch(
   () => user.value.id,
   (newVal) => {
     const token = uni.getStorageSync("token");
     if (newVal && token) {
-      websocket.createWebSocket(token, updateConnect, (content) => {
+      websocket.createWebSocket(token, (content) => {
         uni.$emit("socket-inbox", content);
       });
     }
     if (!newVal) {
-      updateConnect(false);
       websocket.closeWebSocket();
     }
   },

src/pages/battle-room.vue

@@ -15,6 +15,7 @@ import PlayersRow from "@/components/PlayersRow.vue";
 import SModal from "@/components/SModal.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis";
+import { checkConnection } from "@/util";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -279,6 +280,7 @@ const exitRoom = async () => {
 };
 
 onMounted(() => {
+  checkConnection();
   uni.$on("socket-inbox", onReceiveMessage);
 });
 

src/pages/first-try.vue

@@ -11,7 +11,7 @@ import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
 import { createPractiseAPI } from "@/apis";
-import { generateCanvasImage } from "@/util";
+import { generateCanvasImage, checkConnection } from "@/util";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -72,6 +72,7 @@ async function onReceiveMessage(messages = []) {
 }
 
 onMounted(() => {
+  checkConnection();
   uni.$on("socket-inbox", onReceiveMessage);
 });
 

src/pages/index.vue

@@ -17,7 +17,7 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { updateConfig, updateUser, updateDevice, updateRank } = store;
 // 使用storeToRefs，用于UI里显示，保持响应性
-const { user, device, remoteConnect, rankData } = storeToRefs(store);
+const { user, device, rankData } = storeToRefs(store);
 const showModal = ref(false);
 const isIos = ref(true);
 

src/pages/practise-one.vue

@@ -9,7 +9,7 @@ import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
 import { createPractiseAPI, getHomeData } from "@/apis";
-import { generateCanvasImage } from "@/util";
+import { generateCanvasImage, checkConnection } from "@/util";
 import { MESSAGETYPES, roundsName } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -62,6 +62,7 @@ async function onComplete() {
 }
 
 onMounted(() => {
+  checkConnection();
   uni.$on("socket-inbox", onReceiveMessage);
 });
 

src/pages/practise-two.vue

@@ -9,7 +9,7 @@ import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
 import { createPractiseAPI, getHomeData } from "@/apis";
-import { generateCanvasImage } from "@/util";
+import { generateCanvasImage, checkConnection } from "@/util";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -66,6 +66,7 @@ async function onComplete() {
 }
 
 onMounted(() => {
+  checkConnection();
   uni.$on("socket-inbox", onReceiveMessage);
 });
 

src/store.js

@@ -12,7 +12,6 @@ const defaultUser = {
 export default defineStore("store", {
   // 状态
   state: () => ({
-    remoteConnect: false,
     user: defaultUser,
     device: {
       deviceId: "",
@@ -37,9 +36,6 @@ export default defineStore("store", {
     updateRank(data = {}) {
       this.rankData = { rank: data.rank || [], ringRank: data.ringRank || [] };
     },
-    updateConnect(connect) {
-      this.remoteConnect = connect;
-    },
     updateUser(user = {}) {
       this.user = { ...defaultUser, ...user };
       const rankInfos = this.config.randInfos || [];

src/util.js

@@ -1,3 +1,23 @@
+import websocket from "@/websocket";
+
+export const checkConnection = () => {
+  uni.sendSocketMessage({
+    data: JSON.stringify({ event: "ping", data: {} }),
+    fail: () => {
+      const token = uni.getStorageSync("token");
+      if (!token) return;
+      uni.showToast({
+        title: "连接中...",
+        icon: "none",
+      });
+      // 如果发送失败，说明连接已断开，需要重新连接
+      websocket.createWebSocket(token, (content) => {
+        uni.$emit("socket-inbox", content);
+      });
+    },
+  });
+};
+
 export const debounce = (fn, delay = 300) => {
   let timer = null;
   return async (...args) => {

src/websocket.js

@@ -13,14 +13,18 @@ const RECONNECT_CONFIG = {
 /**
  * 建立 WebSocket 连接
  */
-function createWebSocket(token, onUpdate, onMessage) {
+function createWebSocket(token, onMessage) {
   const url = `wss://api.shelingxingqiu.com/socket?authorization=${token}`;
   socket = uni.connectSocket({
     url,
     success: () => {
       console.log("websocket 连接成功");
-      onUpdate(true);
       reconnectCount = 0; // 重置重连次数
+      // 启动心跳
+      startHeartbeat();
+    },
+    fail: () => {
+      reconnect(onMessage);
     },
   });
 
@@ -38,19 +42,15 @@ function createWebSocket(token, onUpdate, onMessage) {
 
   uni.onSocketClose((result) => {
     console.log("WebSocket 已关闭", result);
-    onUpdate(false);
     stopHeartbeat();
-    reconnect(onUpdate, onMessage);
+    reconnect(onMessage);
   });
-
-  // 启动心跳
-  startHeartbeat();
 }
 
 /**
  * 重连机制
  */
-function reconnect(onUpdate, onMessage) {
+function reconnect(onMessage) {
   if (reconnectCount >= RECONNECT_CONFIG.MAX_COUNT) return;
 
   reconnectTimer && clearTimeout(reconnectTimer);
@@ -64,7 +64,7 @@ function reconnect(onUpdate, onMessage) {
   );
   reconnectTimer = setTimeout(() => {
     console.log("reconnecting...");
-    createWebSocket(token, onUpdate, onMessage);
+    createWebSocket(token, onMessage);
     reconnectCount++;
   }, delay);
 }