UE4 WebUI使用指南2-通信


前面一篇WebUI的文章讲述的WebUI插件的下载，开启，在UE中创建，加载网页等。
本文继续讲述通过WebUI，UE和网页实现双向通信的实现思路。

一点说明

由于WebUI 使用的浏览器内核并不是最新的浏览器内核，所以一些新的JS语法和新的CSS并不支持。 比如不支持解构语法等。

所以在制作页面的时候需要注意这些问题点。

调试

如果遇到问题，需要调试，在WebUI加载网页之后，点击网页上任意元素，然后按下shift+ctrl+i 可以调出网页控制台，进行错误查看。

引入通信JS代码

要实现UE和页面的通信，首先需要在页面中引入一段js代码，如下所示：

"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.ue4=ue.interface.broadcast);window.ue=ue;

该js代码片段为WebUI官方推荐。

网页向UE发送消息

网页向UE发消息比较如意，通过ue4函数，既可向UE发送消息，ue4函数支持两个参数，name和data，name是string格式，data是json格式，如下所示：

ue4("cmd",{value:123})

UE接受消息

UE接受消息，通过蓝图即可监听webui的消息即可，如下图（蓝图）所示：

UE4 WebUI使用指南2-通信_浏览器内核


其中name和Data是网页传递过来的参数，Callback此处不详述，一般用不上。

网页接受UE消息

网页除了可以给UE发送消息外，还可以接受来自UE的消息。 只需要在ue.interface对象上面，添加一个回调函数，即可接受消息，如下所示：

ue.interface.add = function (data) {

  const { initValue } = JSON.parse(data);
  // todo
};

UE发送消息给网页

UE想网页发送消息的蓝图如下所示，调用webUI的Call方法，Function传递函数名称，Data 传递函数的参数
：

UE4 WebUI使用指南2-通信_浏览器内核_02

总结

本文提供了UE和网页的双向通信的方式的思路，具体细节需要大家自己多上手尝试。

太阳虽好，总要诸君亲自去晒，旁人却替你晒不来。

最后，关注公号“ITMan彪叔”


 ITman彪叔