electron 主线程和渲染线程通信

练气期小修士

已于 2024-04-09 09:39:37 修改

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： electron 文章标签： javascript

于 2021-03-12 10:46:18 首次发布

本文链接：https://blog.csdn.net/weixin_42551915/article/details/114687032

electron 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了Electron应用中前端与后台之间的通信方法，包括渲染进程如何向主进程发送同步及异步消息，以及主进程如何向渲染进程发送消息。此外，还提供了使用全局对象进行值传递的具体实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始我想说的是，文档很重要。强烈建议升级最新版本，不然你文档很多方法你用不了。

一、渲染线程（前端）向主线程（后台）发送消息

1.渲染线程

var data = ipcRenderer.sendSync('app-update', '')  //同步消息
ipcRenderer.send('app-update', "123") //异步消息

2.主线程
这里需要把前端的event 挂在global对象，args是前端发的第二个参数

 ipcMain.on('app-update', (event, ...args) => {
    global.eventValue =event
    // 其他处理逻辑
})

前端发送同步，和异步消息，响应的方式是不一样的

//对渲染线程同步消息响应
// global.eventValue.returnValue = percentage

// 响应渲染线程异步，异步消息响应需要在前端在绑定一个响应监听事件。
  global.eventValue.reply('show-percent',percentage) // ELECTRON VERSION>5.0.13
//electron5.0.13 以下
  // global.eventValue.sender.send('show-percent',percentage)

当然记得导包

import { app, BrowserWindow,ipcMain,ipcRenderer } from 'electron'

二、主线程（后台）向渲染线程（前端）发送消息

这里的例子是打开对话框

/**
* 发送消息
*/
const { webContents } = require('electron');

export async function openDialog(object) {

  return new Promise((resolve, reject) => {
    var content = webContents.getFocusedWebContents();
    if (content != null) {
      content.send('openDialog', object); // 这里关键
    }
    ipcMain.on('asynchronous-up', function (event, arg) {
      console.log("------------------------------------------------------");
      resolve(arg);
    })
  });
}

前端

 ipcRenderer.on("openDialog", (event, arg) => {
	//你的处理，如打开dialog
}

dialog的确定按钮逻辑，在发送消息给主线程

ipcRenderer.send("asynchronous-up", this.form);

三.渲染线程使用主线程的值

主线程

global.sharedObject = {
    p1:app.getAppPath(),
    p2:app.getName(),
    p3:app.getPath('exe')
  }

渲染线程

const data = remote.getGlobal('sharedObject')；
  console.log(data);

当electron升级到v28时候。通讯的机制请用MessageChannel。因为上面的方法被移除了。消息管道是更安全高效
参考

electron通信示例