一对一WebRTC视频通话系列(二)——websocket和join信令实现

本系列博客主要记录WebRtc实现过程中的一些重点,代码全部进行了注释,便于理解WebRTC整体实现。


一对一WebRTC视频通话系列往期博客:

一对一WebRTC视频通话系列(一)—— 创建页面并显示摄像头画面


websocket和join信令实现

    • 一、websocket实现
      • 1.1客户端
      • 1.2服务端
    • 二、join信令实现
      • 2.1 客户端
      • 2.2 服务端

一、websocket实现

1.1客户端

main.js文件中,定义了一个名为ZeroRTCEngine的类,该类使用WebSocket进行通信。ZeroRTCEngine类的实例化过程如下:

  1. 首先,声明并定义一个名为zeroRTCEngine的类,接受一个wsUrl参数。
  2. 在ZeroRTCEngine类中,定义一个init方法,用于初始化WebSocket地址。
  3. 定义ZeroRTCEngine类的方法createWebsocket,用于创建WebSocket对象。
  4. createWebsocket方法中,定义多种WebSocket事件处理函数.
  5. 定义onopenonmessageoncloseonerror方法,用于处理WebSocket连接状态和接收到的消息。

在实际使用中,通过调用ZeroRTCEngine类的createWebsocket方法来创建一个WebSocket实例,并监听各种事件(如打开、消息传递、关闭和错误)。

	//定义 ZeroRTCEngine 的 init 方法//参数 wsUrl:WebSocket 的地址ZeroRTCEngine.prototype.init = function(wsUrl) {//设置 WebSocket urlthis.wsUrl = wsUrl;this.signaling =null;}//定义 ZeroRTCEngine 的 createWebsocket 方法ZeroRTCEngine.prototype.createWebsocket = function() {//创建 WebSocket 对象zeroRTCEngine = this;zeroRTCEngine.signaling = new WebSocket(this.wsUrl);//设置打开函数zeroRTCEngine.signaling.onopen = function () {zeroRTCEngine.onopen();}//设置关闭函数zeroRTCEngine.signaling.onclose = function (event) {zeroRTCEngine.onclose(event);}//设置错误函数zeroRTCEngine.signaling.onerror = function (event) {zeroRTCEngine.onerror(event);}//设置消息传递函数zeroRTCEngine.signaling.onmessage = function (event) {zeroRTCEngine.onmessage(event);}}ZeroRTCEngine.prototype.onopen = function() {console.log("WebSocket connection established.");}ZeroRTCEngine.prototype.onmessage = function(event) {console.log("Received message:" + event.data);//解析收到的消息var message = JSON.parse(event.data);}ZeroRTCEngine.prototype.onclose = function(event) {console.log("WebSocket connection closed." + event.data + ", reason" + EventCounts.reason);}ZeroRTCEngine.prototype.onerror = function(event) {console.log("WebSocket connection error:" + event.data);  }zeroRTCEngine = new ZeroRTCEngine("ws://192.168.3.181:8099");zeroRTCEngine.createWebsocket();

1.2服务端

创建一个名为signal_server.jsjs新文件,搭建简单的WebSocket服务器,用于处理客户端连接、消息发送和接收、连接关闭等基本操作。在实际应用中,可能需要根据需求对代码进行修改和扩展。

  1. 使用ws.createServer()方法创建一个WebSocket服务器。这个方法接受一个回调函数作为参数,该回调函数在客户端连接到服务器时被调用。
  2. 在回调函数中,使用console.log()输出一条connection established的消息,表示连接已建立。然后,向客户端发送一条消息,例如"我收到你的连接了"。
  3. 使用conn.on("text", function (str) {...})监听客户端发送的消息。
    当客户端发送消息时,会触发这个回调函数。使用console.info()输出一条消息,表示收到的消息。
  4. 在连接关闭时,使用conn.on("close", function (code, reason) {...})监听连接关闭。
    当客户端关闭连接时,会触发这个回调函数。使用console.log()输出一条消息,表示连接已关闭。
  5. 使用了conn.on("error", function (err) {...})来监听连接错误。当发生错误时,会触发这个回调函数,输出错误信息。
  6. 使用server.listen()方法将服务器绑定到一个指定的端口。在实际应用中,通常需要根据不同的需求来修改这个端口。
	// 引入ws模块var ws = require("nodejs-websocket");// 定义端口号var port =8099;// 创建一个WebSocket服务器var server = ws.createServer(function (conn) {// 连接建立时的输出console.log("New connection");// 向客户端发送消息conn.sendText("我收到你的连接了")// 监听客户端发送的消息conn.on("text", function (str) {console.info("Received msg:"+str);});// 连接关闭时的输出conn.on("close", function (code, reason) {console.log("Connection closed,code:" + code + " reason:" + reason);});// 监听连接错误conn.on("error", function (error) {console.error("发生错误:", error);})}).listen(port);

