Vue3与UE5的通信：三.vue向ue互相发送消息前言在前两篇博客中，我们已经介绍了如何在 Vue3 和 Unrea

前言

在前两篇博客中，我们已经介绍了如何在 Vue3 和 Unreal Engine 5 (UE5) 之间实现基础的通信机制。这篇博客将继续深入，聚焦于Vue3 向 UE5 发送消息的具体实现，帮助开发者在开发过程中实现更强大的交互和数据交换。

正文开始

在现代游戏开发中，前端与游戏引擎之间的通信是不可避免的。Vue3作为一个强大的前端框架，常用于开发游戏的管理后台、Web 控制面板或与游戏客户端交互的网页应用。而 UE5作为一个顶尖的游戏引擎，能够提供丰富的图形渲染和物理模拟功能。

在这种场景下，Vue3与UE5之间的消息通信是实现交互的核心需求。例如，你可能希望从Vue3的前端界面向UE5发送指令，控制游戏中的物体、事件或者状态。

页面与UE通信

第一步（添加和vue和ue的核心代码）

在Vue3的 index.html 中添加如下代码：

"object" != typeof ue || "object" != typeof ue.interface ? ("object" != typeof ue && (ue = {}), ue.interface = {},
ue.interface.broadcast = function(e, t) {
    if ("string" == typeof e) {
        var o = [e, ""];
        void 0 !== t && (o[1] = t);
        var n = encodeURIComponent(JSON.stringify(o));
        "object" == typeof history && "function" == typeof history.pushState ? (history.pushState({},
        "", "#" + n), history.pushState({},
        "", "#" + encodeURIComponent("[]"))) : (document.location.hash = n, document.location.hash = encodeURIComponent("[]"))
    }
}) : function(e) {
    ue.interface = {},
    ue.interface.broadcast = function(t, o) {
        "string" == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, ""))
    }
} (ue.interface),
(window.ue5 = ue.interface.broadcast);

第二步（前端发送消息到UE）

在你需要的页面写向UE发送数据的事件,这里我就还是在我的原项目中做测试

打开我的项目前端页面,这里我就拿我这个大标题写事件

对应的代码页面


const ueValue = ref('');
// 前端发送消息到ue
const sendUeMsg = () => {
  // 第一个参数为函数名，第二个参数为数据
  ue5("callbackTestCall", "hello 杨涛")
}

ue.interface.getUeTestCall = (res) => {
  ueValue.value = res.name
}