当前位置：首页 > news >正文

vue3与ue5通信-工具类

news 2025/7/25 21:51:12

工具

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消息');// 创建一个唯一的监听器IDconst 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 给 UE5
function sendTokenToUE5(token) {try {console.log('准备发送 token 给 UE5:', token);// 发送 tokenconst 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();});
});