UE4开发HTML5遇到的问题

最近要做一个基于UE4的HTML5仿真项目，没真正做过HTML5的小白，表示很无所畏惧。

首先，找一篇UE4下H5的教程，简单学习一遍：

安装，环境，项目配置，（打包：不要pak；rendering：移动MSAA 选择NO MSAA；平台：HTML5，Packaging: 勾选Compress File during shipping package），最后下载一个X64的FireFox，或者Chrome。一个个搞下来，觉得已经七七八八了，信心满满。

二、拿个例子（“策略游戏”，又叫：StrategyGame）试验一下，StrategyGame本身不支持H5，不过难不倒我们，且如此来试试：

1、在支持的平台下拉框，勾选HTML5；

2、选择文件-->打包-->HTML5，选择一个目录，就开始等着吧，我这破机器，粗略估计花了20分钟；

3、在上一步选择的目录中，生成一个HTML5目录，进入该目录，找到HTML5LaunchHelper.exe，执行，启动了测试Web服务器，端口默认8000；

4、打开FireFox, 浏览器中输入：http://localhost:8000/StrategyGame.html。看到开始下载进度条，稍等几秒钟，就可以开始游戏啦。

三、用NodeJS的Express框架写了一个简易数据提供服务，执行：Node Sat.js。端口在：8081。链接地址：http://127.0.0.1:8081/A。

四、在UE4中，生成一个Actor，在Actor的BeginPlay()中，用Http模块去访问http://127.0.0.1:8081/A，并将结果AddOnScreenDebugMessage（）, Alt+P播放一下，正常显示。

这一切都还是挺正常、挺简单的，然鹅，问题还没开始。

五、当我打包成HTML5以后，再测试，哇塞，没结果。后面便开始了我的漫漫探索之路：

1、可能是UE4的HTML5不支持“HTTP”请求，这个从之前的经验知道，HTML网页是用ajax请求数据的，又一百度，果然后人在说Emscripten，一个用来实现C语言和JavaScript相互调用的家伙，于是一骨脑的学了过了一遍Emscripten，学完了，也会一些你调我，我调你了。

2、再找一篇JavaScript的快速入门学习一遍，几天下来，基本语法什么的，都弄得差不多了。

3、于是：就跑到Actor中去，写一个ajax请求吧，于是，便有了：

#ifdef EMSCRIPTEN
extern "C" {
   EM_JS(void, call_alert, (), {
       alert('hello world!');
       //throw 'all done';
   });

EM_JS(void, getsatcount, (), {
       $.ajax({
          url: "http://127.0.0.1:8081/a",
          data : {
           zipcode: 97201
          },
          success : function(result) {
           //$("#weather-temp").html("<strong>" + result + "</strong> degrees");
               console.log(result);
               //console.log('hello world!');
               //callback(result)
          },
          error : function(result) {
              console.log(result)
          }
       });
   })
}
#endif

void AHttpActor::BeginPlay()
{
Super::BeginPlay();

#ifdef EMSCRIPTEN
getsatcount();

#endif
}

4、打包HTML5，漫长的等待之后，结果出来了，还是挺好的。

接下来的问题是，如何把返回的结果回调啊，再度娘吧。。。就在漫无目的的求索中的时候，

突然发现，UE4中有HTML5的实现，有个文件叫：HTML5HTTP.cpp，啊，原来前面的猜测都是错误的吗？

于是，迫不及待的翻了翻UE4的源码：...\Epic Games\UE_4.23\Engine\Source\Runtime\Online\HTTP\Private\HTML5目录

翻完之后，便又有了这一段代码：

void AHttpActor::MyHttpCall()
{
#ifdef EMSCRIPTEN
TSharedRef<IHttpRequest> Request = TSharedRef<IHttpRequest>(FHTML5PlatformHttp::ConstructRequest());
#else
TSharedRef<IHttpRequest> Request = Http->CreateRequest();
#endif

Request->OnProcessRequestComplete().BindUObject(this, &AHttpActor::OnResponseReceived);
   //This is the url on which to process the request
   Request->SetURL("http://127.0.0.1:8081/a");
   Request->SetVerb(TEXT("GET"));
    Request->SetHeader(TEXT("User-Agent"), TEXT("X-UnrealEngine-Agent"));
   Request->SetHeader(TEXT("Content-Type"), TEXT("application/json;charset=utf8"));
   Request->ProcessRequest();

#ifdef EMSCRIPTEN

}

