把socket放到最外面

src/App.vue

@@ -1,7 +1,26 @@
 <script setup>
-import { onLaunch } from "@dcloudio/uni-app";
+import { watch } from "vue";
+import websocket from "@/websocket";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
 
-onLaunch(() => {});
+watch(
+  () => user.value.id,
+  (newVal) => {
+    const token = uni.getStorageSync("token");
+    if (newVal && token) {
+      websocket.createWebSocket(token, (content) => {
+        uni.$emit("socket-inbox", content);
+      });
+    }
+  },
+  {
+    deep: false, // 如果 user 是一个对象或数组，建议开启
+    immediate: false, // 若想在初始化时立即执行一次回调，可开启。
+  }
+);
 </script>
 
 <style>

src/components/BowTarget.vue

@@ -76,6 +76,7 @@ function calcRealY(num) {
 .container {
   width: calc(100% - 30px);
   margin: 15px;
+  overflow: hidden;
 }
 .target {
   position: relative;

src/pages/battle-result.vue

@@ -1,4 +1,16 @@
-<script setup></script>
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+
+const battleId = ref("");
+
+onLoad((options) => {
+  battleId.value = options.battleId;
+});
+function exit() {
+  uni.navigateBack();
+}
+</script>
 
 <template>
   <view class="container">
@@ -19,7 +31,7 @@
     <text>你是朋友中的佼佼者哦</text>
     <view>
       <view>查看靶纸</view>
-      <view>退出</view>
+      <view @click="exit">退出</view>
     </view>
   </view>
 </template>
@@ -38,7 +50,7 @@
 .tag {
   position: absolute;
   width: 32vw;
-  top: 0;
+  top: 4%;
   right: 0;
 }
 .container > view {

src/pages/first-try.vue

@@ -36,33 +36,34 @@ const createPractise = async (arrows) => {
   const result = await createPractiseAPI(arrows);
 };
 
-onMounted(() => {
-  const token = uni.getStorageSync("token");
-  websocket.createWebSocket(token, (content) => {
-    const messages = JSON.parse(content).data.updates || [];
-    messages.forEach((msg) => {
-      if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
-        scores.value.push(msg.target);
-        if (scores.value.length === total) {
-          showScore.value = true;
-        }
-        // if (step.value === 2 && msg.target.dst / 100 > 5) {
-        if (step.value === 2 && msg.target.dst > 5) {
-          btnDisabled.value = false;
-        }
+async function onReceiveMessage(content) {
+  const messages = JSON.parse(content).data.updates || [];
+  messages.forEach((msg) => {
+    if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+      scores.value.push(msg.target);
+      if (scores.value.length === total) {
+        showScore.value = true;
       }
-      if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
-        practiseResult.value = {
-          ...msg.practice,
-          arrows: JSON.parse(msg.practice.arrows),
-        };
+      // if (step.value === 2 && msg.target.dst / 100 > 5) {
+      if (step.value === 2 && msg.target.dst > 5) {
+        btnDisabled.value = false;
       }
-    });
+    }
+    if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
+      practiseResult.value = {
+        ...msg.practice,
+        arrows: JSON.parse(msg.practice.arrows),
+      };
+    }
   });
+}
+
+onMounted(() => {
+  uni.$on("socket-inbox", onReceiveMessage);
 });
 
 onUnmounted(() => {
-  websocket.closeWebSocket();
+  uni.$off("socket-inbox", onReceiveMessage);
 });
 
 const nextStep = async () => {

src/pages/practise-one.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
@@ -9,7 +9,6 @@ import ScoreResult from "@/components/ScoreResult.vue";
 import SButton from "@/components/SButton.vue";
 import { createPractiseAPI } from "@/apis";
 import { MESSAGETYPES, roundsName } from "@/constants";
-import websocket from "@/websocket";
 const start = ref(false);
 const showScore = ref(false);
 const scores = ref([]);
@@ -18,32 +17,35 @@ const practiseResult = ref({});
 const power = ref(0);
 
 const onReady = async () => {
-  const result = await createPractiseAPI(total);
+  await createPractiseAPI(total);
   start.value = true;
-  const token = uni.getStorageSync("token");
-
-  websocket.createWebSocket(token, (content) => {
-    const messages = JSON.parse(content).data.updates || [];
-    messages.forEach((msg) => {
-      if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
-        scores.value.push(msg.target);
-        power.value = msg.target.battery;
-        if (scores.value.length === total) {
-          showScore.value = true;
-        }
-      }
-      if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
-        practiseResult.value = {
-          ...msg.practice,
-          arrows: JSON.parse(msg.practice.arrows),
-        };
-      }
-    });
-  });
 };
 
+async function onReceiveMessage(content) {
+  const messages = JSON.parse(content).data.updates || [];
+  messages.forEach((msg) => {
+    if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+      scores.value.push(msg.target);
+      power.value = msg.target.battery;
+      if (scores.value.length === total) {
+        showScore.value = true;
+      }
+    }
+    if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
+      practiseResult.value = {
+        ...msg.practice,
+        arrows: JSON.parse(msg.practice.arrows),
+      };
+    }
+  });
+}
+
+onMounted(() => {
+  uni.$on("socket-inbox", onReceiveMessage);
+});
+
 onUnmounted(() => {
-  websocket.closeWebSocket();
+  uni.$off("socket-inbox", onReceiveMessage);
 });
 </script>
 

src/pages/practise-two.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
@@ -9,7 +9,6 @@ import ScoreResult from "@/components/ScoreResult.vue";
 import SButton from "@/components/SButton.vue";
 import { createPractiseAPI } from "@/apis";
 import { MESSAGETYPES } from "@/constants";
-import websocket from "@/websocket";
 const start = ref(false);
 const showScore = ref(false);
 const scores = ref([]);
@@ -18,31 +17,34 @@ const practiseResult = ref({});
 const power = ref(0);
 
 const onReady = async () => {
-  const result = await createPractiseAPI(total);
+  await createPractiseAPI(total);
   start.value = true;
-  const token = uni.getStorageSync("token");
-
-  websocket.createWebSocket(token, (content) => {
-    const messages = JSON.parse(content).data.updates || [];
-    messages.forEach((msg) => {
-      if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
-        scores.value.push(msg.target);
-        if (scores.value.length === total) {
-          showScore.value = true;
-        }
-      }
-      if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
-        practiseResult.value = {
-          ...msg.practice,
-          arrows: JSON.parse(msg.practice.arrows),
-        };
-      }
-    });
-  });
 };
 
+async function onReceiveMessage(content) {
+  const messages = JSON.parse(content).data.updates || [];
+  messages.forEach((msg) => {
+    if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+      scores.value.push(msg.target);
+      if (scores.value.length === total) {
+        showScore.value = true;
+      }
+    }
+    if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
+      practiseResult.value = {
+        ...msg.practice,
+        arrows: JSON.parse(msg.practice.arrows),
+      };
+    }
+  });
+}
+
+onMounted(() => {
+  uni.$on("socket-inbox", onReceiveMessage);
+});
+
 onUnmounted(() => {
-  websocket.closeWebSocket();
+  uni.$off("socket-inbox", onReceiveMessage);
 });
 </script>