85 lines
3.8 KiB
Markdown
85 lines
3.8 KiB
Markdown
# 🌊 Network Aquarium
|
||
|
||
> **Živý network traffic vizualizovaný ako podmorské akvárium v .NET 10.**
|
||
> Každý request, stream a chyba v tvojej infraštruktúre ožíva ako morský tvor s nulovou záťažou na produkčný server.
|
||
|
||
---
|
||
|
||
## 🐠 Morská hierarchia (Traffic Taxonomy)
|
||
|
||
| Tvor | Sieťový traffic | Vizuál a fyzika |
|
||
| :--- | :--- | :--- |
|
||
| 🐟 **Rybky (Klauni, Tetry, Skaláre)** | Štandardný HTTP GET / POST / PUT / DELETE | Farba podľa metódy (GET = Cyan, POST = Emerald, PUT = Violet, DELETE = Rose). Rýchlosť plávania = Latencia (nízky ping = blesková rybka). |
|
||
| 🐬 **Delfíny** | WebSockets / SSE / Live Streamy | Plávajú v sínusoidách, skáču k hladine a pri každom data frame emitujú sonarové vlny. |
|
||
| 🐋 **Veľryby** | Veľké downloady & payloady (> 500 KB – 10 MB+) | Majestátne, obrovské, pomalé tvory s vodným gejzírom z dýchacieho otvoru. |
|
||
| 🪼 **Medúzy (Červené / Jantárové)** | Chyby klienta (4xx) & Chyby servera (5xx) | Svietiace pulzujúce medúzy vznášajúce sa nahor s dlhými chápadlami. |
|
||
| 🦈 **Žraloky** | Rate Limits (429) & DDoS / Traffic Spikes | Rýchle dravce križujúce stredné hĺbky pri preťažení servera. |
|
||
| 🦀 **Krabíci** | Databázové dotazy & Background Cron / Workers | Sliedia po piesočnatom dne a prenášajú dáta. |
|
||
|
||
---
|
||
|
||
## 🏛️ Architektúra (.NET 10 Solution)
|
||
|
||
Riešenie `VrbaOneProjects.slnx` obsahuje 3 projekty:
|
||
|
||
1. **`Aquarium.Shared`** (.NET 10 Class Library)
|
||
- Modely `TrafficEvent`, `CreatureSpawnDto`, `AquariumStats`.
|
||
- `CreatureClassifier` – inteligentné pravidlá mapovania trafficu na biómy, rýchlosť, škálovanie a farby.
|
||
2. **`Aquarium.Server`** (.NET 10 ASP.NET Core Minimal API + SignalR)
|
||
- `TrafficTelemetryMiddleware` – zachytáva live HTTP požiadavky bez blokovania.
|
||
- `ITrafficEventChannel` – in-memory `System.Threading.Channels` fronta (zero-allocation, mikrosekundový throughput).
|
||
- `TrafficBroadcasterService` – agreguje RPS, latenciu a vysiela eventy cez SignalR do pripojených klientov.
|
||
- `TrafficSimulatorService` – generuje realistický traffic pre testovanie a demo účely.
|
||
3. **`Aquarium.Client`** (.NET 10 Blazor WebAssembly Standalone)
|
||
- 60 FPS HTML5 Canvas 2D engine (`aquarium.js`) s realistickými časticami, lomom svetla (caustics) a morskými prúdmi.
|
||
- **Click-to-Inspect HUD:** Kliknutím na akéhokoľvek tvora sa otvorí detailný cyberpunkový drawer s metrikami (`Method`, `Path`, `Status`, `Latency`, `Size`, `Client IP/Country`, `Trace ID`).
|
||
- Syntetizované audio efekty (Web Audio API) s možnosťou stlmenia.
|
||
- Offline / Standalone Demo Fallback – ak backend nebeží, klient sa automaticky prepne do lokálnej simulácie.
|
||
|
||
---
|
||
|
||
## 🚀 Spustenie projektu
|
||
|
||
### 1. Spustenie Backend Servera (Port 5050)
|
||
```powershell
|
||
cd src/Aquarium.Server
|
||
dotnet run --urls "http://localhost:5050"
|
||
```
|
||
|
||
### 2. Spustenie Blazor WASM Klienta (Port 5100)
|
||
```powershell
|
||
cd src/Aquarium.Client
|
||
dotnet run --urls "http://localhost:5100"
|
||
```
|
||
|
||
Otvorte prehliadač na **`http://localhost:5100`**.
|
||
|
||
---
|
||
|
||
## 🔌 Ako napojiť reálny server
|
||
|
||
Máte 2 jednoduché spôsoby:
|
||
|
||
### Možnosť A: Vloženie Middleware do existujúcej ASP.NET Core aplikácie
|
||
Pridajte referenciu na `Aquarium.Server` alebo vložte `TrafficTelemetryMiddleware`:
|
||
```csharp
|
||
app.UseMiddleware<TrafficTelemetryMiddleware>();
|
||
```
|
||
|
||
### Možnosť B: Externé posielanie cez REST Ingestion API
|
||
Akákoľvek reverzná proxy (Nginx, Caddy, Cloudflare Worker, Node.js) môže poslať event priamo na endpoint servera:
|
||
```bash
|
||
curl -X POST http://localhost:5050/api/telemetry/event \
|
||
-H "Content-Type: application/json" \
|
||
-d '{
|
||
"method": "GET",
|
||
"path": "/api/v1/users",
|
||
"statusCode": 200,
|
||
"durationMs": 42.5,
|
||
"bytes": 12400,
|
||
"clientCountry": "SK",
|
||
"clientCity": "Bratislava",
|
||
"clientIp": "178.40.12.8"
|
||
}'
|
||
```
|