Electron 主进程和渲染进程互相通信

置顶 wangjun0708

已于 2023-08-28 18:00:08 修改

阅读量1w

点赞数 6

分类专栏：技术文章标签： Electron

于 2019-02-25 10:20:18 首次发布

本文链接：https://blog.csdn.net/weixin_42762089/article/details/87912222

版权

技术专栏收录该内容

14 篇文章 1 订阅

订阅专栏

对于渲染进程之间的通信，可见另一篇总结：Electron 渲染进程之间的通信_王俊的博客-CSDN博客_electron渲染进程之间通信
下面总结一下主进程和渲染进程之间的通信。

说明：

自主到从：从Main到Renderer的消息传递，借助BrowerWindow.webContents.send()发送消息。
自从到主：从Renderer到Main的消息传递，借助ipcRender和ipcMain发送/接收消息。
事件机制：无论是BrowerWindow.webContents.send()，还是ipc，其实都是node的事件机制，都是EventEmitter的实例。

electron-msg

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

主进程

const { app, BrowserWindow } = require('electron')
let win = null

app.on('ready', () => {
  win = new BrowserWindow({ width: 800, height: 600 })
  win.loadURL(`file://${__dirname}/index.html`)
  win.webContents.on('did-finish-load', () => {
    win.webContents.send('ping', 'whoooooooh!')
  })
})

index.html

<html>
<body>
  <script>
    require('electron').ipcRenderer.on('ping', (event, message) => {
      console.log(message) // Prints 'whoooooooh!'，这里的message是object类型
    })
  </script>
</body>
</html>

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

index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
  <title>myapp</title>
</head>
 
<body>
  <input type="" name="" id="ipt" value="">
  <button type="button" onclick="connectMain()">和主进程通信</button>
 
  <script>
    const ipc = require('electron').ipcRenderer;
    var ipt = document.getElementById('ipt')
 
    function connectMain() {
      console.log('index.html', ipt.value);
      ipc.send('getMsg', ipt.value)
    }
  </script>
</body>
 
</html>

主进程

const ipc = require('electron').ipcMain
 
ipc.on('getMsg', (sys, msg) => {
  console.log(msg)  //接收窗口传来的消息
})

3.主进程和渲染进程之间发送和处理消息

可参考：electron 在主进程和渲染进程之间通信（异步和同步） – 均益个人博客

回应同步消息, 可以设置 event.returnValue.
回应异步消息, 可以使用 event.sender.send(...).

例子，在主进程和渲染进程之间发送和处理消息:

（过程：渲染进程发消息->主进程接收消息并回复->渲染进程接收主进程的回复）

渲染进程：

// In renderer process (web page).
const ipcRenderer = require('electron').ipcRenderer;
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')); // prints "pong"  发送同步消息

ipcRenderer.on('asynchronous-reply', function(event, arg) {    // 接收异步消息
  console.log(arg); // prints "pong"
});
ipcRenderer.send('asynchronous-message', 'ping');    // 发送异步消息

主进程：

// In main process.
const ipcMain = require('electron').ipcMain;
ipcMain.on('asynchronous-message', function(event, arg) {    // 接收异步消息
  console.log(arg);  // prints "ping"
  event.sender.send('asynchronous-reply', 'pong');     // 回应异步消息
});

ipcMain.on('synchronous-message', function(event, arg) {    // 接收同步消息
  console.log(arg);  // prints "ping"
  event.returnValue = 'pong';
});

希望本文对您有帮助，您的打赏是对我最大的鼓励~

wangjun0708

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
5
评论
Electron 主进程和渲染进程互相通信

对于渲染进程之间的通信，可见另一篇总结：https://blog.csdn.net/weixin_42762089/article/details/88532572下面总结一下主进程和渲染进程之间的通信。说明：自主到从：从Main到Renderer的消息传递，借助BrowerWindow.webContents.send()发送消息。自从到主：从Renderer到Main的消息传......
复制链接

扫一扫