ue4云渲染WebSocket通信过程

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}`);
        }
    };
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值