electron 通信总结

TangAcrab2024-05-11 18:19

默认开启上下文隔离的情况下

渲染进程调用主进程方法：

主进程

在 main.js 中，使用 ipcMain.handle，添加要处理的主进程方法
const { ipcMain } = require("electron");
在 electron 中创建 preload.ts 文件，从 electron 中引入的 contextBridge 桥接方法

暴露全局变量 eleapi 到渲染进程。并添加要调用的主进程方法。通过 ipcRenderer.on/invoke方法调用主进程方法。

ts 复制代码

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("eleapi", {
  mainNotifyCallback: (cb) => {
    ipcRenderer.on("mainNotify", cb);
  },
  tcpRevDataCallback: (cb) => {
    ipcRenderer.on("tcpRevData", cb);
  },
  tcpSndData: (data) => {
    ipcRenderer.invoke("tcpSendData", data);
  },
  ipccall: async (data) => await ipcRenderer.invoke('ipccall', data),
  getDebugConfig: async () => await ipcRenderer.invoke("getDebugConfig"),
  openWindow: (url) => {
    ipcRenderer.send("openWindow", url);
  }
});

在 main.js 创建窗口的方法中，预加载 preload.ts

渲染进程：

页面通过 window.eleapi.xxx访问暴露的方法。

主进程向渲染进程发送消息

preload文件中，通过 ipcRenderer.on("mainNotify", cb);监听到消息，向 web 派送 mainNotifyCallback