跨端实现 DSBridge 源码解析

好奇 DSBridge 如何完成通信的，快速说明一下 DSBridge 是一个非常轻便的在 H5 实现各种客户端能力的 API 库。如果你在寻求一个混合开发的通信库，可以使用一下 github.com/wendux/DSBr...

OK，现在上图。可能有点简洁，但请跟着我走一下。

iOS 的通信方式可以采用iOSrunJavaScriptTextInputPanelWithPrompt 方法。当然 DSBridge 作者提供了多种 Webview 事件。这里用 Webview 的 prompt 事件做案例。 H5 发送 prompt 事件（浏览器原生事件）。Webview 监听了这一事件传给 iOS。iOS 处理完成接收。

下面一层，H5 将回调方法保留在 window 对象中，并将回调函数名放入参数中传给 iOS。iOS 在处理完原生函数后，通过 evaluateJavaScript 将参数顺带传给 H5.

非常简单，DSbridge 顺带支持了 EventQueue，注册事件等功能。

做一个客户端的 Dsbridge

个人在制作模拟器时，仿造 DSbridge 制作了类似的结构。模拟器的技术栈时 Electron，你可能需要一些 Electron 的知识以理解下方结构。

模拟器结构

其实非常简单，在渲染线程中提供一个 invoke 方法，在主线程中监听即可。

javascript 复制代码

// 渲染线程：预脚本
const dsBridge = {
  call: (method: string, data, callback) => {
    // 触发 mock-dsbridge 事件
    console.log('dsBridge call:', method, data)
    // 触发自定义事件
    ipcRenderer.invoke('dsbridge-handler', { method, data })
  },

  register: (method, callback) => {
    console.log(`dsBridge 注册: ${method}`)
    window['dsBridge_' + method] = callback
  }
}

// 暴露桥事件
contextBridge.exposeInMainWorld('_dsbridge', dsBridge)

javascript 复制代码

  // 主线程
  const someNativeFunctions = {
    'tokenSync': () => {return 'mockedToken'},
  }

  ipcMain.handle('dsbridge-handler', (event, data) => {
    // 处理来自渲染进程的 dsbridge 调用
    console.log('dsbridge handler:', data)
     // 执行原生，mock
    const payload = await someNativeFunctions[event](data)
    childWindow.webContents.executeJavaScript(`window._dsbridge.${data.method}(${JSON.stringify(payload)})`)
  })