作者 ：L、218
发布平台 ：CSDN
标签：#鸿蒙 #Electron #跨平台开发 #HarmonyOS #桌面应用 #WebSocket通信
🌟 引言：当鸿蒙遇上 Electron
随着华为鸿蒙系统（HarmonyOS）生态的不断扩展，其"一次开发，多端部署"的理念正在改变全场景智能设备的交互方式。与此同时，Electron 作为使用 Web 技术构建桌面应用的主流框架，已被 VS Code、Figma、Slack 等知名软件广泛采用。
但你是否思考过这样一个问题：
能否让运行在 PC 上的 Electron 应用，与鸿蒙设备（如手机、平板）实现数据互通和实时协同？
本文将带你探索这一前沿方向 ------ 基于 WebSocket 实现 Electron 与鸿蒙设备的双向通信，并通过完整图文教程 + 可运行代码案例，手把手教你打造一个跨平台消息同步系统！
📚 目录
1️⃣ 背景介绍
🔹 鸿蒙系统（HarmonyOS）
鸿蒙是华为推出的分布式操作系统，支持手机、手表、智慧屏、车机等多设备统一调度。核心优势包括：
- ✅ 分布式软总线：设备间自动发现、无缝连接
- ✅ 原子化服务：轻量级、免安装
- ✅ 多端协同：任务流转、数据共享
🔹 Electron 框架
Electron 允许开发者使用 HTML + CSS + JavaScript 构建跨平台桌面应用（Windows / macOS / Linux），其架构分为两个进程：
| 进程 | 功能 |
|---|---|
| 主进程（Main） | 创建窗口、调用系统 API、管理生命周期 |
| 渲染进程（Renderer） | 显示网页界面，类似浏览器标签页 |
https://img-blog.csdnimg.cn/20210608101522567.png
图：Electron 架构图
2️⃣ 技术融合可行性分析
虽然目前无法将 Electron 直接运行在鸿蒙上（底层内核不同），但我们可以通过以下方式实现功能联动：
| 方式 | 是否可行 | 说明 |
|---|---|---|
| HTTP 接口通信 | ✅ 推荐 | 使用 RESTful 或 JSON-RPC |
| WebSocket 实时通信 | ✅ 强烈推荐 | 支持双向推送 |
| 文件共享 | ⚠️ 局限大 | 依赖本地存储 |
| 华为 HMS Core 中转 | ✅ 高级方案 | 适合云端协同 |
✅ 本文选择 WebSocket 方案，实现实时、低延迟的消息同步。
3️⃣ 实战场景设计
🎯 场景目标
构建一个"跨设备消息中心"：
- Electron 应用：运行于 PC，显示来自鸿蒙设备的消息
- 鸿蒙应用：运行于模拟器或真机，发送消息到桌面端
- 通信协议：WebSocket
- 数据流向：鸿蒙 → Electron（单向演示，可扩展为双向）
4️⃣ Electron 端实现
步骤一：初始化项目
mkdir harmony-electron-demo
cd harmony-electron-demo
npm init -y
npm install electron ws --save-dev步骤二：创建主进程文件 main.js
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const WebSocket = require('ws')
let mainWindow
function createWindow() {
mainWindow = new BrowserWindow({
width: 900,
height: 600,
title: '鸿蒙-Electron 消息中心',
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true
}
})
mainWindow.loadFile('index.html')
}
// 启动 WebSocket 服务
const wss = new WebSocket.Server({ port: 8080 }, () => {
console.log('✅ WebSocket 服务器启动：ws://localhost:8080')
})
wss.on('connection', (ws, req) => {
const clientIP = req.socket.remoteAddress
console.log(`🔗 客户端连接：${clientIP}`)
ws.send(JSON.stringify({ type: 'welcome', data: '已连接至 Electron' }))
ws.on('message', (data) => {
try {
const msg = JSON.parse(data)
if (msg.type === 'harmony-message') {
// 发送到前端页面
mainWindow.webContents.send('new-message', msg.data)
}
} catch (e) {
console.error('消息解析失败', e)
}
})
ws.on('close', () => {
console.log('🔚 客户端断开连接')
})
})
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})创建预加载脚本 preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
onNewMessage: (callback) =>
ipcRenderer.on('new-message', (_event, value) => callback(value))
})创建前端页面 index.html
修改 package.json 添加启动命令
启动命令：
创建页面 Index.ets
// pages/Index.ets
import webSocket from '@ohos.net.webSocket';
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State status: string = '未连接'
@State receivedMsg: string = ''
private socket = webSocket.createWebSocket();
build() {
Column() {
Text('鸿蒙客户端').fontSize(22).fontWeight(FontWeight.Bold).margin(20)
Text(this.status)
.fontSize(16)
.textColor(this.getStatusColor())
.margin({ top: 10, bottom: 20 })
Button('🔌 连接 Electron')
.onClick(() => this.connectToElectron())
.backgroundColor('#007DFD')
.width(200)
.height(45)
.fontColor(Color.White)
.margin(10)
Button('📤 发送测试消息')
.onClick(() => this.sendMessage())
.backgroundColor('#4CAF50')
.width(200)
.height(45)
.fontColor(Color.White)
.margin(10)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
getStatusColor(): Color {
if (this.status.includes('成功')) return Color.Green
if (this.status.includes('失败')) return Color.Red
return Color.Gray
}
connectToElectron() {
// 注意：Android 模拟器访问本机使用 10.0.2.2
// 若使用真机，请确保在同一局域网，并填写 PC 的 IP 地址
const url = 'ws://10.0.2.2:8080'
this.socket.connect(url, {
protocol: 'chat',
timeOut: 5000
}).then(() => {
this.status = '✅ 已连接到 Electron'
this.setupMessageListener()
}).catch((err) => {
this.status = `❌ 连接失败: ${err.message}`
console.error('连接错误:', err)
})
}
setupMessageListener() {
this.socket.on('message', (data) => {
if (typeof data === 'string') {
console.info('收到来自 Electron 的欢迎消息:', data)
try {
const res = JSON.parse(data)
if (res.type === 'welcome') {
this.receivedMsg = res.data
}
} catch (e) {
console.warn('非 JSON 消息:', data)
}
}
})
}
sendMessage() {
const message = {
type: 'harmony-message',
data: `【鸿蒙】用户点击发送 - ${new Date().toLocaleTimeString()}`
}
this.socket.send({
data: JSON.stringify(message)
}).then(() => {
console.info('消息已成功发送')
}).catch((err) => {
this.status = `发送失败: ${err.message}`
console.error('发送失败:', err)
})
}
}💡 关键提示：
- 模拟器中访问主机用
10.0.2.2- 真机需与电脑处于同一 WiFi，并使用电脑局域网 IP（如
192.168.1.100）- 在
module.``json5中添加网络权限：
6️⃣ 效果展示
🖼️ 实际运行截图
Electron 桌面端 鸿蒙模拟器端
https://raw.githubusercontent.com/L218/harmony-electron-demo/main/screenshots/electron-ui.png https://raw.githubusercontent.com/L218/harmony-electron-demo/main/screenshots/harmony-app.png
✅ 成功实现：鸿蒙点击"发送"，Electron 实时收到消息！
7️⃣ 常见问题
问题 解决方案
连接被拒绝 检查防火墙是否开放 8080 端口
10.0.2.2 不通 确保 Electron 启动且监听 0.0.0.0:8080
真机连不上 查看 PC 的局域网 IP（ipconfig / ifconfig）
提示无网络权限 在 module.json5 添加 ohos.permission.INTERNET
8️⃣ 项目源码
GitHub 仓库已开源，欢迎 Star！
👉 https://github.com/L218/harmony-electron-demo
包含：
Electron 完整工程
鸿蒙 ArkTS 项目
详细 README 启动指南
9️⃣ 结语
通过本文实践，我们成功实现了 Electron 桌面应用与鸿蒙设备的实时通信，展示了 Web 技术与分布式系统的融合潜力。
未来可以进一步拓展：
使用 HMS Push 实现离线消息唤醒
鸿蒙原子化服务控制 Electron 应用
构建"超级终端"级别的跨端协作工具
🔥 技术的本质是连接，而创新始于跨界！
如果你喜欢这篇文章，欢迎点赞 ❤️、收藏 🌟、评论交流！
关注我，持续分享 鸿蒙开发、Electron、前端工程化 干货内容！
📌 版权声明：本文由 L、218 原创，转载请注明出处及 GitHub 链接。
#鸿蒙开发 #Electron #跨平台 #HarmonyOS #桌面应用 #WebSocket #分布式通信 #CSDN #ArkTS #JavaScript #L218