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

webrtc学习笔记3

news 2026/5/25 2:23:48

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

别急着重装系统！记一次 Ubuntu 22.04 上 gcc 与 cpp 版本依赖冲突的排查与修复实录

从依赖地狱到编译自由&#xff1a;Ubuntu 22.04下gcc与cpp版本冲突的深度修复指南那天下午&#xff0c;当我正准备为新的C项目搭建开发环境时&#xff0c;终端里那行刺眼的红色错误提示让我的咖啡瞬间不香了。作为一个自诩"Linux老司机"的开发者&#xff0c;我没想到…...

编程新知 2026/5/25 2:03:04

对比自建代理，使用Taotoken聚合平台在稳定性与运维上的体验提升

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比自建代理&#xff0c;使用Taotoken聚合平台在稳定性与运维上的体验提升 过去&#xff0c;一些开发团队为了便捷地使用特定的大…...

编程新知 2026/5/24 23:45:06

Termux-X免Root移动渗透工作台实战指南

1. 这不是“手机装Kali”的噱头&#xff0c;而是真能干活的移动渗透工作台很多人第一次看到“Termux-X”和“Kali NetHunter免Root”这两个词组合在一起时&#xff0c;第一反应是&#xff1a;又一个标题党&#xff1f;毕竟过去几年里&#xff0c;“安卓跑Kali”“手机当渗透主机…...

编程新知 2026/5/24 20:23:34

FPGA加速SVM量子态判别：5.74纳秒低延迟与8位量化硬件实现

1. 项目概述与核心挑战 在量子计算这个前沿领域&#xff0c;我们每天都在和微观世界的基本单元——量子比特打交道。对于超导量子比特这类物理实现&#xff0c;一个核心且基础的操作就是“状态读取”&#xff1a;在量子算法执行或纠错循环中&#xff0c;我们必须快速、准确地判…...

编程新知 2026/5/24 20:21:28

5分钟实现Windows三指拖拽：macOS手势体验的终极解决方案

5分钟实现Windows三指拖拽&#xff1a;macOS手势体验的终极解决方案 【免费下载链接】ThreeFingersDragOnWindows Enables macOS-style three-finger dragging functionality on Windows Precision touchpads. 项目地址: https://gitcode.com/gh_mirrors/th/ThreeFingersDrag…...

编程新知 2026/5/24 19:43:19

【DeepSeek推理加速实战指南】：20年AI系统优化专家亲授7大低开销部署技巧

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;DeepSeek推理加速的核心挑战与优化全景 DeepSeek系列大模型在实际部署中面临显著的推理延迟与显存压力&#xff0c;尤其在长上下文&#xff08;如32K tokens&#xff09;和高并发场景下&#xff0c;GPU利用率常…...

编程新知 2026/5/24 19:10:48

DV-LAE：基于差异向量的机器学习势函数高效数据筛选方法

1. 项目概述&#xff1a;为什么我们需要更聪明的数据筛选&#xff1f;在材料模拟和计算化学的世界里&#xff0c;我们常常面临一个两难困境&#xff1a;一方面&#xff0c;基于第一性原理&#xff08;如密度泛函理论&#xff0c;DFT&#xff09;的计算虽然精度高&#xff0c;但…...

编程新知 2026/5/24 19:06:11

床通道轨到轨CMOS运放：LMC6482AIM

简 介&#xff1a; 本文测试了TI公司LMC6482AIM双通道轨到轨CMOS运算放大器的基本特性。该芯片具有3V-15.5V宽工作电压范围、超低20fA输入偏置电流和轨到轨输入输出特性&#xff0c;适用于高阻抗传感器信号调理。测试发现其5V供电时工作电流仅0.8mA&#xff0c;15V时约1mA&…...

编程新知 2026/5/24 19:04:04

全面精通QuPath数字病理分析：实战应用全解析

全面精通QuPath数字病理分析&#xff1a;实战应用全解析 【免费下载链接】qupath QuPath - Open-source bioimage analysis for research 项目地址: https://gitcode.com/gh_mirrors/qu/qupath QuPath是一款专为生物医学研究和数字病理分析设计的开源软件&#xff0c;它…...

编程新知 2026/5/24 18:49:48

ZXPInstaller终极指南：告别Adobe插件安装烦恼的跨平台解决方案

ZXPInstaller终极指南&#xff1a;告别Adobe插件安装烦恼的跨平台解决方案 【免费下载链接】ZXPInstaller Open Source ZXP Installer for Adobe Extensions 项目地址: https://gitcode.com/gh_mirrors/zx/ZXPInstaller 还在为Adobe Creative Cloud插件的安装问题而烦恼…...

编程新知 2026/5/24 18:49:48