封装一个 renderer 之间通信的 class

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 就封装完毕了

相关推荐
Zuckjet_3 分钟前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801469 分钟前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店2 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown2 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy2 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip3 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿3 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
闭着眼睛学算法4 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴4 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.4 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js