ue4云渲染WebSocket通信过程

尤祖鹤
2023-12-01

WebSocket是HTML5一种新的协议,WebSocket是真正实现了全双工通信的服务器向客户端推的互联网技术 。
WebSocket协议是一种长连接,只需要通过一次请求来初始化链接,然后所有的请求和响应都是通过这个TCP链接进行通信。

客户端设置 app.js

    ws = new WebSocket(window.location.href.replace('http://', 'ws://').replace('https://', 'wss://'));

WebSocket()构造函数返回一个websocket对象,提供用于创建和管理与服务器的WebSocket连接的API 。
这个websocket对象将帮助我们建立与服务器的连接并创建双向数据流,即从两端发送和接收数据。

服务器设置 cirrus.js

// 创建服务器
var app = express();
var http = require('http').Server(app);
// 启动http服务 监听81端口
// httpport为config.js的配置项 81
http.listen(httpPort, function () {
	console.logColor(logging.Green, 'Http listening on *: ' + httpPort);
});
// WebSocket正在关注81端口(当81端口可用时会立即尝试建立连接)
// playerServer对象将监听事件 建立连接或握手完成或连接关闭等
let playerServer = new WebSocket.Server({ server: config.UseHTTPS ? https : http });

从服务器发送数据到客户端 cirrus.js —— app.js

// 添加一个connection在握手完成时发出的事件。成功建立连接后,可以向客户端发送消息
playerServer.on('connection', function (ws, req) {
	// 在事件“message”上接收来自客户端的消息
	ws.on('message', function onStreamerMessage(msg) {
		} catch (err) {
			console.error(`ERROR: ws.on message error: ${err.message}`);
		}
	});
	// 向客户端发送数据
	var clientConfig = { type: 'config', peerConnectionOptions: {} };
	let streamer = ws;
	streamer.send(JSON.stringify(clientConfig));
})

app.js接收

ws.onmessage = function (event) {
        console.log(`<- SS: ${event.data}`);
        let msg = JSON.parse(event.data);
        if (msg.type === 'config') {// 初始化 设置
            onConfig(msg);
        } else if (msg.type === 'playerCount') {// 玩家计数
            updateKickButton(msg.count - 1);
        } else if (msg.type === 'answer') {// 答案
            onWebRtcAnswer(msg);
        } else if (msg.type === 'iceCandidate') {// ICE候选人
            onWebRtcIce(msg.candidate);
        } else {
            console.log(`invalid SS message type: ${msg.type}`);
        }
    };
 类似资料: