前面一篇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的消息即可，如下图（蓝图）所示：
其中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 传递函数的参数
：
总结
本文提供了UE和网页的双向通信的方式的思路，具体细节需要大家自己多上手尝试。
太阳虽好，总要诸君亲自去晒，旁人却替你晒不来。
最后，关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
