Message Sender

用于支持多个iframe的通信方案

Install

npm install --save message-sender

释义

• 通信对象
  • T - 顶层消息窗口，唯一
  • A - 应用消息窗口，多个

Usage

T, A都需要进行挂载，T的挂载时肯定比A快的，T、A的挂载请置于程序入口处。

• 第一步：设置T的挂载

import messageSender from 'message-sender'

// T, T的id默认CORE_APP
messageSender.mount({
  debug: true,
  listen: {
    answer(result) {
      console.log(result.data)

      return 'Yes, I am Core App!'
    },
  }
})

// 和listen相同，用于异步处理，同一个事件只能注册一次
messageSender.on('answer2', () => {
  console.log(result.data)

  return 'Yes, I am Core App! This is answer2'
})

• 第二步: 设置A的挂载

import messageSender from 'message-sender'

messageSender.mount({
  debug: true,
  id: 'app.a',
  // 依赖注入
  inject: {
    vueStore: { log() { console.log('test...') } },
  },
  listen: {
    answer(result) {
      console.log(result.data)

      return 'Get out here!'
    },
  }
})

messageSender.vueStore.log() // 结果为"test..."

常规通信方式

1、顶层 <-> 应用（消息窗口与顶层窗口相互通信）

T -> A, T给A发送消息，A应答并消息结果返回给T
A -> T, A给T发送消息，T应答并消息结果返回给A

• T的代码
  T发送数据的时候会检查应用是否被挂载，未被挂载则重试。

import messageSender from 'message-sender'

messageSender.mount({
  debug: true,
  retrySendMaxTimes: 2, // 最大重试次数
  retrySendInterval: 5001, // 每次重试间隔
  listen: {
    orderKFC(result) {
      console.log(result.data)

      return '好的，一份原神异世寻味礼，您稍等~'
    },
  }
})

// 超过重试次数，则会进入catch流程，不再重试
messageSender.send('app.a', 'answer', 'Hello a, I am Core App!').then(result => {
  console.log(result.data)
})

• A的代码

import messageSender from 'message-sender'

// 这里可以看到A的代码是10秒后延迟挂载的
setTimeout(() => {
  messageSender.mount({
    debug: true,
    id: 'app.a',
    listen: {
      answer(result) {
        console.log(result.data)

        return 'Hi， I am a'
      },
    }
  })

  messageSender.sendTop('orderKFC', '异世相遇，尽享美味').then(result => {
    console.log(result.data) // 结果为“好的，一份原神异世寻味礼，您稍等~”
  })
}, 10000)

2、应用 <-> 应用（消息窗口与消息窗口的通信）

• A的代码 - app.b

import messageSender from 'message-sender'

messageSender.mount({
  debug: true,
  id: 'app.b'
})

messageSender.send('app.c', 'answer', 'Hello，c!， I am b').then(result => {
  console.log(result.data) // 响应结果为“欢迎收听中文广播电台17301”
})

• A的代码 - app.c

messageSender.mount({
  debug: true,
  id: 'app.c',
  listen: {
    answer(result) {
      console.log(result.data) // 响应结果为“Hello，c!， I am b”

      return '欢迎收听中文广播电台17301'
    },
  }
})

3、顶层/应用 <-> 多个应用 （广播，支持消息窗口进行广播）

broadcast方法支持SendOption设置

• T/A的代码

import messageSender from 'message-sender'

// 只能广播给已挂载的窗口
messageSender.broadcast('_(:з」∠)_， 我是广播君！！！！！').then((result) => {
  console.log(result.data) // 结果为 {app.b: {…}, app.c: {…}}， 所有窗口的返回消息，key为id
})

// 广播对应的行为
messageSender.broadcast('_(:з」∠)_， 我是广播君！！！！！', 'answer').then((result) => {
  console.log(result.data) // 结果为 {app.b: {…}, app.c: {…}}， 所有窗口的返回消息，key为id
})

• A的代码 - app.c

import messageSender from 'message-sender'

messageSender.mount({
  debug: true,
  id: 'app.c',
  listen: {
    // msEventBroadcast是messageSender默认广播接收方法
    msEventBroadcast(result) {
      console.log('common: ', result)

      return '感谢您的广播来电，请问需要咨询什么情感问题？'
    },
  }
})

订阅与发布

通信事件有且只能注册一个，这里通过订阅发布来处理窗口消息发布，以及响应窗口的，该模式是建立在通信广播的逻辑上。

• A的代码 - app.b

// 订阅app.c的消息
const appCSubscribe = messageSender.subscribe('app.c')

// 订阅行为
appCSubscribe.on('fileChange', result => {
  console.log(result)
})

// 和on方法不同，可以多次订阅相同行为
appCSubscribe.on('fileChange', result => {
  console.log(result)
})

• A的代码 - app.c

// 推送app.c的消息
messageSender.publish('fileChange', { filePath: '/xxxxx/xxxxx/xxxx/happy.avi' })