前端与主进程（业务层）ipc通信

ipcRenderer.js

文件位置

./frontend/src/utils/ipcRenderer.js

内容

const Renderer = (window.require && window.require('electron')) || window.electron || {};

/**
 * ipc
 * 官方api说明：https://www.electronjs.org/zh/docs/latest/api/ipc-renderer
 * 
 * 属性/方法
 * ipc.invoke(channel, param) - 发送异步消息（invoke/handle 模型）
 * ipc.sendSync(channel, param) - 发送同步消息（send/on 模型）
 * ipc.on(channel, listener) - 监听 channel, 当新消息到达，调用 listener
 * ipc.once(channel, listener) - 添加一次性 listener 函数
 * ipc.removeListener(channel, listener) - 为特定的 channel 从监听队列中删除特定的 listener 监听者
 * ipc.removeAllListeners(channel) - 移除所有的监听器，当指定 channel 时只移除与其相关的所有监听器
 * ipc.send(channel, ...args) - 通过channel向主进程发送异步消息
 * ipc.postMessage(channel, message, [transfer]) - 发送消息到主进程
 * ipc.sendTo(webContentsId, channel, ...args) - 通过 channel 发送消息到带有 webContentsId 的窗口
 * ipc.sendToHost(channel, ...args) - 消息会被发送到 host 页面上的 <webview> 元素
 */

/**
 * ipc
 */
const ipc = Renderer.ipcRenderer || undefined;

/**
 * 是否为EE环境
 */
const isEE = ipc ? true : false;

export {
  Renderer, ipc, isEE
};

API

ipc

等于electron官方的api

isEE

是否为EE环境。可用此属性区别前端页面是在服务器环境还是用户电脑环境。

（废弃）API

（废弃）$ipcInvoke(route, params)

• 介绍：发送异步消息（invoke/handle 模型）
• 返回：Promise

# 回调语法
handleInvoke () {
    this.$ipcInvoke(ipcApiRoute.ipcInvokeMsg, '异步-回调').then(r => {
      console.log('r:', r);
    });
},

# async/await语法
async handleInvoke2 () {
    const msg = await this.$ipcInvoke(ipcApiRoute.ipcInvokeMsg, '异步');
},

（废弃）$ipcSendSync(route, params)

• 介绍：发送同步消息（send/on 模型）
• 返回：任意类型

# 语法
const msg = this.$ipcSendSync(ipcApiRoute.ipcSendSyncMsg, '同步');

（废弃）$ipc

• 介绍：全局ipc对象，等价于electron官方提供的 ipcRender

该对象包含如下方法：
on
once
removeListener
removeAllListeners
send
invoke
sendSync
postMessage
sendTo
sendToHost
IpcRendererEvent

详细说明见：https://www.electronjs.org/zh/docs/latest/api/ipc-renderer#ipcrendereronchannel-listener (opens new window)

（废弃）$ipc.send(route, params)

• 介绍：ipc的send属性，向主进程发送异步消息，可以发送任意参数。
• 返回：结果在 $ipc.on()监听的路由中

# 使用
const params = {
  type: 'start',
  content: '开始'
}
this.$ipc.send(ipcApiRoute.ipcSendMsg, params)

（废弃）$ipc.on(route, listener)

• 介绍：ipc的on属性，监听 route；当新消息到达，将调用listener
• 返回：callback

this.$ipc.on(ipcApiRoute.ipcSendMsg, (event, result) => {
  console.log('result:', result);

  // 调用后端的另一个接口
  event.sender.send(ipcApiRoute.hello, 'electron-egg');
})