ebiz-dify-ai/web/utils/message-channel.ts

'use client'

// 定义一个全局的 MessageChannel 用于 iframe 通信
let port: MessagePort | null = null

export function activeMessageChannel() {
  // 确保代码只在客户端运行
  if (typeof window === 'undefined') return

  // 检查是否在 iframe 中
  const isInIframe = window !== window.parent

  if (!isInIframe) {
    console.log('不在 iframe 中，无需激活消息通道')
    return
  }

  // console.log('在 iframe 中，准备接收消息通道')

  // 监听来自父窗口的消息
  window.addEventListener('message', function initHandler(event) {
    try {
      // console.log('接收到消息:', event.data)

      // 检查消息中是否包含 MessagePort
      if (event.ports && event.ports.length > 0) {
        // console.log('接收到包含 MessagePort 的消息')

        // 保存端口
        port = event.ports[0]

        // 设置端口消息处理函数
        port.onmessage = (/* msgEvent */) => {
          // console.log('通过 MessagePort 接收到消息:', msgEvent.data)
        }

        // 将 port 暴露到全局对象
        // 使用 any 类型避免 TypeScript 错误
        (window as any).port = port

        // 向父窗口发送确认消息
        window.parent.postMessage('port-received', '*')

        // 通过端口发送就绪消息
        port.postMessage({
          type: 'ready',
          message: 'iframe 已准备好通信',
        })

        // 初始化完成后移除这个事件监听器
        window.removeEventListener('message', initHandler)
      }
    }
    catch (error) {
      console.error('处理消息时出错:', error)
    }
  })

  // console.log('消息通道监听已激活，等待父窗口发送 MessagePort')
}