进程通讯

通讯方案

• ipcMain和ipcRenderer
• remote模块

ipcMain和ipcRenderer

上下文隔离后

渲染进程=>主进程

主要API：

• 单向通讯：ipcMain.on、ipcRenderer.send
• 双向通讯：ipcMain.handle、ipcRenderer.invoke

主进程（定义）

// main.js
const { ipcMain } = require('electron')
const createWindow = () => {
  const win = new BrowserWindow({
    .../
  })
  // 这里定义 'ping'
  ipcMain.handle('ping', () => 'pong')
  // 定义事件
  ipcMain.on('set-title', (event, title) => {
    const webContents = event.sender
    const win = BrowserWindow.fromWebContents(webContents)
    win.setTitle(title)
  })
}

• 预加载（暴露）

// preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('versions', {
  // 暴露 'ping'
  ping: () => ipcRenderer.invoke('ping'),
  // 暴露 'setTitle'
  setTitle: (title) => ipcRenderer.send('set-title', title),
})

• 渲染进程（调用）

// renderer.js
const func = async () => {
  const response = await window.versions.ping()
  console.log(response) // prints out 'pong'
}

func()

const setTitle = async (newTitle) => {
   await versions.setTitle(newTitle)
}

主进程=>渲染进程

// 渲染进程
ipcRenderer.invoke('some-name', someArgument).then((result) => {
  // ...
})

// 主进程
ipcMain.handle('some-name', async (event, someArgument) => {
  const result = await doSomeWork(someArgument)
  return result
})

上下文隔离前

一般都是渲染进程向主进程发起请求，主进程进行监听处理，并返回结果。

• 主进程

//主进程-监听
ipcMain.on('channel',(e,arg){
    console.log(arg) //arg 就是渲染进程发过来的东西
    //....xxxxx 处理任务
    e.reply('channel','信息主体任何类型') //给渲染进程回传结果  - 异步
   e.returnValue = '信息主体任何类型'    //给渲染进程回传结果  - 同步
})

• 渲染进程

//发送方 - 渲染进程 - 发送消息到主进程
ipcRenderer.send('chann el','信息主体任何类型') //发送异步消息
ipcRenderer.sendSync('channel','信息主体任何类型') //发送同步消息
ipcRenderer.sendTo('webID','channel',...args)

//渲染进程接收结果
ipcRenderer.on('channel',(e,arg)=>{
    //...... 处理返回的arg结果
})

消息端口(MessageChannelMain)

官方文档

主进程与渲染进程通讯

• 主进程：main.js

// 建立通道
const { MessageChannelMain } from 'electron'
app.whenReady(()=>{
    const mainWindow = new BrowserWindow({})
    
    
    // 建立通道
    const { port1, port2 } = new MessageChannelMain()
    
    // 在主进程中对窗口暴露一个消息通道
    mainWindow.once('ready-to-show', () => {
        mainWindow.webContents.postMessage('port', null, [port1])
    })
})

• 渲染进程：renderer.js

import { ipcRenderer } from 'electron'

ipcRenderer.on('port', e => {
  // 接收到端口，使其全局可用。
  window.electronMessagePort = e.ports[0]

  window.electronMessagePort.onmessage = messageEvent => {
    // 处理消息
    console.log(messageEvent)
  }
})

• 使用

window.electronMessagePort.postMessage('ping')

渲染进程之间通讯

• 主进程：main.js