Quasar CLI with Webpack - @quasar/app-webpack
BEX通信

允许Quasar App与BEX的各个部分进行通信至关重要。 Quasar使用bridge弥合了这一差距。

BEX中有4个区域需要通信层:

  1. Quasar App本身-适用于所有类型的BEX,例如弹出式视窗、选项页面、开发工具或网页
  2. 后台脚本
  3. 内容脚本
  4. BEX运行所在的网页

通信规则

了解Quasar中的通信桥有一个基本规则。

并非所有BEX类型都具有内容脚本-只有在网页上下文中运行的BEX才会具有内容脚本。这是浏览器扩展通常的工作方式。这意味着,如果您要在内容脚本上添加事件的侦听器,并尝试从作为开发工具、选项页面或弹出窗口运行的Quasar BEX触发该事件,则无法正常工作

如果要允许您的开发工具、弹出窗口或选项页面BEX与网页通信,则需要使用后台脚本作为代理。您可以通过以下方式做到这一点:

  1. 在后台脚本上添加一个侦听器,该侦听器又发出另一个事件。
  2. 将侦听器添加到在Web上下文中运行的Quasar App中,以侦听后台脚本引发的事件
  3. 从开发工具、弹出窗口或选项页面将事件发送到后台脚本。

一旦掌握了这一概念,BEX如何与每个部分进行通信就没有限制。

桥(Bridge)

桥(Bridge)是基于promise的事件系统,在BEX的所有部分之间共享,因此,您可以在Quasar App中监听事件,从其他部分发出事件,反之亦然。 这就是Quasar BEX模式的强大功能所在。

要从Quasar应用程序内访问桥,您可以使用$q.bex。 在其他区域,可以通过相应钩子文件中的bridge参数来使用该桥。

让我们看看它是如何工作的。

触发事件并等待响应

const { data } = await bridge.send('some.event', { someKey: 'aValue' })
console.log('Some response from the other side', data)

收听事件并发送回复

你可以响应,让调用者知道操作已经完成。你也可以选择返回一些数据。

bridge.on('some.event', ({ data, respond }) => {
  console.log('Event receieved, responding...')
  respond(data.someKey + ' hey!')
})

WARNING

如果你省略了respond(),那么.send()上的Promise将无法解决。

Quasar桥在幕后做了一些工作,将正常的基于事件的通信转换为Promise,因此,为了使Promise得以解决,我们需要调用respond

清理侦听器

bridge.off('some.event', this.someFunction)

TIP

由于浏览器扩展了60mb的数据传输限制,桥还做了一些工作来拆分大数据,这些大数据无法一次性传输。 为了做到这一点,有效载荷必须是一个数组。