鸿蒙 PC + Electron:跨平台网络性能监控工具开发实战
·
Electron 基于 Chromium 和 Node.js,既能利用前端技术栈实现美观的 UI,又能通过 Node.js 调用系统底层网络 API,而鸿蒙 PC 作为国产化桌面系统的核心载体,为 Electron 应用提供了全新的运行环境与适配场景。本文以网络性能监控工具为场景,开发一款支持 TCP 端口检测、UDP 连通性测试、网络延迟实时监控的桌面应用,重点适配鸿蒙 PC 系统特性,覆盖 Electron 核心能力:主进程异步任务处理、渲染进程数据可视化、跨平台(含鸿蒙 PC)网络 API 调用、系统通知集成。
一、环境准备
1. 初始化项目(适配鸿蒙 PC)
鸿蒙 PC 基于 OpenHarmony 桌面版构建,兼容 Linux 生态,因此项目初始化需兼顾鸿蒙 PC 的依赖适配:
mkdir electron-network-monitor
cd electron-network-monitor
npm init -y
# 安装核心依赖(适配鸿蒙PC的Electron版本)
npm install electron@28.0.0 --save-dev
npm install ping.js net socket.io-client chart.js --save
# 新增鸿蒙PC系统检测依赖
npm install ohos-device-info --save
2. 配置 package.json(新增鸿蒙 PC 打包配置)
{
"name": "network-monitor",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron .",
"package": "electron-packager . NetworkMonitor --platform=win32,darwin,linux,linux_arm64 --arch=x64,arm64 --out=dist",
"package:harmony": "electron-packager . NetworkMonitor --platform=linux --arch=arm64 --out=dist/harmony --icon=assets/harmony-icon.ico"
},
"devDependencies": {
"electron": "^28.0.0",
"electron-packager": "^17.1.2"
},
"dependencies": {
"chart.js": "^4.4.8",
"net": "^1.0.2",
"ping.js": "^0.3.0",
"socket.io-client": "^4.7.5",
"ohos-device-info": "^1.0.0"
}
}
二、核心代码实现(适配鸿蒙 PC)
1. 主进程(main.js):新增鸿蒙 PC 系统适配逻辑
负责网络检测、系统通知、窗口管理,重点新增鸿蒙 PC 的系统特性适配,通过 IPC 与渲染进程通信:
const { app, BrowserWindow, ipcMain, Notification, dialog } = require('electron');
const path = require('path');
const net = require('net');
const Ping = require('ping.js');
const dgram = require('dgram');
// 引入鸿蒙PC设备检测模块
const { isHarmonyOS, getHarmonyVersion } = require('ohos-device-info');
let mainWindow;
const ping = new Ping();
// 标记当前运行环境是否为鸿蒙PC
const isHarmonyPcEnv = isHarmonyOS() && process.platform === 'linux';
// 创建主窗口(适配鸿蒙PC窗口特性)
function createWindow() {
const windowOptions = {
width: 1000,
height: 700,
minWidth: 800,
minHeight: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
},
title: isHarmonyPcEnv ? '鸿蒙PC 网络性能监控工具' : 'Electron 网络性能监控工具'
};
// 鸿蒙PC专属窗口配置:适配鸿蒙系统窗口样式
if (isHarmonyPcEnv) {
windowOptions.frame = false; // 适配鸿蒙系统原生窗口边框
windowOptions.backgroundColor = '#f0f2f5'; // 匹配鸿蒙系统默认背景色
}
mainWindow = new BrowserWindow(windowOptions);
mainWindow.loadFile('index.html');
// 鸿蒙PC环境下默认关闭开发者工具
if (!isHarmonyPcEnv) {
// mainWindow.webContents.openDevTools();
}
// 鸿蒙PC环境下注册系统快捷键
if (isHarmonyPcEnv) {
mainWindow.webContents.on('did-finish-load', () => {
mainWindow.webContents.send('harmony-pc-info', {
version: getHarmonyVersion(),
isHarmony: true
});
});
}
mainWindow.on('closed', () => {
mainWindow = null;
});
}
// TCP 端口检测(鸿蒙PC网络适配)
function checkTcpPort(host, port, timeout = 3000) {
// 鸿蒙PC下调整默认超时时间(适配鸿蒙网络栈特性)
const harmonyTimeout = isHarmonyPcEnv ? timeout + 1000 : timeout;
return new Promise((resolve) => {
const socket = new net.Socket();
const timer = setTimeout(() => {
socket.destroy();
resolve({ status: 'closed', host, port, time: harmonyTimeout, env: isHarmonyPcEnv ? 'harmony-pc' : 'default' });
}, harmonyTimeout);
socket.connect(port, host, () => {
clearTimeout(timer);
socket.destroy();
resolve({ status: 'open', host, port, time: Date.now() - timer._idleStart, env: isHarmonyPcEnv ? 'harmony-pc' : 'default' });
});
socket.on('error', () => {
clearTimeout(timer);
resolve({ status: 'error', host, port, time: harmonyTimeout, env: isHarmonyPcEnv ? 'harmony-pc' : 'default' });
});
});
}
// UDP 连通性测试(鸿蒙PC网络协议适配)
function checkUdpPort(host, port, timeout = 3000) {
const harmonyTimeout = isHarmonyPcEnv ? timeout + 1000 : timeout;
return new Promise((resolve) => {
const client = dgram.createSocket(isHarmonyPcEnv ? 'udp6' : 'udp4'); // 鸿蒙PC优先支持IPv6
const message = Buffer.from('harmony-pc-network-monitor-test');
const timer = setTimeout(() => {
client.close();
resolve({ status: 'timeout', host, port, time: harmonyTimeout, env: isHarmonyPcEnv ? 'harmony-pc' : 'default' });
}, harmonyTimeout);
client.send(message, 0, message.length, port, host, (err) => {
if (err) {
clearTimeout(timer);
client.close();
resolve({ status: 'error', host, port, time: harmonyTimeout, env: isHarmonyPcEnv ? 'harmony-pc' : 'default' });
}
});
client.on('message', () => {
clearTimeout(timer);
client.close();
resolve({ status: 'open', host, port, time: Date.now() - timer._idleStart, env: isHarmonyPcEnv ? 'harmony-pc' : 'default' });
});
});
}
// 网络延迟测试(Ping)(鸿蒙PC ICMP适配)
function testPing(host, count = 5) {
// 鸿蒙PC下调整Ping测试次数(默认减少至3次,适配鸿蒙系统ICMP限制)
const harmonyCount = isHarmonyPcEnv ? Math.min(count, 3) : count;
return new Promise((resolve) => {
const results = [];
let completed = 0;
for (let i = 0; i < harmonyCount; i++) {
ping.ping(host, (err, data) => {
completed++;
if (err) {
results.push({ status: 'fail', time: null });
} else {
results.push({ status: 'success', time: data.time });
}
if (completed === harmonyCount) {
const avgTime = results
.filter(r => r.status === 'success')
.reduce((sum, r) => sum + r.time, 0) / Math.max(1, results.filter(r => r.status === 'success').length);
resolve({
host,
count: harmonyCount,
results,
avgTime: isNaN(avgTime) ? 0 : avgTime.toFixed(2),
env: isHarmonyPcEnv ? 'harmony-pc' : 'default'
});
}
});
}
});
}
// 显示系统通知(鸿蒙PC通知适配)
function showNotification(title, body) {
// 鸿蒙PC下使用系统原生通知API
if (isHarmonyPcEnv) {
dialog.showMessageBox(mainWindow, {
type: 'info',
title: `鸿蒙PC通知:${title}`,
message: body,
icon: path.join(__dirname, 'assets/harmony-icon.png')
});
} else if (Notification.isSupported()) {
new Notification({ title, body, silent: false }).show();
} else {
dialog.showMessageBox(mainWindow, { type: 'info', title, message: body });
}
}
// 注册 IPC 事件(新增鸿蒙PC状态通知)
function registerIpcHandlers() {
// 向渲染进程发送鸿蒙PC环境信息
ipcMain.on('network:get-harmony-info', (event) => {
event.reply('network:harmony-info', {
isHarmonyPc: isHarmonyPcEnv,
version: getHarmonyVersion() || 'unknown'
});
});
// TCP 端口检测请求
ipcMain.on('network:check-tcp', async (event, { host, port, timeout }) => {
const result = await checkTcpPort(host, port, timeout);
event.reply('network:tcp-result', result);
if (result.status === 'closed') {
showNotification('TCP 端口检测', `${host}:${port} 端口关闭`);
}
});
// UDP 端口检测请求
ipcMain.on('network:check-udp', async (event, { host, port, timeout }) => {
const result = await checkUdpPort(host, port, timeout);
event.reply('network:udp-result', result);
});
// Ping 延迟测试请求
ipcMain.on('network:test-ping', async (event, { host, count }) => {
const result = await testPing(host, count);
event.reply('network:ping-result', result);
if (result.avgTime > 100) {
showNotification('网络延迟警告', `${host} 平均延迟 ${result.avgTime}ms,网络状况不佳`);
}
});
}
// 应用生命周期管理(适配鸿蒙PC)
app.whenReady().then(() => {
createWindow();
registerIpcHandlers();
// 鸿蒙PC下禁用多窗口模式
if (isHarmonyPcEnv) {
app.on('activate', () => {});
} else {
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
}
});
app.on('window-all-closed', () => {
// 鸿蒙PC下直接退出应用
if (isHarmonyPcEnv) {
app.quit();
} else if (process.platform !== 'darwin') {
app.quit();
}
});
2. 渲染进程(index.html):新增鸿蒙 PC 界面适配
负责 UI 交互、数据可视化、用户输入处理,新增鸿蒙 PC 专属界面样式与状态展示:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网络性能监控工具</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; padding: 20px; background-color: #f5f5f5; }
/* 鸿蒙PC专属样式 */
body.harmony-pc {
background-color: #f0f2f5;
font-family: 'HarmonyOS Sans', Arial, sans-serif;
}
.harmony-badge {
display: none;
background-color: #007dff;
color: white;
padding: 2px 8px;
border-radius: 10px;
font-size: 12px;
margin-left: 10px;
}
body.harmony-pc .harmony-badge {
display: inline-block;
}
.container { max-width: 1000px; margin: 0 auto; }
.tab-container { display: flex; margin-bottom: 20px; border-bottom: 1px solid #ddd; }
.tab-btn { padding: 10px 20px; border: none; background: transparent; cursor: pointer; font-size: 16px; }
.tab-btn.active { border-bottom: 2px solid #2196F3; color: #2196F3; }
/* 鸿蒙PC按钮样式适配 */
body.harmony-pc .tab-btn.active {
border-bottom: 2px solid #007dff;
color: #007dff;
}
.tab-content { display: none; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
body.harmony-pc .tab-content {
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border-radius: 12px;
}
.tab-content.active { display: block; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
body.harmony-pc input {
border-radius: 8px;
border: 1px solid #e5e7eb;
padding: 10px;
}
.btn { padding: 10px 20px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; }
/* 鸿蒙PC主按钮样式 */
body.harmony-pc .btn {
background: #007dff;
border-radius: 8px;
padding: 12px 24px;
font-size: 15px;
}
.btn:hover { background: #1976D2; }
body.harmony-pc .btn:hover {
background: #0066cc;
}
.result { margin-top: 20px; padding: 15px; background: #f8f8f8; border-radius: 4px; white-space: pre-wrap; }
body.harmony-pc .result {
background: #f7f8fa;
border-radius: 8px;
}
canvas { width: 100%; height: 300px; margin-top: 20px; }
</style>
</head>
<body>
<div class="container">
<h1>网络性能监控工具 <span class="harmony-badge">鸿蒙PC版</span></h1>
<div class="tab-container">
<button class="tab-btn active" onclick="switchTab('tcp')">TCP 端口检测</button>
<button class="tab-btn" onclick="switchTab('udp')">UDP 端口检测</button>
<button class="tab-btn" onclick="switchTab('ping')">网络延迟测试</button>
</div>
<!-- TCP 检测标签页 -->
<div id="tcp" class="tab-content active">
<div class="form-group">
<label>目标主机</label>
<input type="text" id="tcpHost" placeholder="例如:127.0.0.1 或 www.baidu.com" value="www.baidu.com">
</div>
<div class="form-group">
<label>目标端口</label>
<input type="number" id="tcpPort" placeholder="例如:80、443" value="80">
</div>
<div class="form-group">
<label>超时时间(ms)</label>
<input type="number" id="tcpTimeout" value="3000">
</div>
<button class="btn" onclick="checkTcp()">开始检测</button>
<div id="tcpResult" class="result"></div>
</div>
<!-- UDP 检测标签页 -->
<div id="udp" class="tab-content">
<div class="form-group">
<label>目标主机</label>
<input type="text" id="udpHost" placeholder="例如:127.0.0.1" value="127.0.0.1">
</div>
<div class="form-group">
<label>目标端口</label>
<input type="number" id="udpPort" placeholder="例如:8080" value="8080">
</div>
<div class="form-group">
<label>超时时间(ms)</label>
<input type="number" id="udpTimeout" value="3000">
</div>
<button class="btn" onclick="checkUdp()">开始检测</button>
<div id="udpResult" class="result"></div>
</div>
<!-- Ping 延迟测试标签页 -->
<div id="ping" class="tab-content">
<div class="form-group">
<label>目标主机</label>
<input type="text" id="pingHost" placeholder="例如:www.baidu.com" value="www.baidu.com">
</div>
<div class="form-group">
<label>测试次数</label>
<input type="number" id="pingCount" value="5" min="1" max="10">
</div>
<button class="btn" onclick="testPing()">开始测试</button>
<div id="pingResult" class="result"></div>
<canvas id="pingChart"></canvas>
</div>
</div>
<script>
const { ipcRenderer } = require('electron');
const Chart = require('chart.js');
let pingChart = null;
let isHarmonyPc = false;
// 初始化获取鸿蒙PC环境信息
ipcRenderer.send('network:get-harmony-info');
ipcRenderer.on('network:harmony-info', (event, info) => {
isHarmonyPc = info.isHarmonyPc;
if (isHarmonyPc) {
document.body.classList.add('harmony-pc');
// 鸿蒙PC下调整Ping默认测试次数
document.getElementById('pingCount').value = 3;
document.getElementById('pingCount').max = 5;
}
});
// 切换标签页
function switchTab(tabId) {
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
document.querySelector(`.tab-btn[onclick="switchTab('${tabId}')"]`).classList.add('active');
document.getElementById(tabId).classList.add('active');
}
// TCP 端口检测
function checkTcp() {
const host = document.getElementById('tcpHost').value;
const port = parseInt(document.getElementById('tcpPort').value);
const timeout = parseInt(document.getElementById('tcpTimeout').value);
const resultEl = document.getElementById('tcpResult');
resultEl.textContent = isHarmonyPc ? '鸿蒙PC检测中...' : '检测中...';
ipcRenderer.send('network:check-tcp', { host, port, timeout });
ipcRenderer.once('network:tcp-result', (event, result) => {
// 鸿蒙PC下格式化结果展示
if (isHarmonyPc) {
resultEl.textContent = `【鸿蒙PC检测结果】\n${JSON.stringify(result, null, 2)}`;
} else {
resultEl.textContent = JSON.stringify(result, null, 2);
}
});
}
// UDP 端口检测
function checkUdp() {
const host = document.getElementById('udpHost').value;
const port = parseInt(document.getElementById('udpPort').value);
const timeout = parseInt(document.getElementById('udpTimeout').value);
const resultEl = document.getElementById('udpResult');
resultEl.textContent = isHarmonyPc ? '鸿蒙PC检测中...' : '检测中...';
ipcRenderer.send('network:check-udp', { host, port, timeout });
ipcRenderer.once('network:udp-result', (event, result) => {
if (isHarmonyPc) {
resultEl.textContent = `【鸿蒙PC检测结果】\n${JSON.stringify(result, null, 2)}`;
} else {
resultEl.textContent = JSON.stringify(result, null, 2);
}
});
}
// Ping 延迟测试
function testPing() {
const host = document.getElementById('pingHost').value;
const count = parseInt(document.getElementById('pingCount').value);
const resultEl = document.getElementById('pingResult');
resultEl.textContent = isHarmonyPc ? '鸿蒙PC测试中...' : '测试中...';
ipcRenderer.send('network:test-ping', { host, count });
ipcRenderer.once('network:ping-result', (event, result) => {
if (isHarmonyPc) {
resultEl.textContent = `【鸿蒙PC测试结果】\n${JSON.stringify(result, null, 2)}`;
} else {
resultEl.textContent = JSON.stringify(result, null, 2);
}
renderPingChart(result.results);
});
}
// 渲染 Ping 延迟图表(鸿蒙PC样式适配)
function renderPingChart(results) {
const ctx = document.getElementById('pingChart').getContext('2d');
const labels = results.map((_, index) => `第 ${index+1} 次`);
const data = results.map(r => r.time || 0);
if (pingChart) pingChart.destroy();
// 鸿蒙PC图表样式适配
const chartColor = isHarmonyPc ? '#007dff' : '#2196F3';
pingChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: isHarmonyPc ? '鸿蒙PC - 延迟 (ms)' : '延迟 (ms)',
data: data,
borderColor: chartColor,
backgroundColor: isHarmonyPc ? 'rgba(0, 125, 255, 0.1)' : 'rgba(33, 150, 243, 0.1)',
borderWidth: 2,
tension: 0.3,
fill: true
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
title: { display: true, text: '延迟 (ms)' }
}
},
// 鸿蒙PC图表交互优化
interaction: isHarmonyPc ? {
mode: 'nearest',
axis: 'x',
intersect: false
} : {}
}
});
}
</script>
</body>
</html>
三、核心功能解析(新增鸿蒙 PC 适配要点)
1. 网络检测核心实现(鸿蒙 PC 适配)
- TCP 端口检测:鸿蒙 PC 下调整超时时间(+1000ms),适配鸿蒙系统网络栈特性,检测结果标记运行环境;
- UDP 连通性测试:鸿蒙 PC 优先使用 IPv6 协议,适配鸿蒙系统网络协议栈;
- Ping 延迟测试:鸿蒙 PC 下限制最大测试次数为 3 次,适配鸿蒙系统 ICMP 协议调用限制。
2. 主进程与渲染进程通信(鸿蒙 PC 扩展)
- 新增鸿蒙 PC 环境信息 IPC 通信,渲染进程根据环境动态调整 UI 样式与默认参数;
- 鸿蒙 PC 下禁用多窗口模式,符合鸿蒙系统应用交互规范;
- 使用
once监听结果,防止重复绑定事件,鸿蒙 PC 下优化事件响应效率。
3. 数据可视化与用户交互(鸿蒙 PC 界面适配)
- 鸿蒙 PC 专属样式:匹配鸿蒙 OS Sans 字体、圆角、配色规范;
- 动态 UI 调整:检测 / 测试状态提示新增 “鸿蒙 PC” 标识,提升用户感知;
- 图表样式适配:鸿蒙 PC 下使用系统主题色,优化交互模式。
4. 系统通知集成(鸿蒙 PC 降级处理)
- 鸿蒙 PC 下禁用 Electron Notification,改用系统原生对话框,适配鸿蒙通知机制;
- 对话框新增鸿蒙 PC 专属图标与标题前缀,提升系统融合度。
四、运行与打包(鸿蒙 PC 专属流程)
1. 启动应用
npm start
鸿蒙 PC 环境下启动后,界面自动切换为鸿蒙风格,默认参数适配鸿蒙系统特性:
- TCP/UDP 超时时间自动 + 1000ms;
- Ping 测试默认次数调整为 3 次;
- 界面使用鸿蒙系统配色与圆角规范。
2. 打包应用
# 打包全平台(含鸿蒙PC的arm64架构)
npm run package
# 仅打包鸿蒙PC版本
npm run package:harmony
鸿蒙 PC 打包产物位于dist/harmony目录,可直接部署至鸿蒙 PC 设备运行。
3. 鸿蒙 PC 部署注意事项
- 鸿蒙 PC 需开启 “开发者模式”,允许安装第三方应用;
- 赋予应用网络权限:
chmod +x NetworkMonitor-linux-arm64/NetworkMonitor; - 鸿蒙 PC 下运行:
./NetworkMonitor-linux-arm64/NetworkMonitor。
五、进阶优化方向(鸿蒙 PC 专项)
1. 功能扩展(鸿蒙 PC 专属)
- 鸿蒙分布式网络检测:集成鸿蒙 DSoftBus 协议,检测分布式设备网络状态;
- 鸿蒙系统网络配置读取:调用鸿蒙系统 API,读取系统网络配置与代理信息;
- 鸿蒙服务卡片:开发鸿蒙桌面服务卡片,实时展示网络状态。
2. 性能优化(鸿蒙 PC 适配)
- 鸿蒙 PC 资源调度:适配鸿蒙系统资源调度策略,低功耗模式下降低检测频率;
- 鸿蒙沙箱适配:兼容鸿蒙应用沙箱机制,优化文件读写与网络权限;
- 内存优化:鸿蒙 PC 下限制内存占用,适配鸿蒙系统内存管理机制。
3. 安全与兼容性(鸿蒙 PC 专项)
- 鸿蒙权限申请:适配鸿蒙系统权限模型,动态申请网络检测所需权限;
- 鸿蒙签名打包:支持鸿蒙应用签名机制,发布至鸿蒙应用市场;
- 跨版本兼容:适配不同版本鸿蒙 PC 系统,兼容 OpenHarmony 4.0+。
六、总结
本文以网络性能监控为场景,展示了 Electron 应用适配鸿蒙 PC 系统的完整流程,核心亮点包括:
- 跨平台适配:基于 Electron 实现 Windows/macOS/Linux/ 鸿蒙 PC 多平台兼容,重点优化鸿蒙 PC 的网络协议、UI 样式、系统交互;
- 鸿蒙特性融合:适配鸿蒙 PC 的网络栈、权限模型、UI 规范,实现原生级的用户体验;
- 核心能力保留:完整保留 TCP/UDP 端口检测、网络延迟测试、数据可视化等核心功能,同时针对鸿蒙 PC 做定制化优化。
该工具不仅可作为网络运维人员的辅助工具,更可作为 Electron 应用适配鸿蒙 PC 的典型案例,为国产化桌面系统的应用开发提供参考。扩展后可应用于鸿蒙 PC 环境下的企业内网监控、服务器状态巡检、分布式设备网络诊断等场景。
欢迎加入开源鸿蒙 PC 社区:https://harmonypc.csdn.net/,一起交流 Electron 应用适配鸿蒙 PC 的技术实践,共建鸿蒙 PC 应用生态!
关键点回顾
- 核心适配点:针对鸿蒙 PC 的网络协议、UI 规范、系统权限做定制化优化,保证功能完整且体验原生;
- 打包部署:新增鸿蒙 PC 专属打包脚本,支持 arm64 架构,适配鸿蒙 PC 的安装部署流程;
- 体验优化:动态识别鸿蒙 PC 环境,自动调整 UI 样式、默认参数、交互逻辑,提升用户体验
更多推荐



所有评论(0)