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}`);
}
};