在ubuntu中使用下列指令开启服务端:

	node signal_server.js

在这之前切记先用以下两行命令初始化:

	sudo npm init -ysudo npm install nodejs-websocket

在这里插入图片描述
在这里插入图片描述

二、join信令实现

2.1 客户端

修改按钮点击事件

document.getElementById('joinBtn').onclick = function () {roomId = document.getElementById('roomId').value;if(roomId == '' || roomId == "Please enter the room ID"){alert('Please enter the room ID');return;}console.log("joinBtn clicked,roomId: " + roomId);//初始化本地码流initLocalStream();
}

首先创建一个JSON对象,包含命令(cmd)、房间ID(roomId)和用户ID(uid),然后将这个JSON对象转换为字符串。接着,调用zeroRTCEngine.sendMessage方法将这个字符串发送给服务器,表示用户要加入房间。最后,在控制台输出一条消息,表明用户已经成功加入房间。

// join 主动加入房间
// leave 主动离开房间
// new-peer 有人加入房间,通知已经在房间的人
// peer-leave 有人离开房间,通知已经在房间的人
// offer 发送offer给对端peer
// answer发送offer给对端peer
// candidate 发送candidate给对端peer
const SIGNAL_TYPE_JOIN = "join";
const SIGNAL_TYPE_RESP_JOIN = "resp-join";  // 告知加入者对方是谁
const SIGNAL_TYPE_LEAVE = "leave";
const SIGNAL_TYPE_NEW_PEER = "new-peer";
const SIGNAL_TYPE_PEER_LEAVE = "peer-leave";
const SIGNAL_TYPE_OFFER = "offer";
const SIGNAL_TYPE_ANSWER = "answer";
const SIGNAL_TYPE_CANDIDATE = "candidate";var localUserId = Math.random().toString(36).substr(2);//本地ID   
var remoteUserId = -1; //对方用户ID
var roomId = -1; //房间IDZeroRTCEngine.prototype.sendMessage = function(message) {this.signaling.send(message);
}function doJoin(roomId) {var jsonMsg = {'cmd': 'join','roomId': roomId,'uid': localUserId,}; var message = JSON.stringify(jsonMsg); //将json对象转换为字符串zeroRTCEngine.sendMessage(message);   //设计方法:用实现方法而不是直接用变量    console.info("doJoin message: " + message);
}

运行效果:
在这里插入图片描述

2.2 服务端

修改signal_server.js
1.添加相关宏定义,以及WebRTC所需要用到的Map类。

