feat: migrate mihomo to use kode-bridge IPC on Windows and Unix (#4051)
* Refactor Mihomo API integration and remove crate_mihomo_api - Removed the `mihomo_api` crate and its dependencies from the project. - Introduced `IpcManager` for handling IPC communication with Mihomo. - Implemented IPC methods for managing proxies, connections, and configurations. - Updated `MihomoManager` to utilize `IpcManager` instead of the removed crate. - Added platform-specific IPC socket path handling for macOS, Linux, and Windows. - Cleaned up related tests and configuration files. * fix: remove duplicate permission entry in desktop capabilities * refactor: replace MihomoManager with IpcManager and remove Mihomo module * fix: restore tempfile dependency in dev-dependencies * fix: update kode-bridge dependency to use git source from the dev branch * feat: migrate mihomo to use kode-bridge IPC on Windows This commit implements a comprehensive migration from legacy service IPC to the kode-bridge library for Windows IPC communication. Key changes include: Replace service_ipc with kode-bridge IpcManager for all mihomo communications Simplify proxy commands using new caching mechanism with ProxyRequestCache Add Windows named pipe (\.\pipe\mihomo) and Unix socket IPC endpoint configuration Update Tauri permissions and dependencies (dashmap, tauri-plugin-notification) Add IPC logging support and improve error handling Fix Windows IPC path handling in directory utilities This migration enables better cross-platform IPC support and improved performance for mihomo proxy core communication. * doc: add IPC communication with Mihomo kernel, removing Restful API dependency * fix: standardize logging type naming from IPC to Ipc for consistency * refactor: clean up and optimize code structure across multiple components and services - Removed unnecessary comments and whitespace in various files. - Improved code readability and maintainability by restructuring functions and components. - Updated localization files for consistency and accuracy. - Enhanced performance by optimizing hooks and utility functions. - General code cleanup in settings, pages, and services to adhere to best practices. * fix: simplify URL formatting in test_proxy_delay method * fix: update kode-bridge dependency to version 0.1.3 and change source to crates.io * fix: update macOS target versions in development workflow * Revert "fix: update macOS target versions in development workflow" This reverts commit b9831357e462e0f308d11a9a53cb718f98ae1295. * feat: enhance IPC path handling for Unix systems and improve directory safety checks * feat: add conditional compilation for Unix-specific IPC path handling * chore: update cagro.lock * feat: add external controller configuration and UI support * Refactor proxy and connection management to use IPC-based commands - Updated `get_proxies` function in `proxy.rs` to call the new IPC command. - Renamed `get_refresh_proxies` to `get_proxies` in `ipc/general.rs` for consistency. - Added new IPC commands for managing proxies, connections, and configurations in `cmds.ts`. - Refactored API calls in various components to use the new IPC commands instead of HTTP requests. - Improved error handling and response management in the new IPC functions. - Cleaned up unused API functions in `api.ts` and redirected relevant calls to `cmds.ts`. - Enhanced connection management features including health checks and updates for proxy providers. * chore: update dependencies and improve error handling in IPC manager * fix: downgrade zip dependency from 4.3.0 to 4.2.0 * feat: Implement traffic and memory data monitoring service - Added `TrafficService` and `TrafficManager` to manage traffic and memory data collection. - Introduced commands to get traffic and memory data, start and stop the traffic service. - Integrated IPC calls for traffic and memory data retrieval in the frontend. - Updated `AppDataProvider` and `EnhancedTrafficStats` components to utilize new data fetching methods. - Removed WebSocket connections for traffic and memory data, replaced with IPC polling. - Added logging for better traceability of data fetching and service status. * refactor: unify external controller handling and improve IPC path resolution * fix: replace direct IPC path retrieval with guard function for external controller * fix: convert external controller IPC path to string for proper insertion in config map * fix: update dependencies and improve IPC response handling * fix: remove unnecessary unix conditional for ipc path import * Refactor traffic and memory monitoring to use IPC stream; remove TrafficService and TrafficManager. Introduce new IPC-based data retrieval methods for traffic and memory, including formatted data and system overview. Update frontend components to utilize new APIs for enhanced data display and management. * chore: bump crate rand version to 0.9.2 * feat: Implement enhanced traffic monitoring system with data compression and sampling - Introduced `useTrafficMonitorEnhanced` hook for advanced traffic data management. - Added `TrafficDataSampler` class for handling raw and compressed traffic data. - Implemented reference counting to manage data collection based on component usage. - Enhanced data validation with `SystemMonitorValidator` for API responses. - Created diagnostic tools for monitoring performance and error tracking. - Updated existing hooks to utilize the new enhanced monitoring features. - Added utility functions for generating and formatting diagnostic reports. * feat(ipc): improve URL encoding and error handling for IPC requests - Add percent-encoding for URL paths to handle special characters properly - Enhance error handling in update_proxy with proper logging - Remove excessive debug logging to reduce noise - Update kode-bridge dependency to v0.1.5 - Fix JSON parsing error handling in PUT requests Changes include: - Proper URL encoding for connection IDs, proxy names, and test URLs - Enhanced error handling with fallback responses in updateProxy - Comment out verbose debug logs in traffic monitoring and data validation - Update dependency version for improved IPC functionality * feat: major improvements in architecture, traffic monitoring, and data validation * Refactor traffic graph components: Replace EnhancedTrafficGraph with EnhancedCanvasTrafficGraph, improve rendering performance, and enhance visual elements. Remove deprecated code and ensure compatibility with global data management. * chore: update UPDATELOG.md for v2.4.0 release, refine traffic monitoring system details, and enhance IPC functionality * chore: update UPDATELOG.md to reflect removal of deprecated MihomoManager and unify IPC control * refactor: remove global traffic service testing method from cmds.ts * Update src/components/home/enhanced-canvas-traffic-graph.tsx * Update src/hooks/use-traffic-monitor-enhanced.ts * Update src/components/layout/layout-traffic.tsx * refactor: remove debug state management from LayoutTraffic component ---------
This commit is contained in:
Tunglies
@@ -7,6 +7,7 @@ import {
|
||||
useTheme,
|
||||
PaletteColor,
|
||||
Grid,
|
||||
Box,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
ArrowUpwardRounded,
|
||||
@@ -17,18 +18,19 @@ import {
|
||||
CloudDownloadRounded,
|
||||
} from "@mui/icons-material";
|
||||
import {
|
||||
EnhancedTrafficGraph,
|
||||
EnhancedTrafficGraphRef,
|
||||
ITrafficItem,
|
||||
} from "./enhanced-traffic-graph";
|
||||
EnhancedCanvasTrafficGraph,
|
||||
type EnhancedCanvasTrafficGraphRef,
|
||||
type ITrafficItem,
|
||||
} from "./enhanced-canvas-traffic-graph";
|
||||
import { useVisibility } from "@/hooks/use-visibility";
|
||||
import { useClashInfo } from "@/hooks/use-clash";
|
||||
import { useVerge } from "@/hooks/use-verge";
|
||||
import { createAuthSockette } from "@/utils/websocket";
|
||||
import parseTraffic from "@/utils/parse-traffic";
|
||||
import { isDebugEnabled, gc } from "@/services/api";
|
||||
import { isDebugEnabled, gc } from "@/services/cmds";
|
||||
import { ReactNode } from "react";
|
||||
import { useAppData } from "@/providers/app-data-provider";
|
||||
import { useTrafficDataEnhanced } from "@/hooks/use-traffic-monitor-enhanced";
|
||||
import { TrafficErrorBoundary } from "@/components/common/traffic-error-boundary";
|
||||
import useSWR from "swr";
|
||||
|
||||
interface MemoryUsage {
|
||||
@@ -64,7 +66,6 @@ declare global {
|
||||
|
||||
// 控制更新频率
|
||||
const CONNECTIONS_UPDATE_INTERVAL = 5000; // 5秒更新一次连接数据
|
||||
const THROTTLE_TRAFFIC_UPDATE = 500; // 500ms节流流量数据更新
|
||||
|
||||
// 统计卡片组件 - 使用memo优化
|
||||
const CompactStatCard = memo(
|
||||
@@ -160,20 +161,15 @@ export const EnhancedTrafficStats = () => {
|
||||
const theme = useTheme();
|
||||
const { clashInfo } = useClashInfo();
|
||||
const { verge } = useVerge();
|
||||
const trafficRef = useRef<EnhancedTrafficGraphRef>(null);
|
||||
const trafficRef = useRef<EnhancedCanvasTrafficGraphRef>(null);
|
||||
const pageVisible = useVisibility();
|
||||
|
||||
// 使用AppDataProvider
|
||||
const { connections, uptime } = useAppData();
|
||||
|
||||
// 使用单一状态对象减少状态更新次数
|
||||
const [stats, setStats] = useState({
|
||||
traffic: { up: 0, down: 0 },
|
||||
memory: { inuse: 0, oslimit: undefined as number | undefined },
|
||||
});
|
||||
|
||||
// 创建一个标记来追踪最后更新时间，用于节流
|
||||
const lastUpdateRef = useRef({ traffic: 0 });
|
||||
// 使用增强版的统一流量数据Hook
|
||||
const { traffic, memory, isLoading, isDataFresh, hasValidData } =
|
||||
useTrafficDataEnhanced();
|
||||
|
||||
// 是否显示流量图表
|
||||
const trafficGraph = verge?.traffic_graph ?? true;
|
||||
@@ -189,171 +185,7 @@ export const EnhancedTrafficStats = () => {
|
||||
},
|
||||
);
|
||||
|
||||
// 处理流量数据更新 - 使用节流控制更新频率
|
||||
const handleTrafficUpdate = useCallback((event: MessageEvent) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data) as ITrafficItem;
|
||||
if (
|
||||
data &&
|
||||
typeof data.up === "number" &&
|
||||
typeof data.down === "number"
|
||||
) {
|
||||
// 使用节流控制更新频率
|
||||
const now = Date.now();
|
||||
if (now - lastUpdateRef.current.traffic < THROTTLE_TRAFFIC_UPDATE) {
|
||||
try {
|
||||
trafficRef.current?.appendData({
|
||||
up: data.up,
|
||||
down: data.down,
|
||||
timestamp: now,
|
||||
});
|
||||
} catch {}
|
||||
return;
|
||||
}
|
||||
lastUpdateRef.current.traffic = now;
|
||||
const safeUp = isNaN(data.up) ? 0 : data.up;
|
||||
const safeDown = isNaN(data.down) ? 0 : data.down;
|
||||
try {
|
||||
setStats((prev) => ({
|
||||
...prev,
|
||||
traffic: { up: safeUp, down: safeDown },
|
||||
}));
|
||||
} catch {}
|
||||
try {
|
||||
trafficRef.current?.appendData({
|
||||
up: safeUp,
|
||||
down: safeDown,
|
||||
timestamp: now,
|
||||
});
|
||||
} catch {}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[Traffic] 解析数据错误:", err, event.data);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 处理内存数据更新
|
||||
const handleMemoryUpdate = useCallback((event: MessageEvent) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data) as MemoryUsage;
|
||||
if (data && typeof data.inuse === "number") {
|
||||
setStats((prev) => ({
|
||||
...prev,
|
||||
memory: {
|
||||
inuse: isNaN(data.inuse) ? 0 : data.inuse,
|
||||
oslimit: data.oslimit,
|
||||
},
|
||||
}));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[Memory] 解析数据错误:", err, event.data);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 使用 WebSocket 连接获取数据 - 合并流量和内存连接逻辑
|
||||
useEffect(() => {
|
||||
if (!clashInfo || !pageVisible) return;
|
||||
|
||||
const { server, secret = "" } = clashInfo;
|
||||
if (!server) return;
|
||||
|
||||
// WebSocket 引用
|
||||
let sockets: {
|
||||
traffic: ReturnType<typeof createAuthSockette> | null;
|
||||
memory: ReturnType<typeof createAuthSockette> | null;
|
||||
} = {
|
||||
traffic: null,
|
||||
memory: null,
|
||||
};
|
||||
|
||||
// 清理现有连接的函数
|
||||
const cleanupSockets = () => {
|
||||
Object.values(sockets).forEach((socket) => {
|
||||
if (socket) {
|
||||
socket.close();
|
||||
}
|
||||
});
|
||||
sockets = { traffic: null, memory: null };
|
||||
};
|
||||
|
||||
// 关闭现有连接
|
||||
cleanupSockets();
|
||||
|
||||
// 创建新连接
|
||||
console.log(
|
||||
`[Traffic][${EnhancedTrafficStats.name}] 正在连接: ${server}/traffic`,
|
||||
);
|
||||
sockets.traffic = createAuthSockette(`${server}/traffic`, secret, {
|
||||
onmessage: handleTrafficUpdate,
|
||||
onopen: (event) => {
|
||||
console.log(
|
||||
`[Traffic][${EnhancedTrafficStats.name}] WebSocket 连接已建立`,
|
||||
event,
|
||||
);
|
||||
},
|
||||
onerror: (event) => {
|
||||
console.error(
|
||||
`[Traffic][${EnhancedTrafficStats.name}] WebSocket 连接错误或达到最大重试次数`,
|
||||
event,
|
||||
);
|
||||
setStats((prev) => ({ ...prev, traffic: { up: 0, down: 0 } }));
|
||||
},
|
||||
onclose: (event) => {
|
||||
console.log(
|
||||
`[Traffic][${EnhancedTrafficStats.name}] WebSocket 连接关闭`,
|
||||
event.code,
|
||||
event.reason,
|
||||
);
|
||||
if (event.code !== 1000 && event.code !== 1001) {
|
||||
console.warn(
|
||||
`[Traffic][${EnhancedTrafficStats.name}] 连接非正常关闭，重置状态`,
|
||||
);
|
||||
setStats((prev) => ({ ...prev, traffic: { up: 0, down: 0 } }));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
console.log(
|
||||
`[Memory][${EnhancedTrafficStats.name}] 正在连接: ${server}/memory`,
|
||||
);
|
||||
sockets.memory = createAuthSockette(`${server}/memory`, secret, {
|
||||
onmessage: handleMemoryUpdate,
|
||||
onopen: (event) => {
|
||||
console.log(
|
||||
`[Memory][${EnhancedTrafficStats.name}] WebSocket 连接已建立`,
|
||||
event,
|
||||
);
|
||||
},
|
||||
onerror: (event) => {
|
||||
console.error(
|
||||
`[Memory][${EnhancedTrafficStats.name}] WebSocket 连接错误或达到最大重试次数`,
|
||||
event,
|
||||
);
|
||||
setStats((prev) => ({
|
||||
...prev,
|
||||
memory: { inuse: 0, oslimit: undefined },
|
||||
}));
|
||||
},
|
||||
onclose: (event) => {
|
||||
console.log(
|
||||
`[Memory][${EnhancedTrafficStats.name}] WebSocket 连接关闭`,
|
||||
event.code,
|
||||
event.reason,
|
||||
);
|
||||
if (event.code !== 1000 && event.code !== 1001) {
|
||||
console.warn(
|
||||
`[Memory][${EnhancedTrafficStats.name}] 连接非正常关闭，重置状态`,
|
||||
);
|
||||
setStats((prev) => ({
|
||||
...prev,
|
||||
memory: { inuse: 0, oslimit: undefined },
|
||||
}));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return cleanupSockets;
|
||||
}, [clashInfo, pageVisible, handleTrafficUpdate, handleMemoryUpdate]);
|
||||
// Canvas组件现在直接从全局Hook获取数据，无需手动添加数据点
|
||||
|
||||
// 执行垃圾回收
|
||||
const handleGarbageCollection = useCallback(async () => {
|
||||
@@ -369,9 +201,9 @@ export const EnhancedTrafficStats = () => {
|
||||
|
||||
// 使用useMemo计算解析后的流量数据
|
||||
const parsedData = useMemo(() => {
|
||||
const [up, upUnit] = parseTraffic(stats.traffic.up);
|
||||
const [down, downUnit] = parseTraffic(stats.traffic.down);
|
||||
const [inuse, inuseUnit] = parseTraffic(stats.memory.inuse);
|
||||
const [up, upUnit] = parseTraffic(traffic?.raw?.up_rate || 0);
|
||||
const [down, downUnit] = parseTraffic(traffic?.raw?.down_rate || 0);
|
||||
const [inuse, inuseUnit] = parseTraffic(memory?.raw?.inuse || 0);
|
||||
const [uploadTotal, uploadTotalUnit] = parseTraffic(
|
||||
connections.uploadTotal,
|
||||
);
|
||||
@@ -392,7 +224,7 @@ export const EnhancedTrafficStats = () => {
|
||||
downloadTotalUnit,
|
||||
connectionsCount: connections.count,
|
||||
};
|
||||
}, [stats, connections]);
|
||||
}, [traffic, memory, connections]);
|
||||
|
||||
// 渲染流量图表 - 使用useMemo缓存渲染结果
|
||||
const trafficGraphComponent = useMemo(() => {
|
||||
@@ -411,7 +243,7 @@ export const EnhancedTrafficStats = () => {
|
||||
onClick={() => trafficRef.current?.toggleStyle()}
|
||||
>
|
||||
<div style={{ height: "100%", position: "relative" }}>
|
||||
<EnhancedTrafficGraph ref={trafficRef} />
|
||||
<EnhancedCanvasTrafficGraph ref={trafficRef} />
|
||||
{isDebug && (
|
||||
<div
|
||||
style={{
|
||||
@@ -428,6 +260,10 @@ export const EnhancedTrafficStats = () => {
|
||||
>
|
||||
DEBUG: {!!trafficRef.current ? "图表已初始化" : "图表未初始化"}
|
||||
<br />
|
||||
状态: {isDataFresh ? "active" : "inactive"}
|
||||
<br />
|
||||
数据新鲜度: {traffic?.is_fresh ? "Fresh" : "Stale"}
|
||||
<br />
|
||||
{new Date().toISOString().slice(11, 19)}
|
||||
</div>
|
||||
)}
|
||||
@@ -487,19 +323,42 @@ export const EnhancedTrafficStats = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<Grid container spacing={1} columns={{ xs: 8, sm: 8, md: 12 }}>
|
||||
{trafficGraph && (
|
||||
<Grid size={12}>
|
||||
{/* 流量图表区域 */}
|
||||
{trafficGraphComponent}
|
||||
</Grid>
|
||||
)}
|
||||
{/* 统计卡片区域 */}
|
||||
{statCards.map((card, index) => (
|
||||
<Grid key={index} size={4}>
|
||||
<CompactStatCard {...card} />
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
<TrafficErrorBoundary
|
||||
onError={(error, errorInfo) => {
|
||||
console.error("[EnhancedTrafficStats] 组件错误:", error, errorInfo);
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={1} columns={{ xs: 8, sm: 8, md: 12 }}>
|
||||
{trafficGraph && (
|
||||
<Grid size={12}>
|
||||
{/* 流量图表区域 */}
|
||||
{trafficGraphComponent}
|
||||
</Grid>
|
||||
)}
|
||||
{/* 统计卡片区域 */}
|
||||
{statCards.map((card, index) => (
|
||||
<Grid key={index} size={4}>
|
||||
<CompactStatCard {...card} />
|
||||
</Grid>
|
||||
))}
|
||||
|
||||
{/* 数据状态指示器（调试用）*/}
|
||||
{isDebug && (
|
||||
<Grid size={12}>
|
||||
<Box
|
||||
sx={{
|
||||
p: 1,
|
||||
bgcolor: "action.hover",
|
||||
borderRadius: 1,
|
||||
fontSize: "0.75rem",
|
||||
}}
|
||||
>
|
||||
数据状态: {isDataFresh ? "新鲜" : "过期"} | 有效数据:{" "}
|
||||
{hasValidData ? "是" : "否"} | 加载中: {isLoading ? "是" : "否"}
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</TrafficErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user