Electron中remote模块的替代方案

发表于 | 分类于
Electron中remote模块的替代方案

前言

在Electron12时候被废弃，使用必须配置enableRemoteModule

1
2
3
4
5
6
7
8
9
10
11
12
const win = new BrowserWindow({
    width: 1200,
    height: 600,
    title: "码客脑图",
    webPreferences: {
      webviewTag: true,
      webSecurity: false,
      enableRemoteModule: true,
      nodeIntegration: true,
      contextIsolation: false,
    },
});

在Electron14之后内置remote模块已经被移除，用enableRemoteModule开启remote也不能用了。

有如下几种解决方法：

  • 使用@electron/remote模块替代
  • 使用IPC传递数据

使用@electron/remote模块替代

安装

1
npm install --save @electron/remote

主进程中引入和初始化

安装好remote之后，我们需要在主进程和渲染进程中进行相应的设置才能使用。
首先是在主程序中引入和初始化remote。

1
2
3
4
const remote = require("@electron/remote/main")
remote.initialize()
//...
remote.enable(mainWindow.webContents)

渲染进程中引用

1
2
3
4
//以前的写法
const {BrowserWindow} = require("electron").remote
//现在的写法
const {BrowserWindow} = require("@electron/remote")

实例

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const { app,BrowserWindow,ipcMain,shell} = require("electron")
const remote = require("@electron/remote/main")
remote.initialize()

let mainWindow = null
app.on("ready",()=>{
    mainWindow = new BrowserWindow({
        width:300,
        height:300,
        webPreferences:{
            nodeIntegration:true,//允许渲染进程使用nodejs
            contextIsolation:false//允许渲染进程使用nodejs
        }
    })
    mainWindow.loadFile("index.html")
    mainWindow.on("closed",()=>{
        mainWindow = null
    })
    remote.enable(mainWindow.webContents)//3
})

渲染进程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const {BrowserWindow} = require("@electron/remote")

const btn1 = document.querySelector("#btn1")

const baidu_site = "https://www.baidu.com"

window.onload = ()=>{
    btn1.onclick = ()=>{
        win = new BrowserWindow({
            width:500,
            height:500,
        })
        win.loadFile("index.html")
    }
}

进程间通讯

渲染进程=>主进程=>渲染进程

异步

在渲染器进程 (网页) 中

1
2
3
4
5
6
const { ipcRenderer } = require("electron");

ipcRenderer.send('downloadfile', 'http://www.psvmc.cn/favicon.ico')
ipcRenderer.on('downloadfile-result', (event, arg) => {
  console.log(arg)
})

在主进程中

1
2
3
4
5
6
const { ipcMain } = require("electron")

ipcMain.on("downloadfile", (event, arg) => {
  console.log(arg); // prints "ping"
  event.reply("downloadfile-result", "E://1.jpg");
});

同步

在渲染器进程 (网页) 中

1
2
const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

在主进程中

1
2
3
4
5
const { ipcMain } = require('electron')
ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.returnValue = 'pong'
})

主进程=>渲染进程

在主进程中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const { ipcMain } = require('electron')

let rtmpWindow = new BrowserWindow({
    width: 400,
    height: 600,
    frame: false,
    hasShadow: false,
    show: false,
    title: "",
    webPreferences: {
      nodeIntegration: true
    }
  });
rtmpWindow.loadFile("views/rtmp.html");
rtmpWindow.webContents.openDevTools()


rtmpWindow.webContents.on('did-finish-load', () => {
  //下面的这行代码要在上面的BrowserWindow加载完成之后调用
  rtmpWindow.webContents.send('asynchronous-msg',"test");
})

在渲染器进程 (网页) 中

1
2
3
4
5
const { ipcRenderer } = require('electron')

ipcRenderer.on('asynchronous-msg', (event, arg) => {
  console.log(arg) // prints "pong"
})

渲染进程=>渲染进程

利用主进程做消息中转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 渲染进程1
ipcRenderer.send('ping-event', 'ping');

// 在主进程中
ipcMain.on(
  'ping-event',
  (event, arg) => {
    yourWindow.webContents.send('pong-event', 'something');
  }
);

// 渲染进程2
ipcRenderer.on(
  'pong-event', 
  (event, arg) => {
    // do something
  }
);

使用 ipcRenderer.sendTo()

1
2
3
// 渲染进程
ipcRenderer.sendTo(webContentsId, channel, [, arg1][, arg2][, ...]);
ipcRenderer.sendTo(winId, 'ping', 'someThing');

获取进程id的方法

第一种： 通过 global 设置和获取

1
2
3
4
5
6
7
8
// 主进程中在global上自定义对象
global.winIds= {
  win1Id : win1.id,
  win2Id : win2.id
}

// 主进程获取
global.winIds["win1Id"];

第二种是： 主进程创建事件，发送信息(不推荐)

1
2
3
4
5
6
7
8
// 主进程中
win1.webContents.send('distributeIds',{
    win2Id : win2.id
});
 
win2.webContents.send('distributeIds',{
    win1Id : win1.id
});

页面数据共享

以前使用remote来取主进程数据，现在要用rpc了。

所有进程间

推荐这种方式，在所有的进程中都能共享数据。

但是如果要想在主进程和渲染进程之间共享数据，就不能用上面所说的方式了。

在主进程中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const { ipcMain } = require("electron");

// 主进程中在global上自定义对象
global.sharedObject = {
  token: "abc",
};

ipcMain.on("setGlobalValue", (event, arg) => {
  Object.assign(global.sharedObject, arg);
  event.returnValue = "success";
});

ipcMain.on("getGlobalValue", (event, arg) => {
  event.returnValue = global.sharedObject[arg];
});

在渲染器进程 (网页) 中

1
2
3
4
5
6
7
8
9
10
const { ipcRenderer } = window.require("electron");

//设置值
ipcRenderer.sendSync("setGlobalValue", {
  token: "psvmc",
});

//获取值
let tokenValue = ipcRenderer.sendSync("getGlobalValue", "token");
console.log(tokenValue);

渲染进程之间

在两个网页（渲染进程）间共享数据最简单的方法是使用浏览器中已经实现的 HTML5 API。

其中比较好的方案是用 Storage API( localStorage，sessionStorage 或者 IndexedDB)。