postMessage 消息发送与确认发送成功

message.js

/**
 * @file 使用postMessage通讯
 */
/** ================= sender ======================= */

const senderTime = {}

/**
 * send 调用方会轮询发送postMessage信息
 * receive调用方会向 send 调用方发送确认信息使它停止轮询。
 * @param {window} target 消息发送目标
 * @param {string} eventType 消息发送类型
 * 
 * @eg 使用方法
 *  const openWindow = window.open('http://localhost:3000/')
    send(openWindow.window, "MSG_TOKEN", {
      token: "hey, here is the token value",
      otherMessage: 'hello',
    });
 */
export function send(target, eventType, message) {
  const senderWindow = target
  if (!senderWindow) {
    return
  }
  senderTime[eventType] = setInterval(() => {
    senderWindow.postMessage({
      type: eventType,
      message
    }, '*')
  }, 600);
  // 来自接收方的确认消息
  window.addEventListener('message', (e) => {
    console.log('add');
    const { data: { type, message } } = e
    if (type === `${eventType}_FROM_RECEIVE` && message === 'ACK') {
      if (senderTime[eventType]) {
        clearInterval(senderTime[eventType])
      }
      senderTime[eventType] = null
    }
  }, false)
}

/** ================= receiver ======================= */

/**
 * send方会轮询发送postMessage信息
 * receive调用方会向 send 调用方发送确认信息使它停止轮询。
 * @param {string} eventType 消息发送类型
 * @param {function} cb 消息获取成功回调
 * @eg 使用方法
 *  receive('MSG_TOKEN', (e) => {
      console.log(e)
    })
 */
export function receive(eventType, cb) {
  window.addEventListener('message', (e) => {
    const { data: { type } = {} } = e
    if (type === eventType) {
      cb(e)
      if (window.opener) {
        window.opener.postMessage({
          type: `${eventType}_FROM_RECEIVE`,
          message: 'ACK'
        }, '*')
      }
    }
  }, false)
}

post-message-sender-receiver.md

send 调用方会轮询发送postMessage信息。

receive 调用方会向 send 调用方发送确认信息使它停止轮询。