藏好森林 发表于 2024-9-22 11:14:24

给你的网站页脚添加几个服务器延迟数据

有时候在外其他电脑没有v6,想内网穿透使用家里服务的时候,不知道使用的电脑网络使用哪个服务延迟比较低,所以就想在导航页添加一个搭建好frp服务器的延迟对比,然后挑选低的使用,每个服务器都穿透了相同的内网服务,这是我的使用场景。其他的就按需使用了!



正文
1.https的无法检测http的延迟
2.大家只需要修改下方代码中的百度或者谷歌地址,或者按照百度谷歌的格式继续添加即可,最后一个不要逗号
3.我是搭配sun-panel使用的,添加在个性化设置的页脚代码里面
4.检测的是当前使用的电脑网络到各个服务器的延迟
5.每次打开或者刷新导航页都会检测一次

代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络延迟测试</title>
    <style>
      footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
      }
    </style>
</head>
<body>
    <footer id="footer">
      <div id="latencies">延迟: 正在测量...</div>
    </footer>

    <script>
      const websites = [
            { name: '百度', url: 'https://www.baidu.com' },
            { name: '谷歌', url: 'https://www.google.com' }
      ];

      async function fetchWithTimeout(url, timeout = 2000) {
            return Promise.race([
                fetch(url, { method: 'HEAD', mode: 'no-cors' }),
                new Promise((_, reject) =>
                  setTimeout(() => reject(new Error('超时')), timeout)
                )
            ]);
      }

      async function measureLatency() {
            const latencies = await Promise.all(websites.map(async site => {
                const start = Date.now();
                try {
                  await fetchWithTimeout(site.url);
                  const latency = Date.now() - start;
                  return `${site.name}: ${latency} 毫秒`;
                } catch (error) {
                  return `${site.name}: 测量失败 (${error.message})`;
                }
            }));

            document.getElementById('latencies').innerText = latencies.join(' | ');
      }

      measureLatency();
    </script>
</body>
</html>

爱浪漫的 发表于 2024-9-22 11:15:27

纯粹路过,没任何兴趣,仅仅是看在老用户份上回复一下

暗黑精灵 发表于 2024-9-22 11:15:27

占位编辑
页: [1]
查看完整版本: 给你的网站页脚添加几个服务器延迟数据