Electron（基于Vue）中使用IPC

Posted 2021-06-26 lime2019

IPC（InterProcess Communication，进程间通信）指在不同进程之间传播或交换信息。

使用IPC

• 1. 项目简介
• 2. IPC配置
• • 2.1 创建预加载脚本
  • 2.2 配置预加载脚本
  • 2.3 更新主进程中调用
• 3. 主进程使用IPC
• 4. 渲染进程使用IPC

1. 项目简介

本项目为TCP/IP大作业翻牌游戏中客户端部分。

本项目使用Vue作为前端框架，并使用Vue CLI Plugin Electron Builder插件辅助构建Electron应用。

本项目package.json文件：

{
  "name": "purble-pairs-client",
  "version": "0.1.0",
  "author": "[e-mail]",
  "description": "翻牌游戏客户端",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron:serve": "vue-cli-service electron:serve",
    "electron:build": "vue-cli-service electron:build",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "core-js": "^3.6.5",
    "element-ui": "^2.15.1",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-plugin-component": "^1.1.1",
    "electron": "^11.0.0",
    "electron-devtools-installer": "^3.1.0",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.6",
    "vue-template-compiler": "^2.6.11"
  }
}

使用的是Electron 11.0.0。

2. IPC配置

由于本项目中渲染进程并不需要使用Node环境，仅需要使用IPC。因此根据Vue CLI Plugin Electron Builder官方文档中Node Integration部分内容可实现Electron中使用IPC的相关配置。

2.1 创建预加载脚本

Preload Files 允许在Vue应用 (shared variable)的上下文中通过Node integration执行JS。

在src文件夹下创建preload.js文件

// src/preload.js
import { ipcRenderer } from 'electron'
window.ipcRenderer = ipcRenderer

2.2 配置预加载脚本

根据Vue CLI Plugin Electron Builder官方文档中Preload Files要求进行配置：

// vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      preload : 'src/preload.js',
    }
  }
}

2.3 更新主进程中调用

// src/background.js
const win = new BrowserWindow({
  width: 800,
  height: 600,
  title : "Lime翻牌游戏",
  icon : "src/assets/logo.ico",
  webPreferences: {
    nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
    preload: path.join(__dirname, 'preload.js')
  }
})

然后需要重新运行electron:serve使相关配置生效。

之后，即可使用window.ipcRenderer进行客户端。

3. 主进程使用IPC

4. 渲染进程使用IPC