How nazir20/fluxwire works
FluxWire captures IP traffic, classifies packets, streams packet events through a Socket.IO gateway, and presents live packet, protocol, rate, and connection views. The dashboard page coordinates its subscriptions and visual components; packet-rate/protocol statistics and flow aggregation are distinct processing stages. The README documents the end-to-end architecture, while the sampled source confirms capture, event handling, and dashboard wiring. The usePackets hook and mock data are not shown as part of the active page workflow.
Main entry points: page.tsx Dashboard Page · useTrafficStats.ts Traffic Statistics · useConnections.ts Connection Aggregator · sniffer.py Packet Sniffer
Components 17
Packet Capture
- Analyzer Entry
analyzer/app/main.py - Packet Sniffer
analyzer/app/sniffer.py
Event Gateway
- Socket Gateway
gateway/src/server.js
Dashboard
- Socket Client
frontend/lib/socket.ts - Traffic Statistics
frontend/hooks/useTrafficStats.ts - Connection Aggregator
frontend/hooks/useConnections.ts - Dashboard Page
frontend/app/page.tsx - Packet Type
frontend/types/packet.ts - Connection Type
frontend/types/connection.ts
Traffic Views
- Dashboard Header
frontend/components/Hero.tsx - Statistic Cards
frontend/components/StatCard.tsx - Packet Stream Table
frontend/components/PacketTable.tsx - Protocol Chart
frontend/components/ProtocolChart.tsx - Traffic Rate Chart
frontend/components/TrafficChart.tsx - Connection Flow View
frontend/components/TrafficFlow.tsx
Other components
- Network Interface
- Dashboard User
Connections 23
- Network Interface → Packet Sniffer: captures from
README.md - Analyzer Entry → Packet Sniffer: starts
analyzer/app/main.py - Packet Sniffer → Socket Gateway: emits packets
analyzer/app/sniffer.py - Socket Gateway → Socket Client: streams events
README.md - Dashboard User → Dashboard Page: views
README.md - Dashboard Page → Traffic Statistics: subscribes via
frontend/app/page.tsx - Dashboard Page → Connection Aggregator: subscribes via
frontend/app/page.tsx - Traffic Statistics → Socket Client: listens on
frontend/hooks/useTrafficStats.ts - Connection Aggregator → Socket Client: listens on
frontend/hooks/useConnections.ts - Traffic Statistics → Packet Type: types events
frontend/hooks/useTrafficStats.ts - Connection Aggregator → Packet Type: types events
frontend/hooks/useConnections.ts - Connection Aggregator → Connection Type: builds flows
frontend/hooks/useConnections.ts - Dashboard Page → Dashboard Header: renders
frontend/app/page.tsx - Dashboard Page → Statistic Cards: renders
frontend/app/page.tsx - Dashboard Page → Packet Stream Table: renders packets
frontend/app/page.tsx - Dashboard Page → Protocol Chart: renders analytics
frontend/app/page.tsx - Dashboard Page → Traffic Rate Chart: renders rates
frontend/app/page.tsx - Dashboard Page → Connection Flow View: renders flows
frontend/app/page.tsx - Connection Aggregator → Connection Flow View: supplies flows
- Traffic Statistics → Packet Stream Table: supplies packets
- Traffic Statistics → Protocol Chart: supplies counts
- Traffic Statistics → Traffic Rate Chart: supplies rates
- Connection Aggregator → Statistic Cards: supplies count