flutter和webview交互bridge封装,全局可调用。

使用window.addEventListener('message')实现,特殊的webview需要使用window.chrome.webview.addEventListener('message')

export default class MessageManager {
  constructor(source: string) {
    this.source = source
    this.handlers = {} // 存储处理函数
    window.addEventListener('message', this.handleMessage.bind(this))
    if (source === 'pc') {
      window.chrome.webview.addEventListener('message', this.handleMessage.bind(this))
    }
  }

  handleMessage(event) {
    const { type, data } = typeof event.data === 'string' ? JSON.parse(event.data) : event.data
    const handler = this.handlers[type]
    if (handler) {
      handler(data)
    } else {
      console.warn(`No handler found for message type: ${type}`)
    }
  }

  addHandler(type, handler) {
    if (!this.handlers[type]) {
      this.handlers[type] = handler
    } else {
      console.warn(`Handler for type "${type}" already exists.`)
    }
  }

  removeHandler(type) {
    delete this.handlers[type]
  }

  postMessage(type: string, payload: any) {
    const message = JSON.stringify({ type, payload })
    if (this.source === 'pc') {
      window.chrome.webview.postMessage(message)
    } else {
      window[type] && window[type].postMessage(JSON.stringify(payload))
    }
  }
}

main.ts中使用,并注入到全局

const  messageManager = new MessageManager()
 
// 发送消息
messageManager.postMessage('SEND', {})
// 接收消息
messageManager.addHandler('GET', function (data) {
    console.log('handler your data')
})

Logo

欢迎加入 MCP 技术社区!与志同道合者携手前行,一同解锁 MCP 技术的无限可能!

更多推荐