vue3与ue5通信-工具类

工具

ue5-simple.js

js 复制代码

/**
 * UE5 通信工具
 * 两个核心方法：发送消息和接收消息
 */

// 确保全局对象存在
if (typeof window !== 'undefined') {
  window.ue = window.ue || {};
  window.ue.interface = window.ue.interface || {};
}

/**
 * 生成 UUID
 */
function generateUUID() {
  return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, function (t) {
    return (t ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (t / 4)))).toString(16);
  });
}

/**
 * 方法1：发送字符串给 UE5
 * @param {string} message - 要发送的字符串消息
 * @param {string} eventName - 事件名称（可选，默认为 'web_message'）
 */
export function send2Ue(message, eventName = 'web_message') {
  try {
    console.log('发送消息给UE5:', message);
    
    // 检查是否在 UE5 环境中
    if (typeof window !== 'undefined' && 
        typeof window.ue === 'object' && 
        typeof window.ue.interface === 'object' && 
        typeof window.ue.interface.broadcast === 'function') {
      
      // 直接使用 UE5 的 broadcast 接口
      window.ue.interface.broadcast(eventName, message, '');
      return true;
      
    } 
    return false
    
    
  } catch (error) {
    console.error('发送消息给UE5失败:', error);
    return false;
  }
}

/**
 * 方法2：接收 UE5 发送的消息
 * @param {Function} callback - 接收到消息时的回调函数
 * @returns {Function} 取消监听的函数
 */
export function receiveFromUe(callback) {
  if (typeof callback !== 'function') {
    console.error('receiveFromUe: callback 必须是一个函数');
    return () => {};
  }

  console.log('开始监听UE5消息');

  // 创建一个唯一的监听器ID
  const listenerId = generateUUID();
  
  // 将回调函数注册到全局对象
  if (typeof window !== 'undefined') {
    window.ue.interface = window.ue.interface || {};
    window.ue.interface[listenerId] = callback;
  }

  // 监听 URL hash 变化（兼容模式）
  const hashChangeHandler = (event) => {
    try {
      const hash = window.location.hash.substring(1);
      if (hash) {
        const decodedHash = decodeURIComponent(hash);
        const data = JSON.parse(decodedHash);
        
        // 如果是来自UE5的消息
        if (Array.isArray(data) && data.length >= 2) {
          const [eventName, message] = data;
          callback({
            eventName,
            message,
            timestamp: Date.now()
          });
        }
      }
    } catch (error) {
      // 忽略解析错误，可能不是UE5的消息
    }
  };

  // 添加事件监听器
  if (typeof window !== 'undefined') {
    window.addEventListener('hashchange', hashChangeHandler);
  }

  // 返回取消监听的函数
  return function unsubscribe() {
    console.log('停止监听UE5消息');
    
    // 移除全局回调
    if (typeof window !== 'undefined' && window.ue.interface) {
      delete window.ue.interface[listenerId];
    }
    
    // 移除事件监听器
    if (typeof window !== 'undefined') {
      window.removeEventListener('hashchange', hashChangeHandler);
    }
  };
}

/**
 * 检查是否在 UE5 环境中
 * @returns {boolean}
 */
export function isInUE5() {
  return typeof window !== 'undefined' && 
         typeof window.ue === 'object' && 
         typeof window.ue.interface === 'object' && 
         typeof window.ue.interface.broadcast === 'function';
}

// 默认导出
export default {
  send2Ue,
  receiveFromUe,
  isInUE5
};

使用

send2Ue('这里是发送的内容-只能是字符串', '发送的事件');

js 复制代码

import { send2Ue, receiveFromUe, isInUE5 } from '@/utils/ue5-simple.js'

// 发送 token 给 UE5
function sendTokenToUE5(token) {
  try {
    console.log('准备发送 token 给 UE5:', token);

    // 发送 token
    const success = send2Ue(token, 'user_login_token');

    if (!success) {
      proxy.$modal.msgError('连接 UE5 失败');
    }
  } catch (error) {
    proxy.$modal.msgError('发送 token 给 UE5 时出错:');
  }
}


// 检查 UE5 环境
onMounted(() => {
  isInUE5();

  // 开始监听来自 UE5 的消息
  const unsubscribe = receiveFromUe((data) => {
    console.log('收到来自UE5的消息:', data);
    
    
  });

  // 组件卸载时清理监听器
  onUnmounted(() => {
    unsubscribe();
  });
});