[UE4 C++入门到进阶]12.Websocket网络通信

前言:

Websocket是比较常用的网络通信协议之一,另一个比较常用的是Http协议.

Http采用的是一问一答的方式进行通信,必须由客户端主动向服务端发起请求,服务端再向客户端发送响应,而服务端无法主动向客户端发送数据.

Websocket采用的是长连接方式,也就是客户端一旦连入到服务器,在网络正常的情况下连接关系会一直存在.并且通信是双向的,服务端也可以主动向客户端发送数据.

一.应用场景

假设我们需要:

"在UI界面显示城市车流量数据,当服务器数据更新时要在UI界面刷新车流量信息"

那么分别Http和Websocket两种通信协议的实现思路可能如下:

Http:使用定时器定时向服务器发送请求,获取数据.存在的问题:不知道服务器什么时候更新数据,需要一直不间断地向服务器发请求,直到服务器更新之后才能获得数据,比较耗费性能并且数据更新会存在延迟.

Websocket:服务器数据更新时主动向客户端发送数据,无需客户端一直重复请求,节省性能,并且数据更新延迟小.

总结;

Websocket适合对数据实时性要求比较高,需要由数据驱动的应用场景.

Http适合主动请求数据,对实时性要求低的应用场景

ps:websocket与http并无优劣之分,仅仅是两种通信协议的应用场景不同,需要在不同的应用场景选择更适合的方式

二.UE中的Websocket简介

UE的Websocket都继承了IWebsocket这个接口,各自实现了下图的四个接口函数,分别用于

连接服务器(Connect),断开连接(Close),判断连接状态(IsConnected),发送数据(Send)

也实现了以下四个事件,用于将四个委托事件(Event)对象传递出去,用于绑定外部的回调函数,四个事件分别为:

连接成功回调(OnConnected),OnConnectionError(连接错误)

连接关闭(OnClosed),收到消息(OnMessage)

如下图中的FLwsWebsocket就是IWebsocket在PC端的实现类

三.客户端代码实现

1.导入WebSockets模块

2.创建一个C++ Actor类,本例命名为SampleWebsocketManager,在头文件添加以下代码

效果如下图,定义了四个委托

3.在.h文件中定义以下成员函数/变量

定义四个回调函数:连接成功,连接错误,收到消息,连接关闭

定义三个蓝图可调用函数:连接服务器,发送信息,断开连接

4.cpp文件中实现上面定义的成员函数

.h和.cpp中头文件如下图

5.创建一个SampleWebsocketManager的蓝图派生类重命名为BP_WebsocketManager,创建一个UserWidget命名为WBP_Websocket

添加以下逻辑

6.关卡蓝图添加以下逻辑

至此客户端逻辑完成.

四.服务器逻辑实现

使用Nodejs实现一个简易的服务器,不清楚的如何安装nodejs的可以看【UE4像素流送】1.局域网像素流送部署 里面有nodejs安装方法.

1.新建一个WSServer文件夹,添加一个文本文件改名为SampleWSServer.js,用vscode打开并添加以下代码

本段服务器代码能够接受客户端的连接,输出客户端传来的数据,并且会每隔3s向客户端发送一条数据

2.在WSServer路径下打开cmd

输入npm install ws 安装ws模块

3.vscode中按F5运行脚本,选择Node.js调试

控制台输出 Server Started 日志表示服务器已经启动

五.效果演示

https://www.bilibili.com/video/BV1WP411Q7e5/?vd_source=5228fd7b11b1815f61e41fc2cd59a3b7