Electron IPC 渲染线程和主线程通讯

606 06-11

有了 Electron ，我们就可以轻松地写桌面应用了，然后可以运行在不同操作系统，这是因为其原理基于浏览器内核实现应用。今天就来看一看在 Electron 中主线程是如何和渲染线程进行通讯的。那么需要先了解一下什么是主线程，什么又是渲染线程。

Electron 中，从 package.json 的 main 载入的 js 就是主进程，由主进程加载出来的页面就是渲染进程。主进程负责管理 Web 页面以及页面相应的渲染进程，包括原生的组件操作。而在 Electron 里的每个页面都有自己的进程，叫作渲染进程，主要负责 Web 的渲染。

{
  "name": "Demo ",
  "main": "main.js",
  "description": " Electron ",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^5.0.3"
  }
}
复制代码

创建项目时候，在 package.json 中 main 属性指定文件就是 Electron 的主线程文件。Electron 会先运行此文件来启动我们应用。

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            devTools:true,
            nodeIntegration:true
        }
    })
    mainWindow.loadFile('index.html')
    mainWindow.webContents.openDevTools()
    mainWindow.on('closed', function () {
        mainWindow = null
    })
}
复制代码

可以创建一个浏览器窗口，浏览器会加载项目下index.html文件。

  <script src="./index.js"></script>
复制代码

在 index.html 文件中引用的 index.js 是运行在渲染线程中。所以在 index.js 中 console 我们可以浏览器调试工具可以看到。而在 main.js 中的 console 是可以在后端看到输出。

index.js（渲染进程）

const {ipcRenderer} = require('electron');
复制代码

引入 ipc 依赖，使用 ipcRender 的 send 方法消息给 main.js(主线程）这个是异步的，我么可以在async-reply通道监听到返回事件，从而获取到事件对象来获取返回值。

ipcRenderer.send('async-msg','ping');
ipcRenderer.on('async-reply',(event,arg) => {
    console.log(arg);
});
复制代码

main.js (主线程）

const {
    app,
    BrowserWindow,
    ipcMain,
    shell
} = require('electron');
复制代码

引入 ipcMain 线程，然后在 async-msg通道监听到从 index.js 发送过来请求，然后这里通过使用 nodejs 的 fs 模块提供方法来读取目录下文件，然后返回给渲染线程。这样就完成一来一回通讯


ipcMain.on('async-msg',(event,arg)=>{
    console.log(arg)

    fs.readdir('/Users/jangwoo/Desktop/Zi/sf-test',(err,filenames)=>{
        if(err){
            event.reply('async-reply',err);
            return;
        }
        filenames.forEach((filename)=>{
            event.reply('async-reply',filename);
        })
    })
    
})