| ${formatTime(startedAt)} |
${escapeHtml(client.ip || "unknown")} |
${escapeHtml(locationText(client))} |
${escapeHtml(summary.target || "")} |
${formatNumber(summary.score)} |
${formatNumber(summary.avgDownloadMbps)} Mbps |
${formatNumber(summary.avgUploadMbps)} Mbps |
${formatNumber(summary.avgLatencyMs)} ms |
${(record.samples || []).length} |
`;
}).join("");
}
function updateLiveMetrics() {
const successes = state.samples.filter(sample => sample.success);
const failures = state.samples.length - successes.length;
const latencies = successes.filter(sample => sample.kind === "latency").map(sample => sample.latencyMs || 0);
const downloads = successes.filter(sample => sample.kind === "download").map(sample => sample.mbps || 0);
const uploads = successes.filter(sample => sample.kind === "upload").map(sample => sample.mbps || 0);
const avg = average(latencies);
const jitter = average(latencies.slice(1).map((value, index) => Math.abs(value - latencies[index])));
const loss = state.samples.length ? failures / state.samples.length * 100 : 0;
const score = state.samples.length ? Math.max(0, 100 - loss * 1.5 - Math.min(avg / 20, 20) - Math.min(jitter / 5, 15)) : 0;
els.score.textContent = state.samples.length ? formatNumber(score) : "--";
els.downloadSpeed.textContent = downloads.length ? `${formatNumber(average(downloads))} Mbps` : "--";
els.uploadSpeed.textContent = uploads.length ? `${formatNumber(average(uploads))} Mbps` : "--";
els.latencyMetric.textContent = latencies.length ? `${formatNumber(avg)} ms` : "--";
els.sampleCount.textContent = `${state.samples.length} 个样本`;
}
function updateSummary(summary) {
els.score.textContent = formatNumber(summary.score);
els.downloadSpeed.textContent = `${formatNumber(summary.avgDownloadMbps)} Mbps`;
els.uploadSpeed.textContent = `${formatNumber(summary.avgUploadMbps)} Mbps`;
els.latencyMetric.textContent = `${formatNumber(summary.avgLatencyMs)} ms`;
}
function drawLiveChart() {
const points = state.samples
.filter(sample => sample.success && typeof sample.mbps === "number" && sample.mbps > 0)
.map(sample => ({ x: new Date(sample.at), y: sample.mbps }));
drawLineChart(els.liveChart, points, {
empty: "等待上传/下载样本",
yLabel: "Mbps",
line: "#2563eb",
});
}
function drawHistoryChart() {
const points = state.records
.map(record => {
const summary = record.summary || {};
return {
x: new Date(summary.startedAt || record.createdAt),
y: Number(summary.avgDownloadMbps || 0),
score: Number(summary.score || 0),
};
})
.filter(point => Number.isFinite(point.y) && point.x.toString() !== "Invalid Date")
.sort((a, b) => a.x - b.x);
drawLineChart(els.historyChart, points, {
empty: "暂无历史记录",
yLabel: "下载 Mbps",
line: "#0f9f6e",
showPeriods: true,
});
}
function drawLineChart(canvas, points, options) {
const ctx = canvas.getContext("2d");
const width = canvas.clientWidth || canvas.width;
const height = canvas.clientHeight || canvas.height;
const scale = window.devicePixelRatio || 1;
canvas.width = Math.floor(width * scale);
canvas.height = Math.floor(height * scale);
ctx.setTransform(scale, 0, 0, scale, 0, 0);
ctx.clearRect(0, 0, width, height);
const pad = { left: 48, right: 18, top: 18, bottom: 36 };
const plotWidth = width - pad.left - pad.right;
const plotHeight = height - pad.top - pad.bottom;
ctx.fillStyle = "#fbfdff";
ctx.fillRect(0, 0, width, height);
if (options.showPeriods) {
drawPeriodBands(ctx, pad, plotWidth, plotHeight);
}
ctx.strokeStyle = "#d8e0ea";
ctx.lineWidth = 1;
for (let i = 0; i <= 4; i++) {
const y = pad.top + plotHeight * i / 4;
ctx.beginPath();
ctx.moveTo(pad.left, y);
ctx.lineTo(width - pad.right, y);
ctx.stroke();
}
if (!points.length) {
ctx.fillStyle = "#627084";
ctx.font = "13px system-ui";
ctx.fillText(options.empty, pad.left, pad.top + 24);
return;
}
const ys = points.map(point => point.y);
const minY = Math.min(0, ...ys);
const maxY = Math.max(...ys, 10);
const spanY = maxY - minY || 1;
const xMin = points[0].x.getTime();
const xMax = points[points.length - 1].x.getTime();
const spanX = xMax - xMin || 1;
const px = point => pad.left + (point.x.getTime() - xMin) / spanX * plotWidth;
const py = point => pad.top + plotHeight - (point.y - minY) / spanY * plotHeight;
ctx.strokeStyle = options.line;
ctx.lineWidth = 2;
ctx.beginPath();
points.forEach((point, index) => {
const x = px(point);
const y = py(point);
if (index === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
});
ctx.stroke();
ctx.fillStyle = options.line;
points.forEach(point => {
ctx.beginPath();
ctx.arc(px(point), py(point), 3, 0, Math.PI * 2);
ctx.fill();
});
ctx.fillStyle = "#627084";
ctx.font = "12px system-ui";
ctx.fillText(`${formatNumber(maxY)} ${options.yLabel}`, 8, pad.top + 4);
ctx.fillText(`${formatNumber(minY)} ${options.yLabel}`, 8, pad.top + plotHeight);
ctx.fillText(formatTime(points[0].x), pad.left, height - 12);
ctx.fillText(formatTime(points[points.length - 1].x), Math.max(pad.left, width - pad.right - 120), height - 12);
}
function drawPeriodBands(ctx, pad, plotWidth, plotHeight) {
const labels = [
{ text: "早上", color: "rgba(37, 99, 235, 0.06)" },
{ text: "中午", color: "rgba(183, 107, 0, 0.08)" },
{ text: "晚上", color: "rgba(15, 159, 110, 0.07)" },
];
labels.forEach((label, index) => {
const x = pad.left + plotWidth * index / labels.length;
const w = plotWidth / labels.length;
ctx.fillStyle = label.color;
ctx.fillRect(x, pad.top, w, plotHeight);
ctx.fillStyle = "#627084";
ctx.font = "12px system-ui";
ctx.fillText(label.text, x + 8, pad.top + 18);
});
}
function appendLog(sample) {
const value = sample.kind === "latency" ? `${formatNumber(sample.latencyMs)}ms` : `瞬时 ${formatNumber(sample.mbps)}Mbps`;
const line = `${formatTime(sample.at)} ${sample.kind} ${sample.success ? "OK" : "FAIL"} ${value} ${sample.error || ""}`;
const div = document.createElement("div");
div.textContent = line;
els.eventLog.prepend(div);
while (els.eventLog.children.length > 30) {
els.eventLog.removeChild(els.eventLog.lastChild);
}
}
function setServerState(type, label) {
els.serverState.className = `state ${type}`;
els.serverState.textContent = label;
}
function setNotice(message, isError = false) {
els.notice.textContent = message;
els.notice.className = isError ? "notice error" : "notice";
}
function queueNotice(position) {
if (position > 0) {
return `正在排队，当前排第 ${position} 位，等待其他用户完成...`;
}
return "正在排队，等待其他用户完成...";
}
function setTestingControls(running) {
els.startButton.disabled = running;
els.stopButton.hidden = !running;
els.stopButton.disabled = !running;
}
function throwIfCanceled() {
if (state.cancelRequested || (state.abortController && state.abortController.signal.aborted)) {
throw cancellationError();
}
}
function cancellationError() {
const error = new Error("测试已停止");
error.name = "AbortError";
return error;
}
function sleep(ms, signal) {
return new Promise((resolve, reject) => {
if (signal && signal.aborted) {
reject(cancellationError());
return;
}
const timer = window.setTimeout(resolve, ms);
const abort = () => {
window.clearTimeout(timer);
reject(cancellationError());
};
if (signal) {
signal.addEventListener("abort", abort, { once: true });
}
});
}
function closeSource() {
if (state.source) {
state.source.close();
state.source = null;
}
}
function value(id) {
return document.getElementById(id).value.trim();
}
function numberValue(id) {
const field = document.getElementById(id);
if (field) {
return Number(field.value);
}
const selected = document.querySelector(`input[name="${id}"]:checked`);
return selected ? Number(selected.value) : 0;
}
function shellQuote(value) {
return `'${String(value).replaceAll("'", "'\\''")}'`;
}
function fallbackCopy(value) {
const textarea = document.createElement("textarea");
textarea.value = value;
textarea.setAttribute("readonly", "");
textarea.style.position = "fixed";
textarea.style.top = "-1000px";
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
}
function average(values) {
if (!values.length) return 0;
return values.reduce((sum, value) => sum + value, 0) / values.length;
}
function transferTimeoutMillis(timeoutMillis) {
return Math.max(timeoutMillis || 3000, 30000);
}
async function fetchWithTimeout(url, options, timeoutMillis, signal) {
const controller = new AbortController();
const timeoutID = window.setTimeout(() => controller.abort(), timeoutMillis);
const abort = () => controller.abort();
if (signal) {
if (signal.aborted) {
controller.abort();
} else {
signal.addEventListener("abort", abort, { once: true });
}
}
try {
return await fetch(url, { ...options, signal: controller.signal });
} finally {
window.clearTimeout(timeoutID);
if (signal) {
signal.removeEventListener("abort", abort);
}
}
}
function mbps(bytes, elapsedMs) {
if (!bytes || !elapsedMs) return 0;
return round(bytes * 8 / elapsedMs / 1000);
}
function round(value) {
return Math.round(value * 100) / 100;
}
function formatNumber(value) {
const number = Number(value);
if (!Number.isFinite(number)) return "--";
return number.toFixed(number >= 100 ? 0 : 1);
}
function formatTime(value) {
if (!value) return "--";
const date = value instanceof Date ? value : new Date(value);
if (date.toString() === "Invalid Date") return "--";
return new Intl.DateTimeFormat("zh-CN", {
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
}).format(date);
}
function locationText(client) {
const place = [client.country, client.region, client.city].filter(Boolean).join(" ") || "未知地区";
const network = [client.isp || "未知运营商", client.asn].filter(Boolean).join(" / ");
return [place, network].filter(Boolean).join(" | ") || "未知";
}
function scoreClass(score) {
const value = Number(score || 0);
if (value >= 85) return "score-good";
if (value >= 60) return "score-mid";
return "score-bad";
}
function escapeHtml(value) {
return String(value)
.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll('"', """)
.replaceAll("'", "'");
}