// join 主动加入房间
// leave 主动离开房间
// new-peer 有人加入房间,通知已经在房间的人
// peer-leave 有人离开房间,通知已经在房间的人
// offer 发送offer给对端peer
// answer发送offer给对端peer
// candidate 发送candidate给对端peer
const SIGNAL_TYPE_JOIN = "join";
const SIGNAL_TYPE_RESP_JOIN = "resp-join";  // 告知加入者对方是谁
const SIGNAL_TYPE_LEAVE = "leave";
const SIGNAL_TYPE_NEW_PEER = "new-peer";
const SIGNAL_TYPE_PEER_LEAVE = "peer-leave";
const SIGNAL_TYPE_OFFER = "offer";
const SIGNAL_TYPE_ANSWER = "answer";
const SIGNAL_TYPE_CANDIDATE = "candidate";/** ----- 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;};
}

2.定义Client函数,用于初始化用户信息

function Client(uid, conn, roomId) {this.uid = uid;     // 用户所属的idthis.conn = conn;   // uid对应的websocket连接this.roomId = roomId;
}

3.处理加入房间请求
监听客户端发送的消息,如果时加入房间的,利用handleJoin()函数进行处理

// 监听客户端发送的消息conn.on("text", function (str) {console.info("Received msg:"+str);var jsonMsg = JSON.parse(str);switch(jsonMsg.cmd){case SIGNAL_TYPE_JOIN:handleJoin(jsonMsg, conn); break;}});

定义handleJoin()函数,处理加入房间请求。它首先获取房间ID用户ID,然后获取房间Map。如果房间不存在,则创建一个新的房间。如果房间已满,给出提示并拒绝加入请求。如果房间未满,创建一个新的客户端并将其添加到房间。如果房间中用户数大于1,则通知房间中的其他用户有新人加入。

实现原理:
1.从传入的messageconn参数中获取房间ID用户ID
2.尝试获取roomId对应的房间Map。如果房间Map不存在,则创建一个新的房间Map。
3.检查房间是否已满。如果已满,给出提示并返回;否则,创建一个新的客户端并将其添加到房间。
4.如果房间中用户数大于1,则遍历房间中的所有用户,通知他们有新人加入。同时,通知自己房间中有新人加入。

function handleJoin(message, conn){// 获取房间ID和用户IDvar roomId = message.roomId;var uid = message.uid;console.log(" uid:"+uid + "try to join room: "+roomId);// 获取房间Mapvar roomMap = roomTableMap.get(roomId);// 如果房间不存在,则创建一个新的房间if(roomMap == null){roomMap = new ZeroRTCMap();roomTableMap.put(roomId, roomMap);}// 如果房间已满,给出提示if(roomMap.size() >= 1){console.error("roomId:" + roomId + " is full");conn.sendText('roomId:' + roomId + ' is full');return;}// 创建一个新的客户端var client = new Client(uid, conn, roomId);// 将用户添加到房间roomMap.put(uid, client);// 如果房间中的用户数大于1,则通知房间中的其他用户if(roomMap.size() > 1){// 获取房间中的所有用户var clients = roomMap.getEntrys();for(var i in clients){var remoteUid = clients[i].key;if(remoteUid != uid){// 通知已经在房间的人,有新人加入var jsonMsg = {'cmd':SIGNAL_TYPE_NEW_PEER,'remoteUid':uid};var msg = JSON.stringify(jsonMsg);// 通知自己,房间里有的人jsonMsg = {'cmd':SIGNAL_TYPE_RESP_JOIN,'remoteUid':remoteUid};msg = JSON.stringify(jsonMsg);console.info("resp-join"+msg);conn.sendText(msg);}}}
}

整体代码:

// 引入ws模块
var ws = require("nodejs-websocket");
// 定义端口号
var port =8099;// join 主动加入房间
// leave 主动离开房间
// new-peer 有人加入房间,通知已经在房间的人
// peer-leave 有人离开房间,通知已经在房间的人
// offer 发送offer给对端peer
// answer发送offer给对端peer
// candidate 发送candidate给对端peer
const SIGNAL_TYPE_JOIN = "join";
const SIGNAL_TYPE_RESP_JOIN = "resp-join";  // 告知加入者对方是谁
const SIGNAL_TYPE_LEAVE = "leave";
const SIGNAL_TYPE_NEW_PEER = "new-peer";
const SIGNAL_TYPE_PEER_LEAVE = "peer-leave";
const SIGNAL_TYPE_OFFER = "offer";
const SIGNAL_TYPE_ANSWER = "answer";
const SIGNAL_TYPE_CANDIDATE = "candidate";/** ----- 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;};
}var roomTableMap = new ZeroRTCMap();function Client(uid, conn, roomId) {this.uid = uid;     // 用户所属的idthis.conn = conn;   // uid对应的websocket连接this.roomId = roomId;
}// 处理加入房间请求
function handleJoin(message, conn){// 获取房间ID和用户IDvar roomId = message.roomId;var uid = message.uid;console.log(" uid:"+uid + "try to join room: "+roomId);// 获取房间Mapvar roomMap = roomTableMap.get(roomId);// 如果房间不存在,则创建一个新的房间if(roomMap == null){roomMap = new ZeroRTCMap();roomTableMap.put(roomId, roomMap);}// 如果房间已满,给出提示if(roomMap.size() >= 1){console.error("roomId:" + roomId + " is full");conn.sendText('roomId:' + roomId + ' is full');return;}// 创建一个新的客户端var client = new Client(uid, conn, roomId);// 将用户添加到房间roomMap.put(uid, client);// 如果房间中的用户数大于1,则通知房间中的其他用户if(roomMap.size() > 1){// 获取房间中的所有用户var clients = roomMap.getEntrys();for(var i in clients){var remoteUid = clients[i].key;if(remoteUid != uid){// 通知已经在房间的人,有新人加入var jsonMsg = {'cmd':SIGNAL_TYPE_NEW_PEER,'remoteUid':uid};var msg = JSON.stringify(jsonMsg);// 通知自己,房间里有的人jsonMsg = {'cmd':SIGNAL_TYPE_RESP_JOIN,'remoteUid':remoteUid};msg = JSON.stringify(jsonMsg);console.info("resp-join"+msg);conn.sendText(msg);}}}
}// 创建一个WebSocket服务器
var server = ws.createServer(function (conn) {// 连接建立时的输出console.log("New connection");// 向客户端发送消息conn.sendText('我收到你的连接了')// 监听客户端发送的消息conn.on("text", function (str) {console.info("Received msg:"+str);var jsonMsg = JSON.parse(str);switch(jsonMsg.cmd){case SIGNAL_TYPE_JOIN:handleJoin(jsonMsg, conn); break;}});// 连接关闭时的输出conn.on("close", function (code, reason) {console.log("Connection closed,code:" + code + " reason:" + reason); });// 监听连接错误conn.on("error", function (error) {console.error("发生错误:", error);})
}).listen(port);

运行效果:

客户1:
第一个创建,刚开始没有红框的内容。在客户2新加入后,收到服务端发来的信令。
在这里插入图片描述

客户2:
创建后,会收到服务端发来的,房间内已有的客户1的信息。
在这里插入图片描述
客户3:
房间内已经有2个客户了,会提示房间已满,无法加入房间。
在这里插入图片描述
服务端:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/6292.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Go实战训练之Web Server 与路由树

Server & 路由树 Server Web 核心 对于一个 Web 框架&#xff0c;至少要提供三个抽象&#xff1a; Server&#xff1a;代表服务器的抽象Context&#xff1a;表示上下文的抽象路由树 Server 从特性上来说&#xff0c;至少要提供三部分功能&#xff1a; 生命周期控制&…

堆栈打印跟踪Activity的启动过程(基于Android10.0.0-r41),framework修改,去除第三方app的倒计时页面

文章目录 堆栈打印跟踪Activity的启动过程(基于Android10.0.0-r41)&#xff0c;framework修改&#xff0c;去除第三方app的倒计时页面1.打印异常堆栈2.去除第三方app的倒计时页面3.模拟点击事件跳过首页进入主页 堆栈打印跟踪Activity的启动过程(基于Android10.0.0-r41)&#x…

在Ubuntu上怎么查看安装了哪些包?

2024年5月3日&#xff0c;周五晚上 在Ubuntu上&#xff0c;你可以使用以下命令来查看系统中已安装的包&#xff1a; 使用dpkg命令&#xff1a;dpkg --list这个命令将列出系统中所有已安装的软件包&#xff0c;包括名称、版本号和描述等信息。你可以使用 grep 命令来过滤结果&a…

领域驱动设计(DDD)笔记(三)后端工程架构

文章链接 领域驱动设计(DDD)笔记(一)基本概念-CSDN博客领域驱动设计(DDD)笔记(二)代码组织原则-CSDN博客领域驱动设计(DDD)笔记(三)后端工程架构-CSDN博客前导 领域驱动设计(Domain Driven Design,简称DDD)是业内主导的业务工程理论。它在各中权威人士被广泛讨论…

华为云耀云服务器开放端口

博客主页&#xff1a;花果山~程序猿-CSDN博客 关注我一起学习&#xff0c;一起进步&#xff0c;一起探索编程的无限可能吧&#xff01;让我们一起努力&#xff0c;一起成长&#xff01; 目录 一.华为云控制台开放端口 寻找到安全组信息 2. 添加开放的端口信息 3. 检查是否成…

信息泄露.

一&#xff0c;遍历目录 目录遍历&#xff1a;没有过滤目录相关的跳转符号&#xff08;例如&#xff1a;../&#xff09;&#xff0c;我们可以利用这个目录找到服务器中的每一个文件&#xff0c;也就是遍历。 tipe&#xff1a;依次点击文件就可以找到flag 二&#xff0c;phpi…

JavaScript基础(四)

逻辑运算符 && 与 : 多个条件同时满足 ΙΙ 或 : 多个条件满足一个 &#xff01; 非 : 否定某个条件 例: <script> //&多个条件同时满足&#xff0c;才返回true //任意一个为false&#xff0c;就返回false var a 10; var b 20; …

vue快速入门(五十)重定向

注释很详细&#xff0c;直接上代码 上一篇 本篇建立在之前篇目前提下针对重定向进行演示 新增内容 路由重定向写法 源码 src/router/index.js //导入所需模块 import Vue from "vue"; import VueRouter from "vue-router"; import myMusic from "/v…

Java的分布式微服务

Java的分布式微服务是一个涉及多个方面的复杂概念&#xff0c;以下是对其的详细解释&#xff1a; 概念&#xff1a; 微服务&#xff1a;这是一种软件架构模式&#xff0c;它将大型的应用程序分解为一组小型、自治的服务单元。每个服务运行在其独立的进程中&#xff0c;并通过轻…

C#面:如何部署 ASP.NET 页面

在C#中部署 ASP.NET 页面有几种常见的方式&#xff0c;下面我将介绍其中两种常用的方式&#xff1a; IIS部署&#xff1a; 在服务器上安装IIS&#xff08;Internet Information Services&#xff09;。 在IIS中创建一个新的网站或虚拟目录&#xff0c;将其指向你的ASP.NET项目…

MongoDB聚合运算符:$strLenBytes

MongoDB聚合运算符&#xff1a;$strLenBytes 文章目录 MongoDB聚合运算符&#xff1a;$strLenBytes语法使用举例单字节和多字节字符集 $strLenBytes聚合运算符返回指定字符串中 UTF-8 编码的字节数。 语法 { $strLenBytes: <string expression> }<expression>为可…

【51蛋骗鸡595点阵88数码管流水灯综合应用】2021-12-30

缘由51单片机变量进阶与点阵LED-嵌入式-CSDN问答 大佬们 求解单片机点亮点阵程序 被困3天了一直想不明白 - 24小时必答区 #include<reg52.h>//头文件sbit shcpP1^2;//数据输入时钟线 595的11脚 sbit stcpP1^1;//输出存储器锁存时钟线 595的12脚 sbit dsP1^0;//数据线 5…

AI视频教程下载:零代码创建AI智能体、AI Agents和ChatGPT的Gpts

这门课程专注于提示工程的掌握&#xff0c;教你以精确的方式引导GPT&#xff0c;利用它们的生成能力产生卓越的AI驱动结果。一步一步地&#xff0c;你将学会创建多样化的GPT军团——每个都设计来满足特定的专业需求。 从提供个性化职业变更指导的职业教练AI&#xff0c;到以惊…

无人机+飞行汽车:低空经济新引擎,有望爆发式增长

无人机和飞行汽车作为低空经济的新引擎&#xff0c;正在引领一场全新的交通革命。随着技术的不断进步和政策的支持&#xff0c;低空经济有望成为未来经济发展的重要领域&#xff0c;实现爆发式增长。 首先&#xff0c;无人机和飞行汽车具有独特的优势和应用场景。无人机可以在…

Adobe PS 2023、Adobe Photoshop 2023下载教程、安装教程

Adobe Photoshop &#xff08;<-下载连接&#xff09;简介&#xff1a; Adobe Photoshop是一款广泛使用的图像处理软件&#xff0c;由Adobe公司开发。它提供了许多强大的工具和功能&#xff0c;可以用于图像编辑、合成、修饰、设计等各个领域。用户可以使用Photoshop来调整…

Mybatis四种实例化对象方式

代码准备 创建mybatis-config.xml <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE configurationPUBLIC "-//mybatis.org//DTD Config 3.0//EN""http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration…

【HAL库 STM32】输入捕获并实现超声波测距

文章目录 HC-SR04 超声波模块简介HC-SR04 工作原理如何使用HC-SR04模块程序效果 一、工程配置代码如果您发现文章有错误请与我留言&#xff0c;感谢 HC-SR04 超声波模块简介 HC-SR04 工作原理 模块有2个超声波换能器&#xff08;如图所示&#xff09;&#xff0c;一个发出声波…

Web安全测试实战:SQL注入与XSS攻击的检测与防御

摘要&#xff1a; 在网络安全领域&#xff0c;SQL注入和跨站脚本&#xff08;XSS&#xff09;攻击是两大主要威胁&#xff0c;它们可以导致数据泄露、会话劫持甚至整个系统的破坏。本文将通过具体的代码示例、测试步骤和防御策略&#xff0c;展示如何检测和防御这两种攻击&…

三. Django项目之电商购物商城 -- 校验用户名 , 数据入库

Django项目之电商购物商城 – 校验用户名 , 数据入库 需要开发文档和前端资料的可私聊 一. 路由匹配获得用户名 在注册时 , 用户输入用户名 , 通过ajax请求发送到服务器 , 在路由中设置对应url , 响应视图 , 将用户输入的用户名传入视图 , 与数据库进行校验检查用户名是否重…

LeetCode 110.平衡二叉树(Java/C/Python3/Go实现含注释说明,Easy)

标签 树深度优先搜索递归 题目描述 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡的二叉树定义为&#xff1a; 一个二叉树每个节点的左右两个子树的高度差的绝对值不超过1。 原题&#xff1a;LeetCode 110.平衡二叉树 思路及…