electron 两个渲染进程之间通信

一、使用主进程作为中介

使用主进程作为中介相对较为灵活,但可能会增加主进程的负担

1. 从一个渲染进程向主进程发送消息

在发送消息的渲染进程中,可以使用 ipcRenderer 模块向主进程发送消息。例如:

javascript 复制代码
const { ipcRenderer } = require("electron");

ipcRenderer.send("custom-event", "message from renderer 1");

2. 主进程接收并转发消息

在主进程中,可以使用 ipcMain 模块接收消息并转发给另一个渲染进程。例如:

javascript 复制代码
const { ipcMain } = require("electron");

ipcMain.on("custom-event", (event, message) => {

  // 查找目标窗口并发送消息

  const webContents = event.sender;

  const targetWindow = BrowserWindow.fromWebContents(webContents);

  targetWindow.webContents.send("custom-event", message);

});

3. 接收消息的渲染进程接收消息:

在接收消息的渲染进程中,可以使用 ipcRenderer 模块接收主进程转发的消息。例如:

javascript 复制代码
const { ipcRenderer } = require("electron");

ipcRenderer.on("custom-event", (event, message) => {

  console.log(`Received message: ${message}`);

});

二、使用 localStorage 或 sessionStorage 进行简单通信

使用存储进行通信较为简单,但只适用于简单的数据传递

1. 一个渲染进程写入数据

在一个渲染进程中,可以使用 localStorage 或 sessionStorage 来存储数据,例如:

javascript 复制代码
localStorage.setItem("sharedData", "message from renderer 1");

2. 另一个渲染进程读取数据

在另一个渲染进程中,可以读取存储的数据,例如:

javascript 复制代码
const data = localStorage.getItem("sharedData");

console.log(`Received data: ${data}`);

三、使用 BroadcastChannel 进行通信

使用 BroadcastChannel 可以实现直接的通信,但需要注意兼容性问题。

1. 创建 BroadcastChannel

在两个渲染进程中,可以创建一个 BroadcastChannel 实例,并使用相同的频道名称。例如:

javascript 复制代码
const channel = new BroadcastChannel("my-channel");

2. 发送消息

在一个渲染进程中,可以使用`postMessage`方法发送消息,例如:

javascript 复制代码
channel.postMessage("message from renderer 1");

3. 接收消息

在另一个渲染进程中,可以通过监听`message`事件来接收消息,例如

javascript 复制代码
channel.addEventListener("message", (event) => {

  console.log(`Received message: ${event.data}`);

});
相关推荐
我狸才不是赔钱货1 小时前
前端技术栈全景图:从HTML到现代框架的演进之路
前端·html
百花~2 小时前
前端三剑客之一 HTML~
前端·html
lang201509282 小时前
Spring远程调用与Web服务全解析
java·前端·spring
孤狼warrior4 小时前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫
前端炒粉4 小时前
18.矩阵置零(原地算法)
javascript·线性代数·算法·矩阵
listhi5204 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
一点一木5 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊5 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost5 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns6 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端