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

相关推荐
flyliu6 小时前
keep-alive的理解
前端·vue.js
Spider_Man6 小时前
告别龟速构建,Vite让你的项目飞起来!
前端·javascript·vite
鹏程十八少6 小时前
8. Android <卡顿八>破局Android卡顿困局!基于Matrix+Systrace/Perfetto的布局嵌套深度优化实战(卡顿实战)
前端
CodeSheep6 小时前
甲骨文严查Java授权,公司连夜删除JDK。。
前端·后端·程序员
前端fighter6 小时前
Async/Await 实现原理
前端·javascript·面试
MiniCode6 小时前
EllipsizeEndTextview末尾省略自定义View
android·java·前端
前端小巷子6 小时前
Vue3 模板编译优化
前端·vue.js·面试
不爱说话郭德纲6 小时前
🔥面试官:说说看,用户登录后拿到的 Token,你应该怎么存?存哪里?
前端·安全·面试
艾小码6 小时前
React 渲染流程深度解析(结合 react-reconciler)
前端·javascript·react.js