工具

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();});
});