公司网站与营销网站中山民众网站建设

公司网站与营销网站,中山民众网站建设,wordpress 音乐主题模板,手机网站域名怎么解析在鸿蒙与 Electron 的融合开发中#xff0c;跨端消息推送是企业级应用的核心需求之一。鸿蒙推送服务#xff08;Push Kit#xff09;能实现鸿蒙设备的高效消息触达#xff0c;而将其与 Electron 桌面应用结合#xff0c;可打造 “鸿蒙设备触发、Electron 端接收响应” 的全…在鸿蒙与 Electron 的融合开发中跨端消息推送是企业级应用的核心需求之一。鸿蒙推送服务Push Kit能实现鸿蒙设备的高效消息触达而将其与 Electron 桌面应用结合可打造 “鸿蒙设备触发、Electron 端接收响应” 的全场景消息通知体系。本文将详细讲解如何集成鸿蒙推送服务到 Electron 应用中实现从鸿蒙设备推送消息到 Electron 端实时接收、展示通知的完整流程附带可直接运行的代码案例和工程化配置。一、核心价值与场景1. 核心价值全场景消息触达鸿蒙设备手机、平板、智慧屏触发的推送消息可实时推送到 Electron 桌面应用。原生体验融合Electron 端利用系统原生通知能力鸿蒙端借助 Push Kit 的高效推送机制兼顾跨端一致性与原生体验。低功耗与高可靠鸿蒙 Push Kit 采用长连接机制消息推送延迟低、可靠性高且对设备功耗优化友好。2. 典型应用场景办公协同鸿蒙手机端收到审批消息Electron 桌面端实时弹出通知提醒处理。智能家居鸿蒙智能设备检测到异常Electron 控制端立即接收告警推送。数据同步鸿蒙设备修改数据后推送消息触发 Electron 端自动刷新数据。二、环境搭建与前置准备1. 基础环境要求ElectronNode.jsv18、Electronv28、electron-builder打包工具鸿蒙DevEco Studio最新版、鸿蒙 SDKAPI 10、鸿蒙设备 / 模拟器开启开发者模式鸿蒙推送服务华为开发者联盟账号注册地址https://developer.huawei.com/consumer/cn/创建应用并开通 Push Kit 服务2. 鸿蒙推送服务配置关键步骤注册华为开发者应用登录华为开发者联盟创建鸿蒙应用填写应用信息并获取APP_ID、APP_SECRET、PACKAGE_NAME。开通 Push Kit 服务在应用管理后台找到 “增长服务 推送服务”开通服务并配置推送证书。下载配置文件将生成的agconnect-services.json文件复制到鸿蒙工程的entry/src/main目录下。3. 工程化初始化3.1 创建 Electron 工程基础结构bash运行# 初始化项目 mkdir harmony-electron-push cd harmony-electron-push npm init -y # 安装核心依赖 npm install electron electron-builder axios ws --save npm install nodemon --save-dev3.2 配置 package.jsonjson{ name: harmony-electron-push, version: 1.0.0, main: main/index.js, scripts: { start: electron ., dev: nodemon --exec electron ., build: electron-builder }, build: { appId: com.example.harmonypush, productName: HarmonyElectronPush, directories: { output: dist }, win: { target: nsis }, mac: { target: dmg }, linux: { target: deb } } }3.3 鸿蒙工程配置集成 Push Kit在鸿蒙工程的entry/src/main/module.json5中添加推送权限json5{ module: { name: entry, type: entry, requestPermissions: [ { name: ohos.permission.INTERNET }, { name: ohos.permission.DISTRIBUTED_DATASYNC }, { name: ohos.permission.GET_NETWORK_INFO }, { name: com.huawei.agconnect.permission.PUSH } // 鸿蒙推送权限 ], distributedConfiguration: { deviceCommunication: true, dataSync: true } } }在鸿蒙工程的build.gradle中添加 Push Kit 依赖groovydependencies { // 鸿蒙Push Kit依赖 implementation com.huawei.agconnect:agconnect-core-harmony:1.0.0 implementation com.huawei.hms:push-harmony:6.11.0.300 }三、核心代码案例鸿蒙推送与 Electron 通知集成整体流程说明鸿蒙端通过 Push Kit 获取设备推送令牌Token并将 Token 发送到 Electron 端接收服务端推送消息后通过 WebSocket 将消息转发到 Electron 端。Electron 端启动 WebSocket 服务接收鸿蒙端的 Token 和推送消息利用 Electron 的NotificationAPI 展示系统原生通知。步骤 1Electron 端启动 WebSocket 服务主进程javascript运行// main/websocket/server.js const WebSocket require(ws); const http require(http); const { app } require(electron); // 保存鸿蒙设备连接的WebSocket客户端 let clientWs null; // 创建HTTP服务器用于WebSocket挂载 const server http.createServer((req, res) { res.writeHead(200, { Content-Type: text/plain }); res.end(Harmony Electron Push Server\n); }); // 创建WebSocket服务 const wss new WebSocket.Server({ server }); // 监听WebSocket连接 wss.on(connection, (ws) { console.log(鸿蒙设备已连接); clientWs ws; // 接收鸿蒙端发送的消息 ws.on(message, (data) { const message JSON.parse(data.toString()); console.log(收到鸿蒙端消息, message); // 根据消息类型处理 switch (message.type) { case token: // 保存鸿蒙设备推送Token实际项目可存储到数据库 app.set(harmonyPushToken, message.data); console.log(鸿蒙设备Token, message.data); break; case push: // 触发Electron通知 const { title, content } message.data; sendElectronNotification(title, content); break; default: console.log(未知消息类型); } }); // 监听连接关闭 ws.on(close, () { console.log(鸿蒙设备连接关闭); clientWs null; }); // 监听错误 ws.on(error, (err) { console.error(WebSocket错误, err); }); }); // 发送Electron系统通知 function sendElectronNotification(title, content) { // 检查系统是否支持通知 if (Notification.permission ! granted) { Notification.requestPermission(); return; } // 创建并显示通知 const notification new Notification({ title: title, body: content, icon: ./assets/icon.png // 自定义通知图标可选 }); // 通知点击事件 notification.onclick () { console.log(用户点击了通知); // 可触发窗口激活、页面跳转等操作 }; } // 启动服务器端口8080 function startWebSocketServer() { server.listen(8080, () { console.log(WebSocket服务已启动端口8080); }); } // 向鸿蒙端发送消息可选 function sendMessageToHarmony(data) { if (clientWs clientWs.readyState WebSocket.OPEN) { clientWs.send(JSON.stringify(data)); } } module.exports { startWebSocketServer, sendMessageToHarmony, sendElectronNotification };步骤 2Electron 主进程初始化整合 WebSocket 与窗口javascript运行// main/index.js const { app, BrowserWindow, ipcMain } require(electron); const path require(path); const { startWebSocketServer } require(./websocket/server); let mainWindow; // 创建Electron窗口 function createWindow() { mainWindow new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, ../preload/index.js), contextIsolation: true, sandbox: false } }); // 加载渲染进程页面 mainWindow.loadFile(path.join(__dirname, ../renderer/index.html)); // 开启开发者工具 mainWindow.webContents.openDevTools(); } // 应用就绪后初始化 app.whenReady().then(() { createWindow(); // 启动WebSocket服务 startWebSocketServer(); app.on(activate, () { if (BrowserWindow.getAllWindows().length 0) createWindow(); }); }); // 关闭所有窗口时退出应用macOS除外 app.on(window-all-closed, () { if (process.platform ! darwin) app.quit(); }); // 监听渲染进程发送通知的请求可选 ipcMain.handle(send-notification, (event, title, content) { const { sendElectronNotification } require(./websocket/server); sendElectronNotification(title, content); return { success: true }; });步骤 3Electron 预加载脚本暴露 API 给渲染进程javascript运行// preload/index.js const { contextBridge, ipcRenderer } require(electron); // 向渲染进程暴露安全的API contextBridge.exposeInMainWorld(electronApi, { // 发送自定义通知 sendNotification: (title, content) ipcRenderer.invoke(send-notification, title, content), // 获取鸿蒙设备Token可选 getHarmonyToken: () ipcRenderer.invoke(get-harmony-token) }); // 监听主进程的Token更新事件可选 ipcRenderer.on(token-update, (event, token) { window.dispatchEvent(new CustomEvent(token-update, { detail: token })); });步骤 4Electron 渲染进程UI 展示与测试html预览!-- renderer/index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 title鸿蒙Electron推送示例/title style body { font-family: Arial, sans-serif; padding: 20px; background-color: #f5f5f5; } .container { max-width: 600px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } button { padding: 10px 20px; margin: 10px 5px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #0056b3; } #log { margin-top: 20px; padding: 10px; border: 1px solid #eee; border-radius: 4px; min-height: 200px; font-family: monospace; } /style /head body div classcontainer h1鸿蒙Electron推送服务集成/h1 div button onclicktestNotification()测试本地通知/button button onclickgetHarmonyToken()获取鸿蒙设备Token/button /div div idlog等待消息推送.../div /div script const logDiv document.getElementById(log); // 日志输出函数 function log(message) { const now new Date().toLocaleString(); logDiv.innerHTML [${now}] ${message}\n; // 滚动到最新日志 logDiv.scrollTop logDiv.scrollHeight; } // 测试本地通知 async function testNotification() { try { const response await window.electronApi.sendNotification(测试通知, 这是Electron本地测试通知); log(测试通知已发送 JSON.stringify(response)); } catch (error) { log(发送通知失败 error.message); } } // 获取鸿蒙设备Token可选 async function getHarmonyToken() { try { const token await window.electronApi.getHarmonyToken(); log(鸿蒙设备Token token); } catch (error) { log(获取Token失败 error.message); } } // 监听Token更新事件可选 window.addEventListener(token-update, (event) { log(鸿蒙设备Token更新 event.detail); }); // 初始化日志 log(应用已启动等待鸿蒙设备连接...); /script /body /html步骤 5鸿蒙端集成 Push Kit 并连接 WebSocket5.1 鸿蒙端获取推送 TokenArkTStypescript运行// entry/src/main/ets/utils/PushTokenUtil.ets import agconnect from hw-agconnect/core; import push from hw-agconnect/push; import { common } from ohos/api; // 初始化AGConnect export function initAGConnect(context: common.UIAbilityContext) { agconnect.instance().init(context); } // 获取鸿蒙推送Token export async function getPushToken(): Promisestring { try { const tokenResult await push.getToken(); const token tokenResult.token; console.log(获取推送Token成功, token); return token; } catch (error) { console.error(获取推送Token失败, error); return ; } }5.2 鸿蒙端连接 WebSocket 并发送消息typescript运行// entry/src/main/ets/utils/WebSocketClient.ets import webSocket from ohos.net.webSocket; import { BusinessError } from ohos.base; // WebSocket客户端实例 let ws: webSocket.WebSocket | null null; // 连接Electron的WebSocket服务 export async function connectWebSocket(electronIp: string, port: number) { try { // 创建WebSocket实例 ws webSocket.createWebSocket(); // 监听连接成功 ws.on(open, () { console.log(连接Electron WebSocket服务成功); }); // 监听消息接收Electron端向鸿蒙端发送消息可选 ws.on(message, (message: string | ArrayBuffer) { console.log(收到Electron消息, message); }); // 监听连接关闭 ws.on(close, (code: number, reason: string) { console.log(WebSocket连接关闭代码${code}原因${reason}); // 重连机制可选 setTimeout(() { connectWebSocket(electronIp, port); }, 5000); }); // 监听错误 ws.on(error, (error: BusinessError) { console.error(WebSocket错误, error); }); // 连接到Electron的WebSocket服务替换为实际Electron设备IP await ws.connect(ws://${electronIp}:${port}); } catch (error) { console.error(连接WebSocket失败, error); } } // 向Electron发送消息 export function sendMessageToElectron(data: any) { if (ws ws.readyState webSocket.ReadyState.OPEN) { ws.send(JSON.stringify(data)); } else { console.error(WebSocket未连接无法发送消息); } }5.3 鸿蒙端页面初始化与推送消息处理typescript运行// entry/src/main/ets/pages/Index.ets import { initAGConnect, getPushToken } from ../utils/PushTokenUtil; import { connectWebSocket, sendMessageToElectron } from ../utils/WebSocketClient; import push from hw-agconnect/push; import common from ohos.app.ability.common; Entry Component struct Index { State message: string 鸿蒙推送服务初始化中...; private context getContext(this) as common.UIAbilityContext; aboutToAppear() { // 初始化AGConnect initAGConnect(this.context); // 连接Electron WebSocket服务替换为实际Electron设备IP connectWebSocket(192.168.1.101, 8080).then(async () { // 获取推送Token并发送到Electron const token await getPushToken(); if (token) { sendMessageToElectron({ type: token, data: token }); this.message 推送Token已发送到Electron; } else { this.message 获取推送Token失败; } }); // 监听鸿蒙推送消息 push.on(message, (message: push.PushMessage) { console.log(收到鸿蒙推送消息, message); // 将推送消息发送到Electron sendMessageToElectron({ type: push, data: { title: message.title || 鸿蒙推送, content: message.content || 无内容 } }); this.message 收到推送消息并转发到Electron; }); } build() { Column() { Text(this.message) .fontSize(20) .fontWeight(FontWeight.Bold) .margin({ top: 100 }) .textAlign(TextAlign.Center); } .width(100%) .height(100%) .backgroundColor(Color.White); } }四、运行与测试流程1. 鸿蒙侧运行在 DevEco Studio 中将鸿蒙工程运行到真机或模拟器确保设备与 Electron 处于同一局域网。替换鸿蒙代码中的 Electron 设备 IP 地址启动后会自动连接 WebSocket 服务并发送推送 Token。2. Electron 侧运行执行命令启动 Electron 应用bash运行npm run start查看 Electron 控制台确认鸿蒙设备已连接并接收 Token。3. 推送消息测试华为开发者联盟后台推送登录华为开发者联盟进入推送服务后台选择应用并发送测试推送消息。验证结果鸿蒙设备接收推送消息后会立即转发到 Electron 端Electron 弹出系统原生通知。本地测试点击 Electron 界面的 “测试本地通知” 按钮验证本地通知功能。五、工程化优化与避坑指南1. 关键优化点重连机制鸿蒙端 WebSocket 断开后添加自动重连逻辑提升稳定性。Token 持久化Electron 端将鸿蒙设备 Token 存储到本地文件或数据库避免每次重启丢失。消息加密推送消息涉及敏感数据时使用 AES 加密传输保障数据安全。通知样式定制Electron 端可自定义通知的图标、声音、操作按钮提升用户体验。2. 常见坑点与解决方案WebSocket 连接失败确保 Electron 与鸿蒙设备处于同一局域网关闭防火墙检查端口是否被占用。鸿蒙推送 Token 获取失败检查agconnect-services.json文件是否配置正确Push Kit 服务是否开通设备是否联网。Electron 通知不显示Windows 系统需开启应用的通知权限macOS 系统需在 “系统设置 通知” 中允许通知。推送消息延迟鸿蒙 Push Kit 的消息推送延迟通常在秒级若延迟过高检查设备网络状态和推送服务配置。六、扩展场景服务端推送集成在实际项目中通常由后端服务触发推送消息可通过华为推送服务的 API 实现后端调用华为推送 API使用APP_SECRET获取访问令牌调用推送接口向鸿蒙设备发送消息。鸿蒙端转发到 Electron鸿蒙设备接收消息后通过 WebSocket 转发到 Electron 端。Electron 端处理业务逻辑根据推送消息的类型触发不同的业务操作如数据刷新、窗口跳转。示例Node.js 后端调用华为推送 API核心代码javascript运行const axios require(axios); // 获取华为推送访问令牌 async function getAccessToken(appId, appSecret) { const response await axios.post(https://oauth-login.cloud.huawei.com/oauth2/v3/token, { grant_type: client_credentials, client_id: appId, client_secret: appSecret }); return response.data.access_token; } // 发送推送消息 async function sendPushMessage(token, accessToken, title, content) { await axios.post(https://push-api.cloud.huawei.com/v1/{appId}/messages:send, { message: { notification: { title: title, body: content }, token: [token] } }, { headers: { Authorization: Bearer ${accessToken}, Content-Type: application/json } }); }七、总结本文通过 WebSocket 实现了鸿蒙推送服务与 Electron 应用的集成完成了从鸿蒙设备接收推送消息到 Electron 端展示原生通知的全流程。这种方案兼顾了鸿蒙 Push Kit 的高效推送能力和 Electron 的桌面端原生体验可直接应用于企业级全场景应用开发。开发者可基于本文的思路拓展更多功能如推送消息的分类处理、通知的点击事件响应、多鸿蒙设备的推送联动等进一步提升应用的实用性和用户体验。随着鸿蒙生态的不断完善Electron 与鸿蒙的融合将为跨端开发带来更多可能性。欢迎大家加入[开源鸿蒙跨平台开发者社区](https://openharmonycrossplatform.csdn.net)一起共建开源鸿蒙跨平台生态。