{"id":22746394,"url":"https://github.com/zhujiaming/electron-wpc","last_synced_at":"2025-04-14T10:22:05.989Z","repository":{"id":47012889,"uuid":"209724992","full_name":"zhujiaming/electron-wpc","owner":"zhujiaming","description":"Electron 窗口间通讯工具","archived":false,"fork":false,"pushed_at":"2022-09-05T01:23:29.000Z","size":134,"stargazers_count":25,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T23:33:03.705Z","etag":null,"topics":["electron","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/electron-wpc","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhujiaming.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-20T06:52:32.000Z","updated_at":"2024-12-04T12:12:31.000Z","dependencies_parsed_at":"2022-09-16T13:32:55.613Z","dependency_job_id":null,"html_url":"https://github.com/zhujiaming/electron-wpc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhujiaming%2Felectron-wpc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhujiaming%2Felectron-wpc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhujiaming%2Felectron-wpc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhujiaming%2Felectron-wpc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhujiaming","download_url":"https://codeload.github.com/zhujiaming/electron-wpc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248860088,"owners_count":21173358,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","typescript"],"created_at":"2024-12-11T02:13:12.027Z","updated_at":"2025-04-14T10:22:05.964Z","avatar_url":"https://github.com/zhujiaming.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## electron-wpc\n\n该工具库基于 EventEmitter+Promise，实现 electron 窗口与窗口间、窗口与主进程间、窗口广播消息等便捷化通信。\n\u003e 如果觉得有帮助欢迎点个⭐，同时也欢迎提出issue。[electron-wpc \u003e\u003e](https://github.com/zhujiaming/electron-wpc)\n## 安装\n\n```powershell\nnpm install electron-wpc\n```\n\n## 功能\n\n1. EventEmitter+Promise 方式实现渲染进程与主进程间的消息通信\n\n   ![1](./img/1.png)\n\n2. EventEmitter+Promise 方式实现两个窗口间的 renderer 进程间的消息通信；\n\n   \u003e a. 支持多对一的半双工消息通信。\\\n   \u003e  b. 基于 EventEmitter+Promise 特性实现窗口间消息的发送及结果主动返回；\\\n   \u003e  c. 消息处理者（Provider Renderer）可主动向发送者（Resolver Renderer）抛出异常。\\\n   \u003e  d. 支持消息的超时处理。\\\n   \u003e  e. 集成简单。\n\n   ![2](./img/2.png)\n\n3. EventEmitter+Promise 方式实现多窗口广播通信；\n\n   \u003e a.支持一对多的单工消息通信。\\\n   \u003e  b.支持广播成功或失败的消息回调。\\\n   \u003e  c.支持广播前在 main 进程中对数据加工。\\\n   \u003e  c.集成简单。\n\n   ![3](./img/3.png)\n\n## 使用示例\n\n\u003e 示例中的执行过程及结果在窗口控制台中打印。\n\n```powershell\nnpm install\nnpm run example\n```\n\n## 集成与应用\n\n### ① 渲染进程与主进程通过 EventEmitter+Promise 方式进行消息通信\n\n1. main 进程中，待 BrowserWindow 初始化完成，使用 WPCMainRendererConn 对象注册监听者\n\n```javascript\nconst { WPCMainRendererConn } = require(\"electron-wpc\");\nvar mainRendererConn = new WPCMainRendererConn();\n// 绑定窗口\nmainRendererConn.bindWindow(win2);\n// 注册事件\nmainRendererConn.on(\"event_getTime\", (resolve, rejcet, arg) =\u003e {\n  console.log(\"mainRendererConn arg:\", arg);\n  try {\n    setTimeout(() =\u003e {\n      resolve(`现在时间：${Date.now()}`);\n    }, 1000);\n  } catch (e) {\n    reject(e);\n  }\n});\n```\n\n2. renderer 进程中\n\n```javascript\nvar rendererConnect = new WPCMainRendererConn();\nrendererConnect.setTimeOut(3000); //设置超时时间（默认5s)\nfunction sendToMain() {\n  console.log(\"send to main process\");\n  rendererConnect\n    .send(\"event_getTime\", \"getTimeArg\")\n    .then((retFromMain) =\u003e {\n      console.log(\"main process result:\", retFromMain);\n    })\n    .catch((e) =\u003e {\n      console.error(\"main process error:\", e);\n    });\n}\n```\n\n### ② 双窗口间(renderer 进程)消息发送及处理结果的获取:\n\n1. 在 main 进程中注册 Provider Window（作为内容提供者），并绑定 TAG。(单个窗口可根据作用类型不同设置不同的 tag)\n\n```javascript\nconst {\n  registProviderWindow,\n  unRegistProviderWindow,\n} = require(\"electron-wpc\");\n//...\nconst winProvider = new BrowserWindow();\nconst TAG = \"tag_for_win_provider\";\n//...\nregistProviderWindow(winProvider, TAG);\n//...销毁\nwinProvider.on(\"close\", () =\u003e {\n  unRegistProviderWindow(TAG);\n});\n```\n\n2. 在 Provider Window 的 Renderer 进程中，注册相应的监听事件。\n\n```javascript\nconst { WPCProviderDelegate } = require(\"electron-wpc\");\nconst providerDelegate = new WPCProviderDelegate();\n\n//example :更新用户表的任务\nproviderDelegate.on(\"update_user_table\", (resolve, reject, args) =\u003e {\n  //模拟耗时操作\n  setTimeout(() =\u003e {\n    const replyArgs = { result: `update user id:${args.id} success!` };\n    resolve(replyArgs);\n  }, 1000);\n});\n```\n\n3. 在 resolver Window 的 Renderer 进程中，在相应业务逻辑处发送消息，等待执行结果。\n\n```javascript\nconst { WPCResolverDelegate } = require(\"electron-wpc\");\nconst TAG = \"tag_for_win_provider\"; //需填入目标Provider的tagId.\nconst resolverDelegate = new WPCResolverDelegate(TAG); //这里需要传入tag以指定Provider\n// （可选）可设置超时时间，如果超时时间内没有返回结果，则将catch timeout error.\nresolverDelegate.setTimeOut(6 * 1000); //default is 5s.\n//发送消息\nresolverDelegate\n  .send(\"update_user_table\")\n  .then((res) =\u003e {\n    //结果返回\n    console.log(\"\u003c-update_user_table res\", res);\n  })\n  .catch((e) =\u003e {\n    //处理失败\n    console.error(\"\u003c-receive error msg:\", e);\n  });\n```\n\n### ③ 广播通信\n\n1. 在 main 进程注册广播通信事件 id\n\n```javascript\nconst {\n  registBrodcastTransfer,\n  unRegistBrodcastTransfer,\n} = require(\"electron-wpc\");\n//注册多窗口接收广播\nregistBrodcastTransfer(\"broadcast_key1\");\n\n//如消息数据需要在main进程处理，则可对数据进行加工\nregistBrodcastTransfer(\"broadcast_key2\", (resolve, reject, args) =\u003e {\n  // 对args进行加工\n  args.id = args.id + \"xxx\";\n  resolve(args);\n});\n\n//...销毁\napp.on(\"close\", () =\u003e {\n  unRegistBrodcastTransfer(\"broadcast_key1\", \"broadcast_key2\");\n});\n```\n\n2. renderer 进程发送广播至其他所有 renderer 进程\n\n```javascript\nipcRenderer.send(\"broadcast_key1\", { id: 666 });\n\nipcRenderer.send(\"broadcast_key2\", \"abcd\");\n// （可选）监听广播发送的结果。(需要在原key的基础上添加-reply作为新key)\nipcRenderer.once(\"broadcast_key2\" + \"-reply\", (e, a) =\u003e {\n  console.log(\"=\u003esend broadcast result:\", a);\n});\n```\n\n3. renderer 进程注册广播接收者\n\n```javascript\nfunction exampleBroadcastReceiver() {\n  ipcRenderer.on(\"broadcast_key1\", (event, args) =\u003e {\n    console.log(\"接收到其他窗口的广播1:\", args);\n  });\n\n  ipcRenderer.on(\"broadcast_key2\", (event, args) =\u003e {\n    console.log(\"接收到其他窗口的广播2:\", args);\n  });\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhujiaming%2Felectron-wpc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhujiaming%2Felectron-wpc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhujiaming%2Felectron-wpc/lists"}