electron 中的渲染进程之间是无法直接通信的,需要借助 主进程 作为中间商 来进行通信,因此我们可以去封装一个 class 来实现这个效果,这样方便我们调用
假设我们现在有多个 webview,比如 library,shop,popup ......
我们可以封装一个 ipcService 类放到 utils 中去,既然是本质是借助 main 主进程去作中间商,那么还是让 preload 去 send 事件 给到 main,main 去 on 监听即可
我希望有个方法 sendToTarget 可以 传入 指定具体的 webview,第二个参数为一个事件,第三个参数给一个 ...args 即可
那么调用的形式就应该是
js
ipcService.sendToTarget('library', 'gameStarted', gameData)
我在 library 里面接收那么 希望 有个 onMessage,那就
js
ipcService.onMessage('gameStarted', (gameData) => {
// 处理游戏启动事件
})
函数名,入参以及如何使用确定了,现在动手实现,先看 sendToTarget
sendToTarget 自然需要将这个事件以及参数传递给 main
那么就需要我们在 preload 中抛出一个对象 electronAPI(名称自定义),让 render 调用 electronAPI 上的方法去告诉 main 即可
preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
send: (channel, ...args) => {
ipcRenderer.send(channel, ...args)
}
})
这样,我们就可以确定 ipcService.sendToTarget 如何 实现了
js
class IpcService {
constructor() {
if (!window.electronAPI) {
console.error('electronAPI 未初始化,请确保在 preload 脚本中正确配置');
}
}
sendToTarget (targetKey, event, ...args) {
window.electronAPI.send('webView:postMessage', targetKey, event, ...args)
}
}
于是我们在 main 中监听 webView:postMessage 事件并转发即可
在 main 中,通常会有个 webContentsManager.js 去集中管理 webview 的生命周期,我们可以将 webView:postMessage 的监听并转发在这里实现
js
const { app, ipcMain, WebContents, screen } = require('electron')
class WebContentsManager {
initIpc () {
ipcMain.on ('webView:postMessage', (_, key, ...args) => {
const win = this.getWindow(key)
if (!win) return
win.webContents.send('webView:postMessage', ...arg)
})
}
}
win.webContents.send() 就是 main 向 render 通信的方法
这里我们需要通过 key 拿到具体的 win,至于如何 getWindow ,这里我们可以选择 用 map 去存 webview,因此 this.webViewMap.get(key)
就能拿到 具体的 win
main send 来 webView:postMessage 事件后,我们就需要在 preload 的 electronAPI 中去 on 这个事件,onMessage 接收肯定需要一个回调来拿到 这个 ...args
js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
send: (channel, ...args) => {
ipcRenderer.send(channel, ...args)
}
receive: (channel, ...args) => {
ipcRenderer.on(channel, (event, ...args) => callback(...args))
}
})
接下来实现 ipcService.onMessage()
js
class IpcService {
constructor() {
if (!window.electronAPI) {
console.error('electronAPI 未初始化,请确保在 preload 脚本中正确配置');
}
}
sendToTarget (targetKey, event, ...args) {
window.electronAPI.send('webView:postMessage', targetKey, event, ...args)
}
onMessage (event, callback) {
window.electronAPI.receive('webView:postMessage', (receivedEvent, ...args) => {
if (receivedEvent === event) {
callback(...args)
}
})
}
}
const ipcService = new IpcService();
export { ipcService };
receivedEvent === event
是为了防止多个事件混淆,比如这里的我们传入的是 gameStarted,也有可能会有其他的事件
至此,这样一个 ipcService 就封装完毕了