Connections & Traffic Statistics
Relevant source files
The following files were used as context for generating this wiki page:
Zephyr provides real-time monitoring of network activities through the Connections and Traffic modules. These components track active and closed connections, cumulative data usage, and instantaneous transfer speeds. The system presents this data through a detailed connection list and interactive Canvas-based charts, allowing users to monitor proxy performance and terminate specific sessions.
Sources: README_en.md:46-46, apps/desktop/src/modules/connections.js:3-10, apps/desktop/src/ui/console-home.js:5-15
Connection Management System
The Connections module manages the lifecycle of network sessions by polling the proxy core and maintaining a local cache of active and closed connections.
Core Data Pipeline
The system uses a delta-based polling mechanism to calculate instantaneous speeds. Because the Mihomo core reports cumulative bytes, the frontend calculates speed by comparing the difference in bytes between two polling intervals against the elapsed time.
The diagram shows the polling lifecycle where the system dynamically adjusts the refresh interval based on core reachability.
Sources: apps/desktop/src/modules/connections.js:141-155, apps/desktop/src/modules/connections.js:235-260
Connection States and Accumulation
Active connections that show no traffic movement since the last poll are visually dimmed to highlight busy sessions. When a connection is no longer present in the core's response, the system archives it into a historical list, preserving its total transfer metadata and closure timestamp.
| Statistic | Source/Calculation | UI Location |
|---|---|---|
| Download Speed | (currentDl - prevDl) / deltaTime | Connection Row / Detail Panel |
| Upload Speed | (currentUl - prevUl) / deltaTime | Connection Row / Detail Panel |
| Total Traffic | Sum of cumulative bytes from all active and archived sessions | Stats Bar |
| Duration | currentTime - seenAtTimestamp | Detail Panel |
Sources: apps/desktop/src/modules/connections.js:25-30, apps/desktop/src/modules/connections.js:275-285, apps/desktop/src/modules/connections.js:475-485
Traffic Visualization
Zephyr utilizes a native Canvas 2D engine to render high-performance traffic charts without external library dependencies.
Real-time Traffic Chart
The Console dashboard maintains a 60-point history window of traffic samples. It uses quadratic Bézier curves to smooth the representation of spikes in download and upload rates.
The sequence diagram illustrates how traffic data flows from the core to the final visual representation on the user interface.
Sources: apps/desktop/src/ui/console-home.js:134-150, apps/desktop/src/ui/console-home.js:655-680
KPI and Sparklines
The system displays Key Performance Indicators (KPIs) for immediate monitoring:
- Download/Upload Speed: Real-time transfer rates with unit conversion (KB/s, MB/s).
- Peaks: The highest recorded speed since core startup.
- Sparklines: Small, simplified charts showing the last 24 traffic points for rapid trend assessment.
Sources: apps/desktop/src/ui/console-home.js:195-210, apps/desktop/src/ui/console-home.js:175-185
Data Structures and API Interactions
Connection Metadata
Every network session is represented by a structured object containing network layer info and routing rules.
// Internal connection representation
{
id: "uuid-string",
metadata: {
host: "example.com",
destinationIP: "1.2.3.4",
destinationPort: "443",
process: "browser.exe",
network: "tcp",
type: "HTTPS"
},
rule: "RuleSet",
chains: ["ProxyGroupName", "NodeName"],
download: 50000, // Cumulative bytes
upload: 12000 // Cumulative bytes
}
Sources: apps/desktop/src/modules/connections.js:460-470, apps/desktop/src/modules/connections.test.js:33-43
Bulk Actions
The system provides endpoints and UI controls for mass management of connections:
- Close All: Sends a request to the core to terminate all active sessions.
- Clear All: Wipes the local historical list of closed connections.
- Search: Filters the visible list by matching strings against host, IP, port, process, or rule fields.
Sources: apps/desktop/src/modules/connections.js:770-800, apps/desktop/src/modules/connections.js:355-365
UI Components and Interaction
Connection List UI
The list uses a keyed reconciliation strategy to efficiently update DOM nodes. When connections update, the system patches only the traffic text nodes and idle state classes instead of rebuilding the entire list.
- Active Tab: Displays current live sessions with real-time speed updates.
- Closed Tab: Displays history of terminated sessions with final totals and durations.
- Sorting: Supports lexicographic sorting (Host, Rule) and numeric sorting (Speed, Total).
Sources: apps/desktop/src/modules/connections.js:370-395, apps/desktop/src/modules/connections.js:410-425, apps/desktop/src/modules/connections.test.js:63-75
Detail Panel
Clicking a connection opens a modal containing extended metadata, including source IP/port, network type, and specific rule payloads. For active connections, this panel provides the trigger to terminate that specific session via the core API.
Sources: apps/desktop/src/modules/connections.js:595-630, apps/desktop/src/modules/connections.js:710-725
Summary
The Connections and Traffic Statistics module provides a comprehensive view of Zephyr's network state. By combining delta-calculated transfer speeds, historical archiving, and Canvas-based visualization, the system offers both high-level trends and granular control over individual network sessions.
Sources: apps/desktop/src/modules/connections.js:3-15, apps/desktop/src/ui/console-home.js:5-20