diff --git a/src/pages/ping.tsx b/src/pages/ping.tsx new file mode 100644 index 0000000..d022d73 --- /dev/null +++ b/src/pages/ping.tsx @@ -0,0 +1,107 @@ +import MainContent from '@/components/MainContent'; +import { Box, Button, Stack, TextField } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import React, { useState, useRef } from 'react'; +import SyntaxHighlighter from 'react-syntax-highlighter'; +import { anOldHope } from 'react-syntax-highlighter/dist/esm/styles/hljs'; + +const Wrap = styled('div')({ + width: '100%', + marginTop: '20px', +}); + +const Ping: React.FC = () => { + const [url, setUrl] = useState(''); + const [isPing, setIsPing] = useState(false); + const [result, setResult] = useState([]); + const isPingRef = useRef(false); + const timerRef = useRef(null); + + const computingTime = (startTime: number) => { + const nowDate = new Date(); + var timec = ( + nowDate.getMinutes() * 60 + + nowDate.getSeconds() + + nowDate.getMilliseconds() / 1000 - + startTime + ).toFixed(2); + if (+timec > 20) { + setResult((result) => [...result, `${url} ping timeout`]); + } else { + setResult((result) => [...result, `${url} ping ${timec}ms`]); + } + if (isPingRef.current) { + timerRef.current = setTimeout(runPing, 1000 - +timec); + } + }; + + const runPing = () => { + const urlDate = new Date(); + const startTime = + urlDate.getMinutes() * 60 + + urlDate.getSeconds() + + urlDate.getMilliseconds() / 1000; + const img = new Image(); + img.src = url + '/' + Math.random(); + img.onload = () => { + computingTime(startTime); + }; + img.onerror = () => { + computingTime(startTime); + }; + }; + + function pingURL(url: string) { + if (!url) return; + if (isPing) { + isPingRef.current = false; + setIsPing(false); + clearTimeout(timerRef.current!); + } else { + setResult([]); + isPingRef.current = true; + setIsPing(true); + runPing(); + } + } + + return ( + + + + setUrl(e.target.value)} + /> + + + + {result.length > 0 && ( + + {result.join('\n') || ''} + + )} + + + + ); +}; + +export default Ping; diff --git a/src/utils/tools.ts b/src/utils/tools.ts index f77b32d..b67fa2d 100644 --- a/src/utils/tools.ts +++ b/src/utils/tools.ts @@ -331,4 +331,11 @@ export const allTools: Tool[] = [ key: ['在线文本对比Diff', '高亮显示'], subTitle: '在线文本对比Diff,支持多种对比模式,差异部分高亮显示', }, + { + label: 'ping', + tags: [Tags.OTHER], + path: '/ping', + key: ['ping'], + subTitle: '在线 ping', + }, ];