【electron】ipc模块使用

20pzqm 等级 65 0 0

electron 进程模型

上篇帖子传送门——vue+electron 环境搭建记录(基于vue-cli-plugin-electron-builder)

electron 使用多进程架构

与chromium类似,electron使用多进程架构。单一进程架构能够节省资源,然而浏览器经常遇到恶意代码,可能导致进程崩溃,浏览器的多个页签公用一个进程必然会一损俱损,因此多进程架构更适合些(chromium多进程架构说明)。 【electron】ipc模块使用 在开发electron的过程中,我们主要接触两个进程: 主进程main process与渲染进程renderer process

主进程

每个electron 应用只有一个主进程, 对应于vcp-electron-builder搭建的项目里的background.js脚本.

主进程代码, 拥有能访问nodejs api的能力,可以require nodejs 的模块, 调用一些原生模块来与操作系统交互. 主进程负责管理electron应用的生命周期, 管理应用的窗口, 可以通过IPC模块来与渲染进程交互.

渲染进程

渲染进程就是负责渲染网页内容的, 网页html,css以及网页相关的js就跑在这里.

由于渲染进程不能用commonjs模块(至少默认不可以), 渲染进程不能用require来引入nodejs模块.(此处涉及到一些浏览器使用异步加载,因此不能用commonjs模块同步加载的原因,以后单开帖子记录)

渲染进程如果需要使用某些通过nodejs原生模块才能完成的工作(例如读取磁盘文件), 就需要用IPC来完成.

electron IPC使用

概述

官网讲的已经非常好了... electron IPC 进程间通信

实践

前提 上一帖搭建的环境

https://github.com/NightsLight-hub/vcped-test.git
tag:  0-initenv

目标

  • 主进程启动httpserver,将rest的pathVariable作为查询关键词发送渲染进程, 用span展示

1. 配置preload,暴露IpcRenderer给window对象

由于Electron的上下文隔离,我们需要利用contextBridge来将IpcRender暴露到渲染进程.

在vue.config.js中新增如下内容,参考

 module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: false,
      preload: 'src/preload.js'
    }
  }
};

在src(background.js同级目录)中新建preload.js

import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('ipcRenderer', {
  send: (channel, data) => {
    ipcRenderer.send(channel, data);
  },
  receive: (channel, func) => {
    ipcRenderer.on(channel, (event, ...args) => func(event, ...args));
  },
  invoke: (channel, func, ...args) => {
    ipcRenderer.invoke(channel, ...args).then((result) => {
      func(result);
    });
  }
});

在background.js,主窗口的webPreferences中增加preload 配置

const browserWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {

      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      preload: path.join(__dirname, 'preload.js')  // 增加preload配置
    }
  });

在渲染进程中用IpcRenderer来 修改home.vue, mounted 钩子中,用ipcRenderer来获取mainMsg的消息

<template>
  <div class="home">
    <span>{{ msg }}</span>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  data () {
    return {
      msg: ''  
    };
  },
  mounted () {
    // eslint-disable-next-line no-debugger
    debugger;
    window.ipcRenderer.receive('mainMsg', (event, ...args) => {
      console.log('get mainMsg');
      this.msg = args[0];   // msg 使用ipcrenderer的消息赋值
    });
  }
};

2. express监听20300端口,使用webcontents 发送消息到'search'通道

background.js 增加express 监听

const express = require('express');
...
async function createWindow () {
  // Create the browser window.
  const browserWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {

      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  });
  startExpress(browserWindow);
  ...
}

function startExpress (browserWindow) {
  const arserver = express();
  arserver.get('/api/search/:word', (req, res) => {
    console.log(req.params.word);
    // 使用主窗口的webContents来做进程通信,发送信息
    browserWindow.webContents.send('search', req.params.word);
    res.send('ok');
  });
}

启动调试

yarn electron:serve

使用命令行发送

curl 127.0.0.1:20300/api/msg/123

应用界面变化 【electron】ipc模块使用

本节代码可以从github获取

https://github.com/NightsLight-hub/vcped-test
tag:1-ipc
收藏
评论区

相关推荐

