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

webrtc学习笔记3

news 2026/2/8 3:19:02

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聊天室实战

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

  1. enter：新人进入 （蓝色字体显示）
  2. message：普通聊天信息 （黑色字体显示）
  3. 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;};
}

相关文章：

webrtc学习笔记3

Nodejs实战 对于我们WebRTC项目而言&#xff0c;nodejs主要是实现信令服务器的功能&#xff0c;客户端和服务器端的交互我们选择websocket作为通信协议&#xff0c;所以以websocket的使用为主。 web客户端 websocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行…...

编程日记 2024/8/17 12:12:55

Transformer架构；Encoder-Decoder；Padding Mask；Sequence Mask；

目录 Transformer架构 Transformer架构的主要组成部分： 简单举例说明输入和输出： Encoder-Decoder 编码器/解码器组成 6、位置前馈网络（Position-wise Feed-Forward Networks） 7、残差连接和层归一化 10、掩码Mask 10.1 Padding Mask 10.2 Sequence Mask 为什么…...

编程日记 2024/8/17 12:11:53

【leetcode详解】特殊数组II : 一题代表了一类问题(前缀和思想)

前缀和的优势 给定一个数组&#xff0c;前缀和的特点在于&#xff0c;任意给出一对始末位置&#xff0c;能够用O(1)的时间复杂度得到始末位置之间所有元素的某种关系。 题型分析 这道题目正是“给出始末位置&#xff0c;检测其中元素特点”那一类&#xff0c;那我们就想&#…...

编程日记 2024/8/17 12:09:51

SQL每日一练-0814

今日SQL题难度&#xff1a;&#x1f31f;☆☆☆☆☆☆☆☆☆ 1、题目要求 找出每个部门中薪资最高的员工显示部门ID、部门名称、员工ID、员工姓名以及对应的薪资 2、表和虚拟数据 现有两个表&#xff1a;Employees 和 Departments&#xff0c;记录了员工和部门信息。…...

编程日记 2024/8/17 12:08:49

Android持久化技术—文件存储

Android持久化技术—文件存储 文件存储是Android中最基本的一种数据存储方式&#xff0c;它不对存储的内容进行任何的格式化处理&#xff0c;所有数据都是原封不动地保存到文件当中的&#xff0c;因而它比较适合用于存储一些简单的文本数据或二进制数据。如果你想使用文件存储…...

编程日记 2024/8/17 12:07:48

动手学深度学习（pytorch）学习记录12-激活函数[学习记录]

激活函数 激活函数&#xff08;activation function&#xff09;通过计算加权和并加上偏置来确定神经元是否应该被激活&#xff0c; 它们将输入信号转换为输出的可微运算。 import torch import matplotlib.pyplot as plt 简单定义一个画图的函数 def graph_drawing(x_,y_…...

编程日记 2024/8/17 12:06:46

微服务实战系列之玩转Docker（十）

前言 我们知道Docker的“使命”是为了快速完成应用的迁移和部署。为提升它的战斗能力&#xff0c;Docker官方携手发布了Docker Swarm—— 一个快速完成Docker集群构建的利器。那么请先回忆一下本系列第八篇&#xff08;重点compose&#xff09;和第九篇&#xff08;重点networ…...

编程日记 2024/8/17 12:05:44

Mysql(四)---增删查改(进阶)

文章目录 前言1.查询操作1.1.全列查询1.2.指定列查询1.3.列名为表达式查询1.4.查询中使用别名1.5.去重查询1.6.排序1.6.2.NULL 1.7.条件查询1.8.分页查询 2.修改3.删除 前言 上一篇博客&#xff0c;我们学习了一些主键的概念&#xff0c;并且分别创造了一些示例表&#xff0c;…...

编程日记 2024/8/17 12:03:42

SOAP @WebService WSDL

SOAP & WebService & WSDL SOAP&#xff08;Simple Object Access Protocol&#xff09;WebService&#xff08;Web服务&#xff09;WSDL&#xff08;Web Services Description Language&#xff09; SOAP&#xff08;Simple Object Access Protocol&#xff09; **是一…...

编程日记 2024/8/17 12:02:40

【Qt】QWidget的toolTip属性

QWidget的toolTip属性 如果一个GUI程序&#xff0c;界面比较复杂&#xff0c;按钮比较多&#xff0c;使用toolTip可以设置当鼠标悬停在控件上的时候&#xff0c;可以弹出一个提示。 API说明 setToolTip 设置 toolTip. ⿏标悬停在该 widget 上时会有提⽰说明. setToolTipDur…...

编程日记 2024/8/17 12:01:39

【操作系统】什么是进程？什么是线程？两者有什么区别（面试常考！！！）

什么是进程/任务&#xff08;Process/Task&#xff09; 当我们打开我们的电脑的任务管理器就可以看到我们的电脑正在执行的进程。 每个应用程序运行于现代操作系统之上时&#xff0c;操作系统会提供一种抽象&#xff0c;好像系统上只有这个程序在运行&#xff0c;所有的硬件资…...

编程日记 2024/8/17 11:59:37

AI -- Machine Learning

1. What is Machine Learning 1.1 Artificial Intelligence vs. Machine Learning 1.2 Relations to Other Disciplines 与其他学科的关系 1.3 Human Learning vs. Machine Learning 1.4 What is Skill in Machine Learning 什么是机器学习的技能 1.5 Two General Types of Le…...

编程日记 2024/8/17 11:54:29

