网速和延迟检测

src/features/OnlineExam/CheckComputer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import moment from "moment";
 import VueQrcode from "@chenfengyuan/vue-qrcode";
-import { onMounted, onUnmounted, watch } from "vue";
+import { onMounted, onUnmounted, watch, computed } from "vue";
 import { useTimers } from "@/setups/useTimers";
 import { Close, Checkmark } from "@vicons/ionicons5";
 import { closeMediaStream, getMediaStream } from "@/utils/camera";
@@ -16,16 +16,46 @@ const { addTimeout, addInterval } = useTimers();
 const show = $ref(true);
 
 let current = $ref(1);
-// @ts-expect-error chrome支持，但还有浏览器不支持，所以没进类型定义
-let downlink = navigator.connection.downlink;
-// @ts-expect-error
-let rtt = navigator.connection.rtt;
-const network = $ref({
-  downlink,
-  downlinkStatus: downlink > 0.5,
-  rrt: rtt,
-  rrtStatus: rtt < 1000,
+// // @ts-expect-error chrome支持，但还有浏览器不支持，所以没进类型定义
+// let downlink = navigator.connection.downlink;
+// // @ts-expect-error
+// let rtt = navigator.connection.rtt;
+// const network = $ref({
+//   downlink,
+//   downlinkStatus: downlink > 0.5,
+//   rrt: rtt,
+//   rrtStatus: rtt < 1000,
+// });
+
+let downlink = $ref(100);
+let rtt = $ref(0);
+const network = $computed(() => {
+  return {
+    downlink,
+    downlinkStatus: downlink > 0.5,
+    rrt: rtt,
+    rrtStatus: rtt < 1000,
+  };
 });
+function getDelay() {
+  let startTime = new Date().getTime();
+  let img = new Image();
+  img.src =
+    "https://oss-file.qmth.com.cn/sop-public/file/2024/11/12/esmkRvFbkOr_VNaaZBzW0.jpg";
+  img.onload = () => {
+    const endTime = new Date().getTime();
+    let fs = 237; //图片文件大小,字节
+    let l = 2; //小数点的位数
+    let alltime = (fs * 1000) / (endTime - startTime);
+    let Lnum = Math.pow(10, l);
+    let calcspeed = Math.round(alltime * Lnum) / Lnum;
+    downlink = Math.round((calcspeed / 128) * Lnum) / Lnum;
+
+    rtt = endTime - startTime;
+  };
+}
+
+getDelay();
 
 const time = $ref({
   currentTimeZone: moment().format("Z"),