vue3与ue5通信-工具类

工具

ue5-simple.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(‘这里是发送的内容-只能是字符串’, ‘发送的事件’);

import { send2Ue, receiveFromUe, isInUE5 } from \'@/utils/ue5-simple.js\'// 发送 token 给 UE5function 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(); });});