From 58bd5d9bb26c81ae1cdaaaece42ea3897e184042 Mon Sep 17 00:00:00 2001
From: kron <kai_hong@126.com>
Date: Thu, 5 Jun 2025 21:32:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=8Asocket=E6=94=BE=E5=88=B0=E6=9C=80?=
 =?UTF-8?q?=E5=A4=96=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                  | 23 +++++++++++++++--
 src/components/BowTarget.vue |  1 +
 src/pages/battle-result.vue  | 18 ++++++++++---
 src/pages/first-try.vue      | 43 ++++++++++++++++---------------
 src/pages/practise-one.vue   | 50 +++++++++++++++++++-----------------
 src/pages/practise-two.vue   | 48 +++++++++++++++++-----------------
 6 files changed, 110 insertions(+), 73 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a927eb2..c6b8680 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/BowTarget.vue b/src/components/BowTarget.vue
index b8454b8..12118af 100644
--- a/src/components/BowTarget.vue
+++ b/src/components/BowTarget.vue
@@ -76,6 +76,7 @@ function calcRealY(num) {
 .container {
   width: calc(100% - 30px);
   margin: 15px;
+  overflow: hidden;
 }
 .target {
   position: relative;
diff --git a/src/pages/battle-result.vue b/src/pages/battle-result.vue
index 3f94938..682d3f7 100644
--- a/src/pages/battle-result.vue
+++ b/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 {
diff --git a/src/pages/first-try.vue b/src/pages/first-try.vue
index 39105af..58b7d8d 100644
--- a/src/pages/first-try.vue
+++ b/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 () => {
diff --git a/src/pages/practise-one.vue b/src/pages/practise-one.vue
index 002e23c..4e20e08 100644
--- a/src/pages/practise-one.vue
+++ b/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>
 
diff --git a/src/pages/practise-two.vue b/src/pages/practise-two.vue
index 92ef8ef..bcf6f3a 100644
--- a/src/pages/practise-two.vue
+++ b/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>