了解交换机_1.交换机的技术发展

1.LAN的分段-单网线 最简单的网络是两台计算机通过一根网线相连&#xff1a; 一根网线它有很多限制&#xff0c;首先只能连接两台电脑&#xff0c;其次不能距离太远&#xff0c;主要因为&#xff1a; &#xff08;1&#xff09;单路网线太长会存在信号衰减&#xff1b;…...

编程日记 2024/8/17 11:52:25

ubuntu 24.04 安装 Nvidia 显卡驱动 + CUDA + cuDNN，配置 AI 深度学习训练环境，简单易懂，一看就会！

ubuntu 24.04 安装 Nvidia 显卡驱动 CUDA cuDNN&#xff0c;配置 AI 深度学习训练环境&#xff0c;简单易懂&#xff0c;一看就会&#xff01; 1.查看本机显卡型号 lspci | grep -i nvidia输出如下&#xff1a; 01:00.0 3D controller: NVIDIA Corporation GM108M [GeForc…...

编程日记 2024/8/17 11:51:23

跟李沐学AI：目标检测的常用算法

区域神经网络R-CNN 使用启发式搜索算法来选择锚框 -> 使用预训练模型来对每个锚框抽取特征 -> 训练一个SVM对类别进行分类 -> 训练一个线性回归模型来预测边缘框偏移 锚框大小不一&#xff0c;如何将不同的锚框统一为一个batch? -> 兴趣区域池化层 兴趣区域(RoI…...

编程日记 2024/8/17 11:47:15

基于UE5和ROS2的激光雷达+深度RGBD相机小车的仿真指南(一)---UnrealCV获取深度+分割图像

前言 本系列教程旨在使用UE5配置一个具备激光雷达深度摄像机的仿真小车&#xff0c;并使用通过跨平台的方式进行ROS2和UE5仿真的通讯&#xff0c;达到小车自主导航的目的。本教程使用的环境&#xff1a; ubuntu 22.04 ros2 humblewindows11 UE5.4.3python8 本系列教程将涉及以…...

编程日记 2024/8/17 11:45:12

Java算法解析一：二分算法及其衍生出来的问题

这个算法的前提是&#xff0c;数组是升序排列的 算法描述&#xff1a; i和j是指针可以表示查找范围 m为中间值 当目标值targat比m大时&#xff0c;设置查找范围在m右边&#xff1a;i m-1 当目标值targat比m小时&#xff0c;设置查找范围在m左边&#xff1a;j m1 当targat的…...

编程日记 2024/8/17 11:43:10

数学建模预测类—【一元线性回归】

每日格言&#xff1a;行动是治愈恐惧的良药&#xff0c;而犹豫拖延将不断滋养恐惧. 目录 前言 一、什么是回归分析&#xff1f; 1.概念理解 2.分类和一般步骤 二、一元线性回归&#xff08;Matlab算法&#xff09; 1.利用regress函数 2、例题讲解 总结 前言 在具体讲述线性回归…...

编程日记 2024/8/17 11:42:09

配置更加美观的 Swagger UI

//注册Swagger服务 private static void AddSwaggerService(IServiceCollection services){services.AddSwaggerGen(opt >{opt.SwaggerDoc("Push", new OpenApiInfo{Version "v1",Title "Push API",Description "Push API 文档"…...

编程日记 2024/8/17 11:41:07

软件测试 - 基础（软件测试的生命周期、测试报告、bug的级别、与开发人员产生争执的调解方式）

一、软件测试的生命周期 测试贯穿软件的整个生命周期 软件测试的生命周期&#xff1a; 需求分析 →测试计划→ 测试设计、测试开发→ 测试执行→ 测试评估->上线->运行维护 需求分析&#xff1a;判断用户的需求是否合理&#xff0c;是否可实现 测试计划&#xff1a;计划项…...

编程日记 2024/8/17 11:40:06

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2026/2/1 5:42:50

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/2/4 18:07:02

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2026/2/2 16:55:46

快速排序算法改进:随机快排-荷兰国旗划分详解

随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...

编程新知 2026/2/4 16:34:53

RLHF vs RLVR：对齐学习中的两种强化方式详解

在语言模型对齐&#xff08;alignment&#xff09;中&#xff0c;强化学习&#xff08;RL&#xff09;是一种重要的策略。而其中两种典型形式——RLHF&#xff08;Reinforcement Learning with Human Feedback&#xff09; 与 RLVR&#xff08;Reinforcement Learning with Ver…...

编程新知 2026/1/15 4:23:13

如何在Spring Boot中使用注解动态切换实现

还在用冗长的if-else或switch语句管理多个服务实现？ 相信不少Spring Boot开发者都遇到过这样的场景：需要根据不同条件动态选择不同的服务实现。 如果告诉你可以完全摆脱条件判断，让Spring自动选择合适的实现——只需要一个注解，你是否感兴趣？ 本文将详细介绍这种优雅的…...

编程新知 2025/12/22 6:19:02

Java + Spring Boot + Mybatis 插入数据后，获取自增 id 的方法

在 MyBatis 中使用 useGeneratedKeys"true" 获取新插入记录的自增 ID 值&#xff0c;可通过以下步骤实现&#xff1a; 1. 配置 Mapper XML 在插入语句的 <insert> 标签中设置&#xff1a; xml 复制 下载 运行 <insert id"insertUser" para…...

编程新知 2025/10/15 17:29:06