编译，打包成HTML5，浏览器又没出结果，伤心...哪儿错了...

这时，看到代码中有UE_Log(...)，就想，这Log到哪儿去了呢，找啊找，原来在浏览器的F12中，唉，绕了一大圈，最后才绕回到超级无敌的F12，在Log中发现了问题：

已拦截跨源请求：同源策略禁止读取位于 http://127.0.0.1:8081/a 的远程资源。

对这个错误又是一无所知，唉，又一番尝试，一番折腾，捣鼓一会客户端，捣鼓一会Nodejs，再捣鼓一会UE，直到看到了这篇文章，https://www.jianshu.com/p/604f6d5b47d2，比较清晰的阐明了CORS的原理，才知道，原来B网站（UE4.StrategyGame)，A网站（NodeJS），游戏页面（来自B网站）要访问A网站就存在跨域问题，要允许跨域，是要让A网站允许跨域，OK，明白之后，设置A网站的跨域就可以啦，如下：

//设置跨域访问
app.all('*', function(req, res, next) {
// 这里应该是来自UE4的网址：http://localhost:8000
   if( req.headers.origin.toLowerCase() == 'http://localhost:8000'
        || req.headers.origin.toLowerCase() == 'http://127.0.0.1:8000' ) {
        //设置允许跨域的域名，*代表允许任意域名跨域
        res.header("Access-Control-Allow-Origin", req.headers.origin);//
    }
   else
       res.header("Access-Control-Allow-Origin", 'http://10.0.20.36:8000');

res.header('Access-Control-Allow-Headers', "Content-Type");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");

   // if (req.method.toLowerCase() == 'options')
        // res.sendStatus(200); //让options尝试请求快速结束
    // else
   next();
});

最后：再介绍一下抓包工具：Fiddler, 很好用，下载后安装，即可使用，（通过使用代理，监听127.0.0.1:8888）,实现抓包。

UE4开发HTML5遇到的问题相关推荐

移动开发—HTML5 or Native？
2019独角兽企业重金招聘Python工程师标准>>> 移动开发-HTML5 or Native? HTML5,"Write once, run anywhere" ...
html5与跨平台开发,HTML5应用与跨平台应用开发
本课程将总体讲解开发HTML5应用和跨平台应用的方法,共分成三部分.第一部分为HTML5开发基础,带你分析并掌握多种移动开发技术和设计方式:第二部分为HTML5高级应用,讲解在HTML5中调用其它应用 ...
[HTML5]移动Web应用程序开发 HTML5篇 (四) 多媒体API
介绍本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具:HTML5,JavaScript, CSS3. 本篇是HTML5介绍的第三篇,主要介绍HTML5的Canvas API. ...
谷歌游览器插件html5,谷歌丢弃浏览器插件,全面开发html5
北京时间2月21日消息据国外媒体报道,谷歌Gears项目经理伊安·费特[Ian Fette]日前通过博客宣布,谷歌将放弃对Gears项目的支持,以便重点开发HTML5. 费特周五在Gears API ...
LayaAir引擎开发HTML5最简单教程(面向JS开发者)
LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...
《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.4 　真正的HTML5
本节书摘来异步社区<移动网页设计与开发 HTML5+CSS3+JavaScript>一书中的第1章,第1.4节,作者:[英]Peter Gasston,更多章节内容可以访问云栖社区&quo ...
html5开发桌面程序调用dll,使用Visual Studio开发Html5应用
Visual Studio 一直以来是开发微软旗下应用的利器,只要是开发微软相关的应用无论是Windows程序,WPF,Asp.Net,WinRT Surface,WindowsPhone 等微软旗下 ...
JAVA制作网页的软件有哪些,html5开发工具(开发html5网页的软件有哪些)
html5开发工具 1.SublimeText SublimeText是一个跨渠道的代码编bai辑器,一起支持duWindows.Linux.MacOSX等操作系统,也是HTML和散文zhi先进的文本 ...
JS开发HTML5游戏《神奇的六边形》（四）
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

UE4开发HTML5遇到的问题

UE4开发HTML5遇到的问题相关推荐

最新文章

热门文章