feat: live reading during the speed test, and a 15 s limit that keeps what was measured
This commit is contained in:
redtea committed
1 parent
6441b4329d
commit
ab8751d436
4 files changed
+305
-32
No files matched your search
@@ -19,6 +19,24 @@
|
||||
.speed { display:flex; gap:28px; flex-wrap:wrap; margin-top:16px; }
|
||||
.speed b { display:block; font-size:20px; font-variant-numeric:tabular-nums; }
|
||||
.speed span { color:var(--muted); font-size:13px; }
|
||||
.live { display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:20px; }
|
||||
.gauge { position:relative; width:240px; flex:none; }
|
||||
.gauge svg { display:block; width:100%; }
|
||||
.gauge path { fill:none; stroke-width:14; stroke-linecap:round; }
|
||||
.gauge .track { stroke:#0c0f13; }
|
||||
.gauge .fill { stroke:var(--accent); stroke-dasharray:251.4; stroke-dashoffset:251.4; transition:stroke-dashoffset .25s linear, stroke .3s; }
|
||||
.gauge .num { position:absolute; left:0; right:0; bottom:26px; text-align:center; font-size:38px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
|
||||
.gauge .unit { position:absolute; left:0; right:0; bottom:4px; text-align:center; color:var(--muted); font-size:13px; }
|
||||
.live .side { flex:1; min-width:220px; }
|
||||
.live .phase { font-size:15px; margin-bottom:8px; }
|
||||
.live .phase i { font-style:normal; color:var(--accent); margin-right:6px; }
|
||||
.live.up .phase i { color:var(--ok); }
|
||||
.live.up .gauge .fill { stroke:var(--ok); }
|
||||
.spark { display:block; width:100%; height:64px; }
|
||||
.spark polyline { fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
|
||||
.spark polygon { fill:var(--accent); opacity:.15; }
|
||||
.live.up .spark polyline { stroke:var(--ok); }
|
||||
.live.up .spark polygon { fill:var(--ok); }
|
||||
label.check { display:inline-flex; align-items:center; gap:8px; margin:0; color:var(--text); font-size:14px; cursor:pointer; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -59,7 +77,7 @@
|
||||
<h2>Скорость соединения</h2>
|
||||
<p class="muted">Клиент замеряет свой канал до хоста панели - тот же, по которому идут терминал, файлы и http-проброс.
|
||||
С галочкой «До браузера» данные идут дальше, через панель до этого браузера и обратно: так виден весь путь клиент - панель - браузер.
|
||||
Замер занимает около 7 секунд и на это время нагружает канал.</p>
|
||||
Замер занимает около 7 секунд, не дольше 20, и на это время нагружает канал.</p>
|
||||
<div class="row">
|
||||
<button id="speed-btn" type="button">Замерить скорость</button>
|
||||
<label class="check" title="Данные пойдут не только между клиентом и хостом панели, а через панель до этого браузера и обратно">
|
||||
@@ -67,6 +85,23 @@
|
||||
</label>
|
||||
<span class="muted" id="speed-note"></span>
|
||||
</div>
|
||||
<div class="live" id="live" hidden>
|
||||
<div class="gauge">
|
||||
<svg viewBox="0 0 200 110">
|
||||
<path class="track" d="M20 100 A80 80 0 0 1 180 100"/>
|
||||
<path class="fill" id="lv-arc" d="M20 100 A80 80 0 0 1 180 100"/>
|
||||
</svg>
|
||||
<div class="num" id="lv-num">-</div>
|
||||
<div class="unit" id="lv-unit"></div>
|
||||
</div>
|
||||
<div class="side">
|
||||
<div class="phase"><i id="lv-ico"></i><span id="lv-phase"></span></div>
|
||||
<svg class="spark" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||
<polygon id="lv-area" points=""/>
|
||||
<polyline id="lv-line" points=""/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="speed" id="speed" hidden>
|
||||
<div><b id="sp-ping"></b><span>задержка</span></div>
|
||||
<div><b id="sp-down"></b><span id="sp-down-lbl"></span></div>
|
||||
@@ -85,11 +120,12 @@
|
||||
while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; }
|
||||
return n.toFixed(n < 10 && i > 0 ? 1 : 0) + ' ' + u[i];
|
||||
}
|
||||
function rate(bps) {
|
||||
function rateParts(bps) {
|
||||
var u = ['бит/с', 'Кбит/с', 'Мбит/с', 'Гбит/с'], i = 0;
|
||||
while (bps >= 1000 && i < u.length - 1) { bps /= 1000; i++; }
|
||||
return bps.toFixed(bps < 100 && i > 0 ? 1 : 0) + ' ' + u[i];
|
||||
return [bps.toFixed(bps < 100 && i > 0 ? 1 : 0), u[i]];
|
||||
}
|
||||
function rate(bps) { return rateParts(bps).join(' '); }
|
||||
function meter(name, pct, sub) {
|
||||
pct = Math.max(0, Math.min(100, pct));
|
||||
$(name + '-val').textContent = Math.round(pct) + '%';
|
||||
@@ -174,63 +210,135 @@
|
||||
}
|
||||
one().catch(function () {});
|
||||
}
|
||||
// Times what the client sends, from its first byte to the end of the stream.
|
||||
function drain(onFirst) {
|
||||
return fetch(base + '/speed/up', {credentials: 'same-origin', cache: 'no-store'}).then(function (r) {
|
||||
// Reads what the client sends and times it from the first byte. It stops by
|
||||
// itself a little after the client's window, so bytes still queued on a slow
|
||||
// link don't hold the result back. st.n is the count so far, for the live
|
||||
// reading.
|
||||
function drain(st, onFirst) {
|
||||
var ac = new AbortController(), last = 0;
|
||||
st.stop = function () { ac.abort(); };
|
||||
function done() { return st.start && last > st.start ? st.n * 8000 / (last - st.start) : 0; }
|
||||
return fetch(base + '/speed/up', {credentials: 'same-origin', cache: 'no-store', signal: ac.signal}).then(function (r) {
|
||||
if (!r.ok) throw new Error('HTTP ' + r.status);
|
||||
var rd = r.body.getReader(), n = 0, start = 0;
|
||||
var rd = r.body.getReader();
|
||||
function pump() {
|
||||
return rd.read().then(function (c) {
|
||||
if (c.done) return start && n ? n * 8000 / Math.max(1, performance.now() - start) : 0;
|
||||
if (!start) { start = performance.now(); onFirst(); }
|
||||
n += c.value.length;
|
||||
if (c.done) return done();
|
||||
last = performance.now();
|
||||
if (!st.start) { st.start = last; setTimeout(st.stop, 4000); onFirst(); }
|
||||
else st.n += c.value.length;
|
||||
return pump();
|
||||
});
|
||||
}
|
||||
return pump();
|
||||
});
|
||||
}).catch(function (e) { if (st.start) return done(); throw e; });
|
||||
}
|
||||
// The test through the browser: the client's download is what this page
|
||||
// uploads, and its upload is timed here, where it arrives.
|
||||
function relayTest() {
|
||||
function relayTest(st) {
|
||||
return panelPing().then(function (ping) {
|
||||
return post('/speed/relay').then(function (res) {
|
||||
if (!res.ok) return res;
|
||||
var stop = new AbortController();
|
||||
var up = drain(function () { stop.abort(); });
|
||||
var up = drain(st, function () { stop.abort(); });
|
||||
up.catch(function () {});
|
||||
feed(stop);
|
||||
return post('/speed?relay=1').then(function (res) {
|
||||
stop.abort();
|
||||
// No upload under way by now: none is coming.
|
||||
if (!res.ok || !st.start) { st.stop(); }
|
||||
if (!res.ok) return res;
|
||||
return up.then(function (bps) {
|
||||
return up.catch(function () { return 0; }).then(function (bps) {
|
||||
res.data.ping_ms += ping;
|
||||
res.data.up_bps = bps;
|
||||
if (bps) res.data.up_bps = bps;
|
||||
return res;
|
||||
});
|
||||
}, function (e) { stop.abort(); throw e; });
|
||||
}, function (e) { stop.abort(); st.stop(); throw e; });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// The live reading: the rate over the last second, from the byte counts the
|
||||
// panel keeps for the running test - or, for the client's upload in a test
|
||||
// through the browser, from what has arrived here.
|
||||
var ARC = 251.4, lv = null;
|
||||
function liveStart(relay, st) {
|
||||
lv = {relay: relay, st: st, phase: '', pts: [], hist: [], busy: false};
|
||||
$('live').hidden = false;
|
||||
liveShow('ping', 0);
|
||||
lv.timer = setInterval(liveTick, 200);
|
||||
}
|
||||
function liveStop() {
|
||||
if (!lv) return;
|
||||
clearInterval(lv.timer);
|
||||
lv = null;
|
||||
$('live').hidden = true;
|
||||
}
|
||||
function liveTick() {
|
||||
var cur = lv;
|
||||
if (cur.relay && cur.st.start) { livePoint(cur, 'up', cur.st.n, performance.now()); return; }
|
||||
if (cur.busy) return;
|
||||
cur.busy = true;
|
||||
fetch(base + '/speed/progress', {credentials: 'same-origin', cache: 'no-store'})
|
||||
.then(json)
|
||||
.then(function (d) {
|
||||
if (cur !== lv || !d.phase || (cur.relay && cur.st.start)) return;
|
||||
livePoint(cur, d.phase, d.phase === 'up' ? d.up : d.down, d.ms);
|
||||
})
|
||||
.catch(function () {})
|
||||
.then(function () { cur.busy = false; });
|
||||
}
|
||||
function livePoint(cur, phase, bytes, ms) {
|
||||
if (phase !== cur.phase) { cur.phase = phase; cur.pts = []; cur.hist = []; }
|
||||
if (phase === 'ping') { liveShow(phase, 0); return; }
|
||||
var pts = cur.pts;
|
||||
pts.push([ms, bytes]);
|
||||
while (pts.length > 2 && ms - pts[0][0] > 1000) pts.shift();
|
||||
if (pts.length < 2 || ms <= pts[0][0]) return;
|
||||
var bps = (bytes - pts[0][1]) * 8000 / (ms - pts[0][0]);
|
||||
cur.hist.push(bps);
|
||||
liveShow(phase, bps, cur);
|
||||
}
|
||||
function liveShow(phase, bps, cur) {
|
||||
var relay = lv && lv.relay, p = rateParts(bps);
|
||||
$('live').className = 'live' + (phase === 'up' ? ' up' : '');
|
||||
$('lv-ico').textContent = phase === 'up' ? '↑' : phase === 'down' ? '↓' : '';
|
||||
$('lv-phase').textContent = phase === 'ping' ? 'Задержка…'
|
||||
: phase === 'up' ? (relay ? 'клиент → браузер' : 'клиент → хост')
|
||||
: (relay ? 'браузер → клиент' : 'хост → клиент');
|
||||
$('lv-num').textContent = phase === 'ping' ? '…' : p[0];
|
||||
$('lv-unit').textContent = phase === 'ping' ? '' : p[1];
|
||||
// A log scale up to 1 Гбит/с, so a slow link moves the needle too.
|
||||
var f = Math.min(1, Math.log(1 + bps / 1e6) / Math.log(1001));
|
||||
$('lv-arc').style.strokeDashoffset = ARC * (1 - f);
|
||||
var h = cur ? cur.hist : [], max = 1.25 * Math.max.apply(null, h.concat(1)), line = '';
|
||||
for (var i = 0; i < h.length; i++) {
|
||||
line += (h.length > 1 ? 100 * i / (h.length - 1) : 0).toFixed(1) + ',' + (98 - 94 * h[i] / max).toFixed(1) + ' ';
|
||||
}
|
||||
$('lv-line').setAttribute('points', line);
|
||||
$('lv-area').setAttribute('points', h.length > 1 ? '0,100 ' + line + '100,100' : '');
|
||||
}
|
||||
|
||||
btn.onclick = function () {
|
||||
var relay = $('speed-relay').checked;
|
||||
var relay = $('speed-relay').checked, st = {n: 0, start: 0, stop: function () {}};
|
||||
btn.disabled = true;
|
||||
note.textContent = 'Идёт замер…';
|
||||
(relay ? relayTest() : post('/speed'))
|
||||
$('speed').hidden = true;
|
||||
liveStart(relay, st);
|
||||
(relay ? relayTest(st) : post('/speed'))
|
||||
.then(function (res) {
|
||||
if (!res.ok) { note.textContent = res.error || 'ошибка'; return; }
|
||||
var d = res.data;
|
||||
$('sp-ping').textContent = d.ping_ms.toFixed(d.ping_ms < 10 ? 1 : 0) + ' мс';
|
||||
$('sp-ping').textContent = d.ping_ms ? d.ping_ms.toFixed(d.ping_ms < 10 ? 1 : 0) + ' мс' : '-';
|
||||
$('sp-down').textContent = rate(d.down_bps);
|
||||
$('sp-up').textContent = rate(d.up_bps);
|
||||
$('sp-up').textContent = d.up_bps ? rate(d.up_bps) : '-';
|
||||
$('sp-down-lbl').textContent = relay ? 'браузер → клиент' : 'хост → клиент';
|
||||
$('sp-up-lbl').textContent = relay ? 'клиент → браузер' : 'клиент → хост';
|
||||
$('speed').hidden = false;
|
||||
note.textContent = '';
|
||||
note.textContent = d.partial ? 'Замер остановлен по времени - показано то, что успело набраться' : '';
|
||||
})
|
||||
.catch(function (e) { note.textContent = 'Не удалось: ' + e.message; })
|
||||
.then(function () { btn.disabled = false; });
|
||||
.then(function () { liveStop(); btn.disabled = false; });
|
||||
};
|
||||
})();
|
||||
</script>
|
||||
|
||||
Reference in new issue
Block a user