Iwwww/sound-analyze
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): add websocket send speed packet control

Browse Source
This commit is contained in:
Михаил Ёлгин
2025-12-28 22:25:14 +03:00
parent e6f361def4
commit c560b9be76
3 changed files with 285 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
services/frontend/src/features/liveStream/model/liveStream.store.ts
View File

@@ -1,6 +1,7 @@
import { create } from "zustand";
import type { AudioSample } from "../../../entities/audioSample/model/types";
import { env } from "../../../shared/config/env";
import { RingBuffer } from "../../../shared/lib/ringBuffer";
import type { WsStatus } from "./types";
import { LiveWsClient } from "../lib/liveWsClient";
import { parseAndValidateMessage } from "../lib/parseAndValidate";
@@ -9,114 +10,249 @@ type LiveStreamState = {
status: WsStatus;
lastMessageAt: number | null;
latest: AudioSample | null;
// WS frequency control
requestedHz: number; // 1..60
setRequestedHz: (hz: number) => void;
history60s: AudioSample[];
// Window selection
windowMs: number;
setWindowMs: (ms: number) => void;
// Derived UI state (throttled)
latest: AudioSample | null;
peakHoldDb3s: number | null;
chartHistory: AudioSample[];
connect: () => void;
disconnect: () => void;
loadLatest: (limit?: number) => Promise<void>;
};
const WINDOW_MS = 60_000;
const PEAK_WINDOW_MS = 3_000;
// safety cap для worst-case 60Hz: ~3600 точек за 60 секунд
// (нужен на случай странных таймстампов/скачков времени)
const MAX_POINTS_60S = 60 * 60;
const WINDOW_OPTIONS_MS = [15_000, 30_000, 60_000, 120_000, 300_000] as const;
const DEFAULT_WINDOW_MS = 60_000;
let historyWindow: AudioSample[] = [];
const MIN_HZ = 1;
const MAX_HZ = 60;
const DEFAULT_REQUESTED_HZ = 10;
// If there are more than 600 points in selected window -> downsample
const MAX_CHART_POINTS = 600;
// UI updates not more than ~12 Hz (10–15 Hz recommended)
const UI_FLUSH_HZ = 12;
const UI_FLUSH_MS = Math.round(1000 / UI_FLUSH_HZ);
// Max window is 5m; worst-case 60 Hz => 18k points (+ headroom)
const RAW_CAPACITY = 20_000;
// -------- Module-level raw buffers (NOT in Zustand state) --------
const rawHistory = new RingBuffer<AudioSample>(RAW_CAPACITY);
let peakWindow: AudioSample[] = [];
let client: LiveWsClient | null = null;
function trimByTime(arr: AudioSample[], cutoffMs: number): AudioSample[] {
// shift в цикле ок для ~3600 элементов; если захочешь — можно оптимизировать индексом
while (arr.length && arr[0]!.timeMs < cutoffMs) arr.shift();
if (arr.length > MAX_POINTS_60S) arr = arr.slice(-MAX_POINTS_60S);
return arr;
let client: LiveWsClient | null = null;
let flushTimer: number | null = null;
let lastSeenSample: AudioSample | null = null;
function clampInt(v: number, min: number, max: number): number {
if (!Number.isFinite(v)) return min;
return Math.max(min, Math.min(max, Math.trunc(v)));
}
function computePeakDb(windowSamples: AudioSample[]): number | null {
if (windowSamples.length === 0) return null;
function isAllowedWindowMs(ms: number): ms is (typeof WINDOW_OPTIONS_MS)[number] {
return (WINDOW_OPTIONS_MS as readonly number[]).includes(ms);
}
function buildWsUrl(base: string, hz: number): string {
const safeHz = clampInt(hz, MIN_HZ, MAX_HZ);
// Prefer URL() for correctness (keeps existing params)
try {
const u = new URL(base);
u.searchParams.set("hz", String(safeHz));
return u.toString();
} catch {
const sep = base.includes("?") ? "&" : "?";
return `${base}${sep}hz=${encodeURIComponent(String(safeHz))}`;
}
}
function trimPeakWindow(nowSampleMs: number): void {
const cutoff = nowSampleMs - PEAK_WINDOW_MS;
while (peakWindow.length && peakWindow[0]!.timeMs < cutoff) peakWindow.shift();
// Safety cap: even at 60 Hz, 3 sec ~ 180 points; allow some jitter
if (peakWindow.length > 512) peakWindow = peakWindow.slice(-512);
}
function computePeakDb3s(): number | null {
if (!peakWindow.length) return null;
let max = -Infinity;
for (const s of windowSamples) max = Math.max(max, s.rms_db);
for (const s of peakWindow) max = Math.max(max, s.rms_db);
return Number.isFinite(max) ? max : null;
}
export const useLiveStreamStore = create<LiveStreamState>()((set) => ({
status: "disconnected",
lastMessageAt: null,
function makeChartHistory(windowMs: number): AudioSample[] {
const latest = lastSeenSample ?? rawHistory.last();
if (!latest) return [];
latest: null,
history60s: [],
peakHoldDb3s: null,
const cutoff = latest.timeMs - windowMs;
connect: () => {
// Note: rawHistory.toArray() allocates, but it's called at ~12 Hz, not per WS packet
const windowed = rawHistory.toArray().filter((s) => s.timeMs >= cutoff);
if (windowed.length <= MAX_CHART_POINTS) return windowed;
const step = Math.ceil(windowed.length / MAX_CHART_POINTS);
const out: AudioSample[] = [];
for (let i = 0; i < windowed.length; i += step) out.push(windowed[i]!);
// Ensure last point is present (prevents “missing tail” effect)
const last = windowed.at(-1);
if (last && out.at(-1)?.timeMs !== last.timeMs) out.push(last);
return out;
}
export const useLiveStreamStore = create<LiveStreamState>()((set, get) => {
function clearFlushTimer(): void {
if (flushTimer !== null) {
window.clearTimeout(flushTimer);
flushTimer = null;
}
}
function flushToUi(): void {
clearFlushTimer();
const { windowMs } = get();
const latest = lastSeenSample ?? rawHistory.last();
const chartHistory = makeChartHistory(windowMs);
set({
latest: latest ?? null,
peakHoldDb3s: computePeakDb3s(),
chartHistory,
lastMessageAt: Date.now(),
});
}
function scheduleFlush(): void {
if (flushTimer !== null) return;
flushTimer = window.setTimeout(flushToUi, UI_FLUSH_MS);
}
function ensureClientConnected(): void {
if (client) return;
client = new LiveWsClient(env.wsUrl, {
const hz = get().requestedHz;
const url = buildWsUrl(env.wsUrl, hz);
client = new LiveWsClient(url, {
onStatus: (st) => set({ status: st }),
onMessage: (data) => {
const parsed = parseAndValidateMessage(data);
if (!parsed.ok) return;
const sample = parsed.sample;
lastSeenSample = sample;
// 60s time window (по времени, а не по "600 точек")
historyWindow.push(sample);
historyWindow = trimByTime(historyWindow, sample.timeMs - WINDOW_MS);
rawHistory.push(sample);
// 3s peak-hold window (тоже по времени сэмпла)
peakWindow.push(sample);
peakWindow = trimByTime(peakWindow, sample.timeMs - PEAK_WINDOW_MS);
trimPeakWindow(sample.timeMs);
set({
latest: sample,
history60s: historyWindow.slice(), // копия для UI
peakHoldDb3s: computePeakDb(peakWindow),
lastMessageAt: Date.now(),
});
// Throttled UI update (important for Recharts + overall UI smoothness)
scheduleFlush();
},
});
client.connect();
},
}
disconnect: () => {
client?.close();
function reconnectWithNewHz(): void {
if (!client) return;
client.close();
client = null;
peakWindow = [];
// historyWindow оставляем: график не должен "прыгать" при reconnect
set({ status: "disconnected" });
},
ensureClientConnected();
}
loadLatest: async (limit = 100) => {
const url = `${env.apiUrl.replace(/\/$/, "")}/api/v1/audio/latest?limit=${limit}`;
try {
const res = await fetch(url);
if (!res.ok) return;
return {
status: "disconnected",
lastMessageAt: null,
const raw = (await res.json()) as Array<{
time: string;
rms_db: number;
freq_hz: number;
}>;
requestedHz: DEFAULT_REQUESTED_HZ,
setRequestedHz: (hz) => {
const next = clampInt(hz, MIN_HZ, MAX_HZ);
const prev = get().requestedHz;
if (next === prev) return;
for (const item of raw) {
const parsed = parseAndValidateMessage(JSON.stringify(item));
if (!parsed.ok) continue;
historyWindow.push(parsed.sample);
set({ requestedHz: next });
reconnectWithNewHz();
},
windowMs: DEFAULT_WINDOW_MS,
setWindowMs: (ms) => {
const next = isAllowedWindowMs(ms) ? ms : DEFAULT_WINDOW_MS;
if (next === get().windowMs) return;
set({ windowMs: next });
// Recompute immediately (doesn't touch WS)
flushToUi();
},
latest: null,
peakHoldDb3s: null,
chartHistory: [],
connect: () => {
ensureClientConnected();
},
disconnect: () => {
clearFlushTimer();
client?.close();
client = null;
set({ status: "disconnected" });
// Raw history intentionally preserved to avoid “jumping” on reconnect
},
loadLatest: async (limit = 300) => {
const safeLimit = clampInt(limit, 1, 5000);
const base = env.apiUrl.replace(/\/$/, "");
const url = `${base}/api/v1/audio/latest?limit=${safeLimit}`;
try {
const res = await fetch(url);
if (!res.ok) return;
const raw = (await res.json()) as Array<{
time: string;
rms_db: number;
freq_hz: number;
}>;
// Push historical points into raw buffer (no per-item setState!)
for (const item of raw) {
const parsed = parseAndValidateMessage(JSON.stringify(item));
if (!parsed.ok) continue;
rawHistory.push(parsed.sample);
lastSeenSample = parsed.sample;
// Warm-up peak window too (optional but consistent)
peakWindow.push(parsed.sample);
trimPeakWindow(parsed.sample.timeMs);
}
// Single UI update after warm-up
flushToUi();
} catch {
// graceful fallback: ignore (dashboard must stay usable without REST)
}
},
};
});
// после warm-up тоже режем по времени "последней точки"
const last = historyWindow.at(-1);
if (last)
historyWindow = trimByTime(historyWindow, last.timeMs - WINDOW_MS);
set({ history60s: historyWindow.slice() });
} catch {
// ignore
}
},
}));

66
services/frontend/src/widgets/audioLive/ui/AudioLiveWidget.tsx
View File

@@ -1,3 +1,5 @@
// src/widgets/audioLive/ui/AudioLiveWidget.tsx
import { useMemo } from "react";
import { useLiveStreamStore } from "../../../features/liveStream/model/liveStream.store";
import { WsStatusBadge } from "../../../features/liveStream/ui/WsStatusBadge";
import { AudioMeter } from "./AudioMeter";
@@ -11,16 +13,34 @@ import {
import { freqToNote } from "../../../entities/audioSample/lib/note";
import { formatTimeHHMMSS, isStale } from "../../../shared/lib/time";
const HZ_OPTIONS = [1, 5, 10, 15, 30, 60] as const;
const WINDOW_OPTIONS: Array<{ label: string; ms: number }> = [
{ label: "15s", ms: 15_000 },
{ label: "30s", ms: 30_000 },
{ label: "60s", ms: 60_000 },
{ label: "2m", ms: 120_000 },
{ label: "5m", ms: 300_000 },
];
export function AudioLiveWidget() {
const status = useLiveStreamStore((s) => s.status);
const latest = useLiveStreamStore((s) => s.latest);
const history60s = useLiveStreamStore((s) => s.history60s);
const chartHistory = useLiveStreamStore((s) => s.chartHistory);
const peakHoldDb3s = useLiveStreamStore((s) => s.peakHoldDb3s);
const lastMessageAt = useLiveStreamStore((s) => s.lastMessageAt);
const requestedHz = useLiveStreamStore((s) => s.requestedHz);
const setRequestedHz = useLiveStreamStore((s) => s.setRequestedHz);
const windowMs = useLiveStreamStore((s) => s.windowMs);
const setWindowMs = useLiveStreamStore((s) => s.setWindowMs);
const stale = isStale(lastMessageAt, 1500);
const note = latest ? freqToNote(latest.freq_hz) : "--";
const note = useMemo(() => {
return latest ? freqToNote(latest.freq_hz) : "--";
}, [latest]);
return (
<div className="grid gap-4 lg:grid-cols-3">
@@ -35,9 +55,12 @@ export function AudioLiveWidget() {
<Card>
<CardHeader className="pb-2 flex flex-row items-center justify-between gap-3">
<CardTitle className="text-base">Live status</CardTitle>
<WsStatusBadge status={status} />
<div className="flex items-center gap-3">
<WsStatusBadge status={status} />
</div>
</CardHeader>
<CardContent className="flex flex-wrap items-center justify-between gap-4">
<CardContent className="flex flex-wrap items-end justify-between gap-4">
<div>
<div className="text-sm text-muted-foreground">Last update</div>
<div className="text-lg font-medium tabular-nums">
@@ -64,10 +87,43 @@ export function AudioLiveWidget() {
{latest ? `${latest.rms_db.toFixed(1)} dB` : "—"}
</div>
</div>
{/* Controls */}
<div className="flex flex-wrap items-end gap-3">
<label className="grid gap-1">
<span className="text-sm text-muted-foreground">WS Hz</span>
<select
className="h-9 rounded-md border border-input bg-background px-3 text-sm"
value={requestedHz}
onChange={(e) => setRequestedHz(Number(e.target.value))}
>
{HZ_OPTIONS.map((hz) => (
<option key={hz} value={hz}>
{hz} Hz
</option>
))}
</select>
</label>
<label className="grid gap-1">
<span className="text-sm text-muted-foreground">Window</span>
<select
className="h-9 rounded-md border border-input bg-background px-3 text-sm"
value={windowMs}
onChange={(e) => setWindowMs(Number(e.target.value))}
>
{WINDOW_OPTIONS.map((opt) => (
<option key={opt.ms} value={opt.ms}>
{opt.label}
</option>
))}
</select>
</label>
</div>
</CardContent>
</Card>
<FrequencyHistoryChart history={history60s} />
<FrequencyHistoryChart history={chartHistory} />
</div>
</div>
);

24
services/frontend/src/widgets/audioLive/ui/FrequencyHistoryChart.tsx
View File

@@ -1,3 +1,4 @@
// src/widgets/audioLive/ui/FrequencyHistoryChart.tsx
import { memo, useMemo } from "react";
import {
Line,
@@ -28,15 +29,25 @@ type ChartPoint = {
const Y_MIN = 129;
const Y_MAX = 5500;
const Y_TICKS = [130, 200, 300, 440, 660, 880, 1000, 2000, 3000, 4000, 5500];
const Y_TICKS = [139, 200, 500, 1000, 2000, 5000, 5500];
function formatHzTick(v: number): string {
const n = Number(v);
if (!Number.isFinite(n)) return "";
if (n >= 1000) return `${(n / 1000).toFixed(n % 1000 === 0 ? 0 : 1)}k`;
return `${Math.round(n)}`;
}
export const FrequencyHistoryChart = memo(function FrequencyHistoryChart({
history = [],
}: Props) {
const data: ChartPoint[] = useMemo(() => {
if (!history?.length) return [];
return history.map((s) => ({ timeMs: s.timeMs, freq_hz: s.freq_hz }));
}, [history]);
const hasData = data.length > 0;
return (
<Card>
<CardHeader className="pb-2">
@@ -44,7 +55,13 @@ export const FrequencyHistoryChart = memo(function FrequencyHistoryChart({
</CardHeader>
<CardContent>
<div className="h-56 w-full">
<div className="relative h-56 min-h-[14rem] w-full">
{!hasData && (
<div className="absolute inset-0 grid place-items-center text-sm text-muted-foreground">
No data yet
</div>
)}
<ResponsiveContainer width="100%" height="100%">
<LineChart
data={data}
@@ -56,6 +73,7 @@ export const FrequencyHistoryChart = memo(function FrequencyHistoryChart({
domain={["dataMin", "dataMax"]}
tickFormatter={(v) => formatTimeHHMMSS(Number(v))}
tick={{ fontSize: 12 }}
interval="preserveStartEnd"
/>
<YAxis
@@ -66,7 +84,7 @@ export const FrequencyHistoryChart = memo(function FrequencyHistoryChart({
allowDataOverflow
tick={{ fontSize: 12 }}
width={52}
tickFormatter={(v) => `${Number(v).toFixed(0)}`}
tickFormatter={(v) => formatHzTick(Number(v))}
/>
<Tooltip