标签: ipcrenderer

我正在努力理解如何在 .vue 文件中正确导入 ipcRenderer。

我放入 /src/background.js 文件：

webPreferences: {
  nodeIntegration:false,
  contextIsolation: true, // protects against prototype pollution
  preload: path.join(__dirname, "../dist_electron/preload.js"),
}

而且，基于https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration我放入了 preload.js ：

window.ipcRenderer = ipcRenderer

webpack.config.js :

module.exports = {
  entry: './src/background.js',
  target: 'node',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'background.js'
  }
}

为了方便调试，我创建了一个github repo。你可以从这里 git 克隆 repo：https : //github.com/raphael10-collab/ElectronVueTypeScriptScaffolding.git

执行 yarn -> yarn electron:serve 你会得到正确的页面。

但是当在 /src/views/Home.vue 中激活这一行时：

//从“电子”导入 { ipcRenderer }

你会得到这个错误：

__dirname 未定义

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 18.04.5 LTS …

我无法将任何对象或数组传递给 IPCRenderer。

我在通过 ipcs 传递对象或数组时遇到错误，我什至尝试通过使用 JSON.stringify 转换为字符串来发送，但它将其转换为空对象字符串。

我试过传递一个文件列表、一个对象数组甚至一个对象，什么都没有通过。只有字符串或手写对象在工作。

我读过它使用结构化克隆算法，并且此算法允许使用 fileList & Array

错误：

electron/js2c/renderer_init.js:74 Uncaught Error: An object could not be cloned.
    at EventEmitter.i.send.i.send (electron/js2c/renderer_init.js:74)
    at HTMLButtonElement.compressNow (ImageHandling.js:190)

我尝试了许多可能的解决方案，但没有任何效果

代码：

const compressNow = () => {
    ipcRenderer.send("image:compress", filess).  ///This is the error.
    // filess is a variable containing an array of selected files from an HTML input.
}

现在我尝试将文件发送为JSON.stringify，我尝试将其作为对象发送，但除非我手动编写一个虚拟对象或字符串，否则没有任何效果。

这是这个项目的我的Github Repo

带有错误J 的文件：-

图像处理.js

const fs = window.require('fs');
const {ipcRenderer} = require("electron") …

电子新手我已经弄清楚如何从Renderer发送到Main，但我正在尝试学习如何从Main到Renderer。在我的研究中，我读到：

IPC 从主进程发送到渲染器并尝试：

main.js：

const { app, ipcMain, Menu }  = require('electron')
const appVersion = process.env.npm_package_version
const mainWindow = require('./renderer/mainWindow')

app.on('ready', () => {
  mainWindow.createWindow(),
  console.log(`Trying to send app version to renderer: ${appVersion}`),
  mainWindow.webContents.send('app-version', appVersion),  
  Menu.setApplicationMenu(mainMenu)
})

但我收到错误：

未捕获的异常类型错误无法读取未定义的属性“发送”

阅读“从 IpcMain 发送同步消息到 IpcRenderer - Electron ”后，我尝试了：

ipcMain.on('app-version', (event) => {
    console.log(`Sent: ${appVersion}`)
    event.sender.send(appVersion)
}),

但没有任何反应或错误。我的渲染器.js：

const { ipcRenderer } = require('electron')
ipcRenderer.on('app-version', (event, res) => {
    console.log(res) …

Electron 中的 ipc 消息有顺序保证吗？如果有，它们是什么？

例如，在 main 中：

window.webContents.send('channel-a', 1)
window.webContents.send('channel-a', 2)

在渲染器中：

ipcRenderer.on('channel-a', (_event, num) => console.log(num))

消息是否始终按顺序传递到渲染器（例如上例中 1 在 2 之前）？

如果是这样，如果消息位于不同的通道上，它们是否也总是有序的（例如，通过更改channel-a为channel-b上面的某一行）？

在我的主机应用程序中，我有一个按钮，单击该按钮时，会将数据发送到我的角度应用程序。就像这样：

<button (click)="onClick()">Send Some Data</button>

成分：

onClick() {  
ipcRenderer.send("data-bridge",{name: 'John Smith', address: 'Main Street', date: new Date() );
}

在我的角度应用程序中，我收到如下数据：

import { ElectronService } from 'ngx-electron';

export class AppComponent {
  constructor( private electronService: ElectronService) {}

   ngOnInit() {
    if (this.electronService.ipcRenderer) {

      this.electronService.ipcRenderer.on('data-bridge', (event, data) => {
            console.log('got something', data)
        })
    }
  }
}

我注意到的行为是，点击按钮 x 次，我将看到警报 x 次：

• 1 次点击 --> 1 次警报
• 2 次点击 --> 2 次警报
• 3次点击--> 3次警报..等等

所以这显然向我表明存在内存泄漏。解决方案很简单，在接收到事件后删除事件监听器。

我尝试过做类似的事情：

this.electronService.ipcRenderer.on('data-bridge', (event, data) => {
        alert('got something');
        this.electronService.ipcRenderer.removeAllListeners()
} …

我正在编写一个 CRA + Electron 应用程序，我需要使用 ipcRenderer.invoke 进行进程间通信。我能够使 ipcRenderer.send 和 ipcRender.on 在 contextIsolation 模式下工作，但 ipcRender.invoke 却没有成功。由于某种我不明白的原因，我无法以任何形式（承诺或值）将处理程序响应返回给渲染器，我得到的只是“未定义”值。

预加载.js

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

 // whitelist channels
const validChannels = ["toMain", "fromMain", "invokeMain"]
// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
    "apiKey", {
        sendApi: (channel, ...args) => {
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, ...args);
            }
        },
        onApi: (channel, func) => {
            if (validChannels.includes(channel)) {
                // Deliberately strip event in func …