欢迎大家来到IT世界,在知识的湖畔探索吧!

有了 electron ，我们就可以轻松地写桌面应用了。今天我们就看一看在 electron 中主线程是如何同渲染线程进行通讯的。那么我们需要先了解一下什么是主线程，什么又是渲染线程。

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

欢迎大家来到IT世界,在知识的湖畔探索吧!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（渲染进程）

欢迎大家来到IT世界,在知识的湖畔探索吧!const {ipcRenderer} = require('electron');


<p data-line="46" class="sync-line" style="margin:0;"></p>

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

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


<p data-line="53" class="sync-line" style="margin:0;"></p>

main.js (主线程）

const {
    app,
    BrowserWindow,
    ipcMain,
    shell
} = require('electron');


<p data-line="62" class="sync-line" style="margin:0;"></p>

引入 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);
        })
    })
    
})


<p data-line="80" class="sync-line" style="margin:0;"></p>