当前位置：首页 > news >正文

webrtc学习笔记3

news 来源：原创 2024/9/21 0:27:17

Nodejs实战

对于我们WebRTC项目而言，nodejs主要是实现信令服务器的功能，客户端和服务器端的交互我们选择websocket作为通信协议，所以以websocket的使用为主。

web客户端 websocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
在这里插入图片描述
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

创建 WebSocket 对象

var Socket = new WebSocket(url, [protocol] );

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

WebSocket 属性

在这里插入图片描述

WebSocket 事件

在这里插入图片描述

WebSocket 方法

在这里插入图片描述

Nodejs服务器 websocket

如果出现一些module错误，大概率是npm和node的版本对不上，需要手动去下载，学习笔记2里面有网址

#创建package.json文件，系统会提示相关配置，也可以使用命令：
sudo npm init -y
sudo npm install nodejs-websocket

在这里插入图片描述

此时环境就配置好了，可以写nodejs的代码了

（1）如何创建websocket服务器，通过createServer和listen接口；
（2）如何判断有新的连接进来，createServer的回调函数判断；
（3）如何判断关闭事件，通过on("close", callback) 事件的回调函数；
（4）如何判断接收到数据，通过on("text", callkback)事件的回调函数；
（5）如何判断接收异常，通过on("error", callkback)事件的回调函数；
（6）如何主动发送数据，调用sendText

//server.js
var ws = require("nodejs-websocket")var server = ws.createServer(function (conn) {console.log("New connection")conn.on("text", function (str) { // 收到数据的响应console.log("Received "+str)conn.sendText(str.toUpperCase()+"!!!") // 发送})conn.on("close", function (code, reason) {console.log("Connection closed")})conn.on("error", function (err) { // 出错console.log("error:" + err);})
}).listen(8001)

npm install ws

const WebSocket = require('ws');// 创建 WebSocket 客户端
const ws = new WebSocket("ws://localhost:8001");// 连接成功时的回调函数
ws.on('open', function() {console.log("Connected to server");// 发送消息ws.send("hi");
});// 收到消息时的回调函数
ws.on('message', function(data) {console.log("Received from server: " + data);
});// 出错时的回调函数
ws.on('error', function(error) {console.log("WebSocket error: " + error);
});// 连接关闭时的回调函数
ws.on('close', function() {console.log("Connection closed");
});

在这里插入图片描述

websocket聊天室实战

框架分析
消息类型分为三种：

enter：新人进入（蓝色字体显示）
message：普通聊天信息（黑色字体显示）
leave：有人离开（红色字体显示）
服务器在收到某个客户端的消息（message+enter+leave），然后将其广播给所有的客户端（包括发送者）。

//webserver.js
var ws = require("nodejs-websocket");
var port = 8010;
var user = 0;// 创建一个连接
var server = ws.createServer(function (conn) {console.log("创建一个新的连接‐‐‐‐‐‐‐‐");user++;conn.nickname = "user" + user;conn.fd = "user" + user;var mes = {};mes.type = "enter";mes.data = conn.nickname + " 进来啦";broadcast(JSON.stringify(mes)); // 广播//向客户端推送消息conn.on("text", function (str) {console.log("回复 " + str);mes.type = "message";mes.data = conn.nickname + " 说: " + str;broadcast(JSON.stringify(mes));});//监听关闭连接操作conn.on("close", function (code, reason) {console.log("关闭连接");mes.type = "leave";mes.data = conn.nickname + " 离开了";broadcast(JSON.stringify(mes));});//错误处理conn.on("error", function (err) {console.log("监听到错误");console.log(err);});}).listen(port);function broadcast(str) {server.connections.forEach(function (connection) {connection.sendText(str);});
}

//webclient.html
<html><body><h1>Websocket简易聊天</h1><div id="app"><input id="sendMsg" type="text" /><button id="submitBtn">发送</button></div></body>
</html>
<script type="text/javascript">//在页面显示聊天内容function showMessage(str, type) {var div = document.createElement("div");div.innerHTML = str;if (type == "enter") {div.style.color = "blue";} else if (type == "leave") {div.style.color = "red";}document.body.appendChild(div);}//新建一个websocketvar websocket = new WebSocket("ws://192.168.150.129:8010");//打开websocket连接websocket.onopen = function () {console.log("已经连上服务器‐‐‐‐");document.getElementById("submitBtn").onclick = function () {var txt = document.getElementById("sendMsg").value;if (txt) {//向服务器发送数据websocket.send(txt);}};};//关闭连接websocket.onclose = function () {console.log("websocket close");};//接收服务器返回的数据websocket.onmessage = function (e) {var mes = JSON.parse(e.data); // json格式showMessage(mes.data, mes.type);};
</script>

在这里插入图片描述

信令服务器使用map管理房间

/** ----- ZeroRTCMap ----- */
var ZeroRTCMap = function () {this._entrys = new Array();this.put = function (key, value) {if (key == null || key == undefined) {return;}var index = this._getIndex(key);if (index == -1) {var entry = new Object();entry.key = key;entry.value = value;this._entrys[this._entrys.length] = entry;} else {this._entrys[index].value = value;}};this.get = function (key) {var index = this._getIndex(key);return (index != -1) ? this._entrys[index].value : null;};this.remove = function (key) {var index = this._getIndex(key);if (index != -1) {this._entrys.splice(index, 1);}};this.clear = function () {this._entrys.length = 0;};this.contains = function (key) {var index = this._getIndex(key);return (index != -1) ? true : false;};this.size = function () {return this._entrys.length;};this.getEntrys = function () {return this._entrys;};this._getIndex = function (key) {if (key == null || key == undefined) {return -1;}var _length = this._entrys.length;for (var i = 0; i < _length; i++) {var entry = this._entrys[i];if (entry == null || entry == undefined) {continue;}if (entry.key === key) {// equalreturn i;}}return -1;};
}