UE4像素流送（Pixel Streaming）快速上手指南

本指南基于UE4.26.2以及Node.js v17.1.0

最终实现目标：

1. UE4程序向浏览器发送一段文字，浏览器能接受并解析这段文字
2. 浏览器（Chrome）向UE4程序发送一段文字，UE4程序能接受并解析这段文字

可能涉及到的问题：

1. 什么是像素流送
2. 如何创建和使用一个像素流送项目
3. 如何使用UE4蓝图接受和发送数据到浏览器
4. 像素流的工作流程是怎样的

解决方案列表：

1. 中文直译，大概是把ue4程序运行中产生的每一帧画面，通过网络将画面传送给浏览器，浏览器接受并且能显示这些画面。不过不只是显示画面这么简单，你可以在浏览器中像操作正常的UE4程序一样使用这些画面，比如点击画面上的某个按钮之类的
2. 参考以下链接（此链接为UE4官方文档，照着一步步做，就可以得到一个能在手机上显示UE4程序的Demo）：https://docs.unrealengine.com/4.27/zh-CN/SharingAndReleasing/PixelStreaming/PixelStreamingOverview/
3. 如何使用UE4蓝图接受和发送数据到浏览器

3.1发送数据到浏览器

3.1.1发生Json到浏览器的方法：在蓝图中画下如下内容

3.1.2在打包路径中的app.js文件末尾加入如下图所示的代码：

app.js的文件路径：xxxxx\Engine\Source\Programs\PixelStreaming\WebServers\SignallingWebServer\scripts

function myHandleResponseFunction(data) {
	console.warn("收到回应Response received!");
	switch (data) {
		case "HelloWorld"://和你在UE4中通过SendPixelStreamingRespomse节点的Descriptor属性写的内容保持一致
			console.warn("HelloWorld");//在浏览器的控制台打印HelloWorld
		case "AnotherEvent":
			console.warn("其他");
	}
}

addResponseEventListener("handle_responses", myHandleResponseFunction);

3.1.3之后和官方案例的运行方式相同，在浏览器中点击F12->切换到控制台->按下键盘（不是小写键盘）的数字1，你便会在控制台中看到来自UE4的按键请求效果

3.2从浏览器中接收数据（当浏览器发送消息时，绑定的事件会从前到后依次执行一遍）

 4.像素流的工作流程