Replace polling with websocket live sync

This commit is contained in:
2026-04-02 02:31:59 +03:00
parent 9a3785deb9
commit c04847b21c
15 changed files with 596 additions and 28 deletions

View File

@@ -5,12 +5,13 @@ Updated: 2026-04-02
## Active
1. Keep replacing remaining seeded fallback signals with runtime-backed 3proxy data and extend the Docker-verified ingestion path beyond access-log-derived usage.
2. Harden websocket-driven live sync and keep forms/edit flows resilient to concurrent runtime updates.
## Next
1. Wire real counter/log ingestion into dashboard traffic and user status instead of seeded snapshot values.
2. Refine Docker/runtime behavior and document real host-access expectations and deployment constraints.
3. Expand validation and tests around service mutations, credential safety, and runtime failure reporting.
3. Expand validation and tests around service mutations, credential safety, websocket reconnect behavior, and runtime failure reporting.
## Done
@@ -38,3 +39,6 @@ Updated: 2026-04-02
22. Restored editable proxy endpoint in panel settings so copied proxy URLs and displayed user endpoints can be corrected from the UI.
23. Replaced seeded dashboard/user usage with live 3proxy access-log ingestion, derived user traffic/status from runtime logs, and added frontend polling so the panel refreshes runtime state automatically.
24. Verified the new runtime-backed snapshot flow in Docker by sending real traffic through the bundled 3proxy services and observing live byte counters in `/api/state`.
25. Replaced frontend polling with websocket live sync over `/ws`, sending only changed top-level snapshot sections while keeping the current `http/ws` path compatible with future `https/wss` deployment.
26. Stopped incoming runtime sync from overwriting dirty Settings drafts and added hash-based tab navigation so refresh/back/forward stay on the current panel tab.
27. Verified websocket delivery in Docker over plain `ws://127.0.0.1:3000/ws` by authenticating, receiving `snapshot.init`, mutating panel state, and observing a follow-up `snapshot.patch`.

View File

@@ -10,9 +10,9 @@ Updated: 2026-04-02
- `compose.yaml`: Docker Compose entrypoint for the bundled panel + 3proxy runtime, including panel auth env defaults
- `Dockerfile`: multi-stage image that builds the panel and compiles 3proxy
- `README.md`: quick start and current project scope
- `package.json`: frontend/backend scripts and dependencies, including combined local `dev` startup
- `package.json`: frontend/backend scripts and dependencies, including combined local `dev` startup and websocket support
- `tsconfig.server.json`: server type-check configuration
- `vite.config.ts`: Vite + Vitest configuration plus local `/api` proxy to the control-plane backend
- `vite.config.ts`: Vite + Vitest configuration plus local `/api` and `/ws` proxying to the control-plane backend
## Documentation
@@ -23,9 +23,9 @@ Updated: 2026-04-02
## Frontend
- `src/main.tsx`: application bootstrap
- `src/App.tsx`: authenticated panel shell with API-backed login, `sessionStorage` token persistence, localized labels, early theme application, protected panel mutations, and periodic runtime snapshot refresh
- `src/SystemTab.tsx`: Settings tab with separate panel-settings and services cards, editable proxy endpoint, unified service type editing, remove confirmation, and generated config preview
- `src/App.test.tsx`: login-gate, preferences persistence, modal interaction, pause/resume, delete-confirm, and settings-save UI tests
- `src/App.tsx`: authenticated panel shell with API-backed login, `sessionStorage` token persistence, hash-based tab history, websocket snapshot patch sync, localized labels, early theme application, and protected panel mutations
- `src/SystemTab.tsx`: Settings tab with separate panel-settings and services cards, editable proxy endpoint, dirty-draft protection against incoming live sync, unified service type editing, remove confirmation, and generated config preview
- `src/App.test.tsx`: login-gate, preferences persistence, hash-tab restoration, websocket-sync safety, modal interaction, pause/resume, delete-confirm, and settings-save UI tests
- `src/app.css`: full panel styling
- `src/data/mockDashboard.ts`: default panel state and frontend fallback snapshot
- `src/lib/3proxy.ts`: formatting and status helpers
@@ -34,16 +34,18 @@ Updated: 2026-04-02
- `src/lib/panelText.ts`: English/Russian UI text catalog for the panel shell and settings flows
- `src/shared/contracts.ts`: shared panel, service, user, and API data contracts
- `src/shared/validation.ts`: shared validation for user creation, system edits, service type mapping, and quota conversion
- `src/test/setup.ts`: Testing Library matchers
- `src/test/setup.ts`: Testing Library matchers plus browser WebSocket test double
## Server
- `server/index.ts`: backend entrypoint and runtime bootstrap
- `server/app.ts`: Express app with login, protected panel state/runtime routes, and writable system configuration API with linked-user cleanup on removed services
- `server/index.ts`: backend entrypoint, runtime bootstrap, and HTTP server wiring for websocket upgrades
- `server/app.ts`: Express app with login, protected panel state/runtime routes, live-sync change notifications, and writable system configuration API with linked-user cleanup on removed services
- `server/app.test.ts`: API tests for user management plus system-update safety, cascade delete, and config edge cases
- `server/lib/auth.ts`: expiring token issuance and bearer-token verification for the panel
- `server/lib/config.ts`: 3proxy config renderer, validation, and dashboard derivation for SOCKS/HTTP managed services
- `server/lib/config.test.ts`: config-generation regression tests
- `server/lib/liveSync.ts`: websocket broadcaster that emits `snapshot.init` and top-level `snapshot.patch` messages from runtime/store changes
- `server/lib/liveSync.test.ts`: regression tests for patch-only websocket payload generation
- `server/lib/snapshot.ts`: runtime-backed dashboard snapshot assembly that combines stored panel state with parsed 3proxy traffic observations
- `server/lib/traffic.ts`: 3proxy access-log reader that derives current user usage, recent activity, daily totals, and lightweight live-connection estimates
- `server/lib/traffic.test.ts`: parser and empty-runtime regression tests for log-derived traffic metrics