前言:

Websocket是比較常用的網(wǎng)絡(luò)通信協(xié)議之一,另一個比較常用的是Http協(xié)議.

Http采用的是一問一答的方式進(jìn)行通信,必須由客戶端主動向服務(wù)端發(fā)起請求,服務(wù)端再向客戶端發(fā)送響應(yīng),而服務(wù)端無法主動向客戶端發(fā)送數(shù)據(jù).

Websocket采用的是長連接方式,也就是客戶端一旦連入到服務(wù)器,在網(wǎng)絡(luò)正常的情況下連接關(guān)系會一直存在.并且通信是雙向的,服務(wù)端也可以主動向客戶端發(fā)送數(shù)據(jù).

一.應(yīng)用場景

假設(shè)我們需要:

"在UI界面顯示城市車流量數(shù)據(jù),當(dāng)服務(wù)器數(shù)據(jù)更新時要在UI界面刷新車流量信息"

那么分別Http和Websocket兩種通信協(xié)議的實(shí)現(xiàn)思路可能如下:

Http:使用定時器定時向服務(wù)器發(fā)送請求,獲取數(shù)據(jù).存在的問題:不知道服務(wù)器什么時候更新數(shù)據(jù),需要一直不間斷地向服務(wù)器發(fā)請求,直到服務(wù)器更新之后才能獲得數(shù)據(jù),比較耗費(fèi)性能并且數(shù)據(jù)更新會存在延遲.

Websocket:服務(wù)器數(shù)據(jù)更新時主動向客戶端發(fā)送數(shù)據(jù),無需客戶端一直重復(fù)請求,節(jié)省性能,并且數(shù)據(jù)更新延遲小.

總結(jié);

Websocket適合對數(shù)據(jù)實(shí)時性要求比較高,需要由數(shù)據(jù)驅(qū)動的應(yīng)用場景.

Http適合主動請求數(shù)據(jù),對實(shí)時性要求低的應(yīng)用場景

ps:websocket與http并無優(yōu)劣之分,僅僅是兩種通信協(xié)議的應(yīng)用場景不同,需要在不同的應(yīng)用場景選擇更適合的方式

二.UE中的Websocket簡介

UE的Websocket都繼承了IWebsocket這個接口,各自實(shí)現(xiàn)了下圖的四個接口函數(shù),分別用于

連接服務(wù)器(Connect),斷開連接(Close),判斷連接狀態(tài)(IsConnected),發(fā)送數(shù)據(jù)(Send)

也實(shí)現(xiàn)了以下四個事件,用于將四個委托事件(Event)對象傳遞出去,用于綁定外部的回調(diào)函數(shù),四個事件分別為:

連接成功回調(diào)(OnConnected),OnConnectionError(連接錯誤)

連接關(guān)閉(OnClosed),收到消息(OnMessage)

如下圖中的FLwsWebsocket就是IWebsocket在PC端的實(shí)現(xiàn)類

三.客戶端代碼實(shí)現(xiàn)

1.導(dǎo)入WebSockets模塊

2.創(chuàng)建一個C++ Actor類,本例命名為SampleWebsocketManager,在頭文件添加以下代碼

效果如下圖,定義了四個委托

3.在.h文件中定義以下成員函數(shù)/變量

定義四個回調(diào)函數(shù):連接成功,連接錯誤,收到消息,連接關(guān)閉

定義三個藍(lán)圖可調(diào)用函數(shù):連接服務(wù)器,發(fā)送信息,斷開連接

4.cpp文件中實(shí)現(xiàn)上面定義的成員函數(shù)

.h和.cpp中頭文件如下圖

5.創(chuàng)建一個SampleWebsocketManager的藍(lán)圖派生類重命名為BP_WebsocketManager,創(chuàng)建一個UserWidget命名為WBP_Websocket

添加以下邏輯

6.關(guān)卡藍(lán)圖添加以下邏輯

至此客戶端邏輯完成.

四.服務(wù)器邏輯實(shí)現(xiàn)

使用Nodejs實(shí)現(xiàn)一個簡易的服務(wù)器,不清楚的如何安裝nodejs的可以看【UE4像素流送】1.局域網(wǎng)像素流送部署?里面有nodejs安裝方法.

1.新建一個WSServer文件夾,添加一個文本文件改名為SampleWSServer.js,用vscode打開并添加以下代碼

本段服務(wù)器代碼能夠接受客戶端的連接,輸出客戶端傳來的數(shù)據(jù),并且會每隔3s向客戶端發(fā)送一條數(shù)據(jù)

2.在WSServer路徑下打開cmd

輸入npm install ws 安裝ws模塊

3.vscode中按F5運(yùn)行腳本,選擇Node.js調(diào)試

控制臺輸出 Server Started 日志表示服務(wù)器已經(jīng)啟動

五.效果演示

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