Android Binder原理(一)学习Binder前必须要了解的知识点
本文首发于微信公众号「刘望舒」 前言Binder原理是掌握系统底层原理的基石,也是进阶高级工程师的必备知识点,这篇文章不会过多介绍Binder原理,而是讲解学习Binder前需要的掌握的知识点。 1.Linux和Android的IPC机制种类IPC全名为interProcess Communication,含义为进程间
(三)使用electron
前提已经实现了(一)里面的效果连接:[https://www.cnblogs.com/yuNotes/p/12884930.html](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.cnblogs.com%2FyuNotes%2Fp%2F12884930.html) #### 1
(原)Electron+vue 应用实战
1.electron架构思考 ============== 在做electron桌面开发中,Electron+vue当下算是性价比的比较高的。但是electron算是小众开发,遇到问题,基本上就是掉进深坑,爬好久才出来。 为了做一个项目,我翻遍了国内好多网站。看到一篇好的文章。[Electron 应用实战 (架构篇)](https://www.oschi
electron(1)安装和使用
下载和安装 # Clone the Quick Start repository git clone https://github.com/atom/electron-quick-start # Install the dependencies and run npm install && npm start 会
Android中的IPC通信(一)
**IPC的概念**    IPC: Inter Process Communication,进程间通信。    短程通信: 一般而言,应用程序的组件都是在一个进程内部里执行,这种在同一进程内的通信就称为短程通信。    远程通信: 两个组件分别在不同的进程里执行,这种不同进程间组件的通信方式就被称为远程通信。 **IPC通信的效率*
Android Binder 设计与实现
关键词 **Binder Android IPC Linux** **内核** **驱动** 摘要 Binder是Android系统进程间通信(IPC)方式之一。Linux已经拥有管道,system V IPC,socket等IPC手段,却还要倚赖Binder来实现进程间通信,说明Binder具有无可比拟的优势。深入了解Binder并将之与传统IPC做
Android IPC(跨进程通信)之AIDL
Android IPC(跨进程通信)之AIDL ----------------------- IPC——跨进程通信,是指两个进程之间的数据交换过程。在说IPC的同时我们要知道什么是进程,什么是线程。线程是CPU调度的最小单元,进程可以理解为一个程序或者一个应用。一个进程中可以运行多个线程,而在Android程序中有一个主线程,也叫UI线程。 在And
AudioContext方法播放音频
`const fs = require('fs'); const electron = require('electron'); const dataPath = (electron.app || electron.remote.app).getPath('userData'); const fPath =` ${dataPath}/file/unzip\`
Dbus组成和原理
DBUS是实质上一个适用于桌面应用的进程间的通讯机制,即所谓的IPC机制。适合在同一台机器,不适合于INTERNET的IPC机制。DBUS不是一个为所有可能的应用的通用的IPC机制,不支持其他IPC机制的很多特性。DBUS提供了一个低时延、低消耗的IPC通讯,因为它采用了二进制的数据交换协议,不需要转换成文本化的数据进行交换,DBUS提供了面向多重对象系统的
Electron中通过asar打包后ffi
在使用Electron开发完应用程序后,需要打包生成各平台对应的可执行文件供用户使用。 这里以Mac平台为例,最简单的打包方案是使用**electron-packager**来对应用程序进行打包操作,如执行最简单的指令`electron-packager .`执行完成后会在同级目录生成`${appName}-${platfomr}-${arch}`目录如e
Electron开发使用Vue Devtools
转自 \[[https://orchidflower.oschina.io/2017/03/29/Using-Vue-Devtools-in-Electron/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Forchidflower.oschina.io%2F2017%2F03%2F29
Electron踩坑记录
心血来潮想做一个PC端应用,就来学学Electron,以下为学习Electron时的踩坑记录。 心血来潮想做一个PC端应用,就来学学Electron,以下为学习Electron时的踩坑记录。 安装 -- 在国内安装`electron`的时候,可能会因为网络原因遇到卡在`Building fresh packages...`(yarn)或者是卡在`nod
Linux环境进程间通信
[**Linux环境进程间通信(一)**](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.ibm.com%2Fdeveloperworks%2Fcn%2Flinux%2Fl-ipc%2Fpart1%2Findex.html) [http://www.ibm.com/develope
TMS WEB Core v1.2预览版:新的Electron应用程序支持
#### 2019年2月20日,星期三 几个月前,我们已经开始与[Electron进行](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Ftmssoftware.com%2Fsite%2Fblog.asp%3Fpost%3D495)实验。在工作概念验证之后,我们的目标是为Delphi开发人
【electron】ipc模块使用
electron 进程模型 electron 使用多进程架构与chromium类似,electron使用多进程架构。单一进程架构能够节省资源,然而浏览器经常遇到恶意代码,可能导致进程崩溃,浏览器的多个页签公用一个进程必然会一损俱损,因此多进程架构更适合些()。在开发electron的过程中,我们主要接触两个进程: 主进程main process与渲染进程re