lh_firm_former/src/utils/bridge.js

/**
 * 跨窗口消息传递
 * @module $ui/utils/bridge
 */
import Messager from './messager'
import Utils from '@/utils/util'

/**
 * 向目标发送信息
 * @param {object} options 参数对象
 * @param {string} options.bridge 目标的桥页面url地址
 * @param {string} options.channel 消息频道名称
 * @param {*} [options.data] 消息内容
 * @param {string} [options.origin] 自身的桥地址，目标可以通过桥联系到自己
 */
export function fire({ bridge, channel, data, origin }) {
  return new Messager({
    bridge: bridge,
    origin: origin,
    ready(instance) {
      instance.fire(channel, data)
      setTimeout(() => {
        instance.destroy()
      }, 0)
    }
  })
}

/**
 * 接收目标发送过来的信息
 * @param channel 消息频道名称
 * @param handler 消息处理函数
 * @param opts Messager参数
 * @return {Messager}
 */
export function on(channel, handler, opts = {}) {
  const instance = new Messager(opts)
  instance.on(channel, handler)
  return instance
}

/**
 * 接收目标发送过来的信息, 只接收一次
 * @param channel 消息频道名称
 * @param handler 消息处理函数
 * @return {Messager}
 */
export function once(channel, handler) {
  const instance = on(channel, (data) => {
    handler(data)
    instance.destroy()
  })
  return instance
}

/**
 * 调用消息服务
 * @param {string} name 服务名称
 * @param {string} bridge 服务提供方的桥页面地址
 * @param {*} data 发送的数据
 * @param {string} origin 自己的桥页面地址
 * @param {function} callback 回调函数，服务提供方响应的数据通过回调返回
 *
 * @example
 *
 *   // 请求服务
 service({
        name: 'MyService',
        bridge: 'http://localhost:8001/app1/assets/bridge/index.html',
        origin: 'http://localhost:8000/assets/bridge/index.html',
        data: {
          id: '123'
        },
        callback(res) {
          console.log('服务响应信息', res)
        }
      })
 */
export function service({ name, bridge, data, origin, callback }) {
  const _uid = Utils.guid()
  const postMessage = {
    uid: _uid,
    data: data
  }
  // 如果有回调，以uid为事件名称的通道接收回调数据
  if (callback) {
    const callbackId = name + _uid
    once(callbackId, message => {
      // uid匹配才触发回调
      if (message.uid === _uid) {
        callback(message.data)
      }
    })
  }

  fire({ bridge, data: postMessage, origin, channel: name })
}

/**
 * 创建服务提供者
 * @param {string} name 服务名称
 * @param {string} origin 自己的桥页面地址
 * @param {function} handler 服务消息句柄函数，当服务被调用时触发，参数：data（调用服务传过来的数据），callback响应函数，通过回调响应给调用者
 * @return {Messager}
 *
 * @example
 *
 *  // 创建一个服务提供者
 *  const messager = provider({
        name: 'MyService',
        origin: 'http://localhost:8000/assets/bridge/index.html',
        handler: function (data, callback) {
          const response = '响应内容'
          callback(response)
        }
      })
 // 销毁
 messager.destroy()
 */
export function provider({ name, origin, handler }) {
  return on(name, (message, bridge) => {
    const callbackId = name + message.uid
    const callback = (data) => {
      fire({
        bridge,
        data: { uid: message.uid, data: data },
        origin,
        channel: callbackId
      })
    }

    handler(message.data, callback)
  })
}