added websitedna
This commit is contained in:
Michal Vrba
@@ -1,84 +1,56 @@
|
||||
# 🌊 Network Aquarium
|
||||
# 🌊 VrbaOne Projects · .NET 10 Ecosystem
|
||||
|
||||
> **Ž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.
|
||||
V tomto repozitári sa nachádzajú dva samostatné projekty postavené na **.NET 10** a **Blazor WebAssembly**:
|
||||
|
||||
1. **🌊 Network Aquarium** – Živý server traffic vizualizovaný ako interaktívne podmorské akvárium.
|
||||
2. **🧬 Website DNA** – Generatívny digitálny fingerprint a genóm ľubovoľného webu.
|
||||
|
||||
---
|
||||
|
||||
## 🐠 Morská hierarchia (Traffic Taxonomy)
|
||||
## 1. 🌊 Network Aquarium
|
||||
|
||||
| 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. |
|
||||
Živý network traffic vizualizovaný ako akvárium s nulovou záťažou na server.
|
||||
|
||||
---
|
||||
* **🐟 Rybky:** Štandardné HTTP GET/POST/PUT/DELETE requesty (rýchlosť = latencia).
|
||||
* **🐬 Delfíny:** WebSockets a streamy s animovanými sonarovými vlnami.
|
||||
* **🐋 Veľryby:** Veľké downloady a payloady (> 500 KB – 10 MB+).
|
||||
* **🪼 Medúzy:** 500 chyby servera (červené) a 4xx chyby klienta (jantárové).
|
||||
* **🦈 Žraloky:** 429 Rate-Limits & DDoS traffic spiky.
|
||||
* **🦀 Krabíci:** Databázové operácie a background worker úlohy.
|
||||
|
||||
## 🏛️ 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)
|
||||
### Spustenie Network Aquarium:
|
||||
```powershell
|
||||
cd src/Aquarium.Server
|
||||
dotnet run --urls "http://localhost:5050"
|
||||
```
|
||||
# Backend (Port 5050)
|
||||
dotnet run --project src/Aquarium.Server --urls "http://localhost:5050"
|
||||
|
||||
### 2. Spustenie Blazor WASM Klienta (Port 5100)
|
||||
```powershell
|
||||
cd src/Aquarium.Client
|
||||
dotnet run --urls "http://localhost:5100"
|
||||
# Frontend Blazor WASM (Port 5100)
|
||||
dotnet run --project src/Aquarium.Client --urls "http://localhost:5100"
|
||||
```
|
||||
|
||||
Otvorte prehliadač na **`http://localhost:5100`**.
|
||||
|
||||
---
|
||||
|
||||
## 🔌 Ako napojiť reálny server
|
||||
## 2. 🧬 Website DNA
|
||||
|
||||
Máte 2 jednoduché spôsoby:
|
||||
Zadajte akékoľvek URL a získajte vizuálny fingerprint a genóm webu.
|
||||
|
||||
### 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>();
|
||||
```
|
||||
* **3D Rotujúca Double Helix:**
|
||||
- **A (Modrá):** Sémantické HTML a štruktúra
|
||||
- **T (Fialová):** CSS a štylistická hustota
|
||||
- **C (Žltá):** JavaScript a interakčná logika
|
||||
- **G (Zelená):** Mediá, obrázky, SVG a fonty
|
||||
* **🎨 Chromozomálne farebné pásy:** Extrahované dominantné farby z CSS palety stránky tvoria jadro DNA lúča.
|
||||
* **☣️ Mutačné anomálie:** Detekcia trackerov (Google Analytics, Meta Pixel, Hotjar, Sentry) ako žiariace spóry.
|
||||
* **⚔️ Cross-Comparison Mode:** Porovnanie dvoch webov vedľa seba (napr. Google vs Reddit) s výpočtom genetickej kompatibility.
|
||||
* **🎵 DNA Sonifikácia:** Web Audio API generuje ambientné hudobné akordy z báz A-T-C-G.
|
||||
* **🎴 Hologram Card Export:** Export do PNG zberateľskej karty na 1 klik.
|
||||
|
||||
### 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"
|
||||
}'
|
||||
### Spustenie Website DNA:
|
||||
```powershell
|
||||
# Backend (Port 5060)
|
||||
dotnet run --project src/WebsiteDna.Server --urls "http://localhost:5060"
|
||||
|
||||
# Frontend Blazor WASM (Port 5160)
|
||||
dotnet run --project src/WebsiteDna.Client --urls "http://localhost:5160"
|
||||
```
|
||||
Otvorte prehliadač na **`http://localhost:5160`**.
|
||||
|
||||
Reference in New Issue
Block a user