调用ice服务器_Nodejs+socket.io搭建WebRTC信令服务器

前言

我们在学习 WebRTC 时，首先要把实验环境搭建好，这样我们就可以在上面做各种实验了。

对于 WebRTC 来说，它有一整套规范，如使它使用的接口、使用SDP进行媒体协商、通过ICE收集地址并进行连通性检测等等。除此之外，WebRTC还需要房间服务器将多端聚集到一起管理，以及信令服务器进行信令数据交换（如媒体描述信息SDP的交换，连接地址的交抽换等），但在WebRTC的规范中没有对这部分内容进行规定，所以需要由用户自己处理。

你可以根据自己的喜好选择服务器（如 Apache，Nginx 或 Nodejs），我今天将介绍如何使用 Nodejs 来搭建信令服务器。

为什么选择 Nodejs

Apache、Nginx和Nodejs都是非常成熟的Web服务器，Nginx 可以说是的性能是最好的Web服务器了。但从未来的发展来说，Nodejs可能会更有优势。

现在以Chrome为代表的浏览器的功能越来越强大，以前认为通过浏览器不可能完成的事儿，现在它都可以轻松实现。H5､ WebSocket的出现以及现在WebRTC的加入，让大家越来越觉得以后的浏览器可以说是“无所不能”。因此，推动 JavaScript 语言的发展越来越迅速。这可以从现在 JavaScript 技术的火爆，以及各种层叠不穷JS FrameWork的出现得以印证。

而 Nodejs 的最大优点即是可以使用 JS 语言开发服务器程序。这样使得大量的前端同学可以无缝的转到服务器开发，甚至有可能前后端使用同一套代码实现。对于这一点我想无论是对个人还是对于企业都是具大的诱惑。

  • 一方面 JS 语言的简单性可以方便开发出各种各样功能的服务端程序。
  • 更可贵的是 Nodejs 的生态链非常的完整，有各种各样的功能库。你可以根据自己的需要通过安装工具 NPM 快速的安装，这也使它也得到了广大开发者的喜欢。

Nodejs 现在是非常流行的 Web 服务器，它在服务器端使用 V8(JavaScript)引擎，通过它解析 JS 脚本来控制服务器的行为。这对于广大的 JS 同学来说真是太幸福了，在10年前还很难想像可以通过 JS 脚本语言来写服务器程序。

当然，如果你想对Nodejs作能力拓展的话，还是要写C/C++库，然后加载到 Nodejs 中去。

Nodejs的基本原理

354fd26b76d7954b890324c04c32cfbd.png

Nodejs的工作原理如上图所示， 其核心是 V8 引擎。通过该引擎，可以让 js 调用 C/C++方法 或 对象。相反，通过它也可能让 C/C++ 访问 javascript 方法和变量。

Nodejs 首先将 JavaScript 写好的应用程序交给 V8 引擎进行解析，V8理解应用程序的语义后，再调用 Nodejs 底层的 C/C++ API将服务启动起来。 所以 Nodejs 的强大就在于 js 可以直接调用 C/C++ 的方法，使其能力可以无限扩展。

以开发一个 HTTP 服务为例，Nodejs 打开侦听的服务端口后，底层会调用 libuv 处理该端口的所有 http 请求。其网络事件处理如下图所示：

8c742b1651778b5c0f440a248a9600ba.png

当有网络请求过来时，首先会被插入到一个事件处理队列中。libuv会监控该事件队列，当发现有事件时，先对请求做判断，如果是简单的请求，就直接返回响应了；如果是复杂请求，则从线程池中取一个线程进行异步处理；

线程处理完后，有两种可能：一种是已经处理完成，则向用户发送响应；另一种情况是还需要进一步处理，则再生成一个事件插入到事件队列中等待处理；事件处理就这样循环往复下去，永不停歇。

两个 V8 引擎

675d08814c250632939e3a6771fcd7a1.png

如上图所示，在我们使用 Nodejs之后实际存在了两个 V8 引擎。一个V8用于解析服务端的 JS 应用程序，它将服务启动起来。另一个 V8 是浏览器中的 V8 引擎，用于控制浏览器的行为。

对于使用 Nodejs 的新手来说，很容易出现思维混乱，因为在服务端至少要放两个 JS 脚本。其中一个是服务端程序，控制 Nodejs 的行为，它由 Nodejs 的V8引擎解析处理；另一个是客户端程序，它是要由浏览器请求后，下发到浏览器，由浏览器中的 V8 引擎进行解析处理。如果分不清这个，那麻烦就大了。

安装 Nodejs

下面我们就来看看具体如何安装 Nodejs。

安装 Nodejs 非常的简单:

在Ubuntu系统下执行：

apt install nodejs

或在Mac 系统下执行：

brew install nodejs

通过上面的步骤我们就将 Nodejs 安装好了。我这里安装的 Nodejs版本为：v8.10.0。

安装NPM

除了安装 Nodejs 之外，我们还要安装NPM(Node Package Manager），也就是 Nodejs 的包管理器。它就像Ubuntu下的 apt 或Mac 系统下的brew 命令类似，是专门用来管理各种依赖库的。

在它们没有出现之前，我们要安装个包特别麻烦。以Linux为例，假设要安装一个工具，其基本步骤是:

  • 先将这个工具的源码下载下来。
  • 执行./configure 生成Makefile 文件。
  • 执行 make 命令对其进行编译。
  • 最后，执行 make install 将其安装到指定目录下。
  • 如果编译过程中发现有依赖的库，则要对依赖库执行前面的4步，也就是先将依赖库安装好，然后再来安装该工具。

大家可以看到，以前在Linux下安装个程序或工具是多么的麻烦。

Linux 有了apt 之后，一切都变得简单了。我们只要执行 apt install xxx 一条命令就好了，它会帮你完成上面的一堆操作。

对于 Nodejs的安装包也是如此，NPM 就是相当于 Linux 下的 apt，它的出现大大提高了人们的工作效率。

NPM 的安装像安装 Nodejs 一样简单:

在Ubuntu下执行:

apt install npm

或在Mac下执行：

brew install npm

http://socket.io

此次，我们使用 Nodejs 下的 http://socket.io 库来实现 WebRTC 信令服务器。http://socket.io特别适合用来开发WebRTC的信令服务器，通过它来构建信令服务器特别的简单，这主要是因为它内置了房间 的概念。

6962e6e8777069979a36346e7d5e7723.png

上图是 http://socket.io 与 Nodejs配合使用的逻辑关系图， 其逻辑非常简单。http://socket.io 分为服务端和客户端两部分。服务端由 Nodejs加载后侦听某个服务端口，客户端要想与服务端相连，首先要加载 http://socket.io 的客户端库，然后调用 io.connect();就与服务端连上了。

需要特别强调的是 http://socket.io 消息的发送与接收。http://socket.io 有很多种发送消息的方式，其中最常见的有下面几种，是我们必须要撑握的：

  • 给本次连接发消息
    socket.emit()
  • 给某个房间内所有人发消息http://io.in(room).emit()
  • 除本连接外，给某个房间内所有人发消息
    socket.to(room).emit()
  • 除本连接外，给所以人发消息
    socket.broadcast.emit()

消息又该如何接收呢？

  • 发送 command 命令
    S: socket.emit('cmd’); C: socket.on('cmd',function(){...});
  • 送了一个 command 命令，带 data 数据
    S: socket.emit('action', data); C: socket.on('action',function(data){...});
  • 发送了command命令，还有两个数据
    S: socket.emit(action,arg1,arg2); C: socket.on('action',function(arg1,arg2){...});

有了以上这些知识，我们就可以实现信令数据通讯了。

搭建信令服务器

接下来我们来看一下，如何通过 Nodejs下的 http://socket.io 来构建的一个服务器：

这是客户端代码，也就是在浏览器里执行的代码。index.html：

<!DOCTYPE html>
<html><head><title>WebRTC client</title></head><body><script src='/socket.io/socket.io.js'></script><script src='js/client.js'></script></body>
</html>

该代码十分简单，就是在body里引入了两段 JS 代码。其中，socket.io.js 是用来与服务端建立 socket 连接的。client.js 的作用是做一些业务逻辑，并最终通过 socket 与服务端通讯。

下面是client.js的代码：

var isInitiator;room = prompt('Enter room name:'); //弹出一个输入窗口const socket = io.connect(); //与服务端建立socket连接if (room !== '') { //如果房间不空，则发送 "create or join" 消息console.log('Joining room ' + room);socket.emit('create or join', room);
}socket.on('full', (room) => { //如果从服务端收到 "full" 消息console.log('Room ' + room + ' is full');
});socket.on('empty', (room) => { //如果从服务端收到 "empty" 消息isInitiator = true;console.log('Room ' + room + ' is empty');
});socket.on('join', (room) => { //如果从服务端收到 “join" 消息console.log('Making request to join room ' + room);console.log('You are the initiator!');
});socket.on('log', (array) => {console.log.apply(console, array);
});

在该代码中：

  • 首先弹出一个输入框，要求用户写入要加入的房间。
  • 然后，通过 io.connect() 建立与服务端的连接，
  • 根据socket返回的消息做不同的处理：
    • 当收到房间满"full"时的情况;
    • 当收到房间空“empty"时的情况；
    • 当收到加入“join"时的情况；

以上是客户端（也就是在浏览器）中执行的代码。下面我们来看一下服务端的处理逻辑：

服务器端代码，server.js：

const static = require('node-static');
const http = require('http');
const file = new(static.Server)();
const app = http.createServer(function (req, res) {file.serve(req, res);
}).listen(2013);const io = require('socket.io').listen(app); //侦听 2013io.sockets.on('connection', (socket) => {// convenience function to log server messages to the clientfunction log(){ const array = ['>>> Message from server: ']; for (var i = 0; i < arguments.length; i++) {array.push(arguments[i]);} socket.emit('log', array);}socket.on('message', (message) => { //收到message时，进行广播log('Got message:', message);// for a real app, would be room only (not broadcast)socket.broadcast.emit('message', message); //在真实的应用中，应该只在房间内广播});socket.on('create or join', (room) => { //收到 “create or join” 消息var clientsInRoom = io.sockets.adapter.rooms[room];var numClients = clientsInRoom ? Object.keys(clientsInRoom.sockets).length : 0; //房间里的人数log('Room ' + room + ' has ' + numClients + ' client(s)');log('Request to create or join room ' + room);if (numClients === 0){ //如果房间里没人socket.join(room);socket.emit('created', room); //发送 "created" 消息} else if (numClients === 1) { //如果房间里有一个人io.sockets.in(room).emit('join', room);socket.join(room);socket.emit('joined', room); //发送 “joined”消息} else { // max two clientssocket.emit('full', room); //发送 "full" 消息}socket.emit('emit(): client ' + socket.id +' joined room ' + room);socket.broadcast.emit('broadcast(): client ' + socket.id +' joined room ' + room);});});

在服务端引入了 node-static 库，使服务器具有发布静态文件的功能。服务器具有此功能后，当客户端（浏览器）向服务端发起请求时，服务器通过该模块获得客户端（浏览器）运行的代码，也就是上我面我们讲到的 index.html 和 client.js 并下发给客户端（浏览器）。

服务端侦听 2013 这个端口，对不同的消息做相应的处理：

  • 服务器收到 message 消息时，它会直接进行广播，所有连接到该服务器的客户端都会收收广播的消息。
  • 服务端收到 “create or join”消息时，它会对房间里有人数进行统计，如果房间里没有人，则发送"created" 消息；如果房间里有一个人，发送"join"消息和“joined"消息；如果超过两个人，发送"full"消息。

要运行该程序，需要使用 NPM 安装 http://socket.io 和 node-static，安装方法如下：

npm install socket.io
npm install node-static

启动服务器并测试

通过上面的步骤我们就使用 http://socket.io 构建好一个服务器，现在可以通过下面的命令将服务启动起来了：

node server.js

如果你是在本机上搭建的服务，则可以在浏览器中输入 localhost:2013 ，然后新建一个tab 在里边再次输入localhost:2013 。此时，打开控制台看看发生了什么?

在Chrome下你可以使用快捷键 Command-Option-J或Ctrl-Shift-J的DevTools访问控制台。

小结

以上我向大家介绍了 Nodejs 的工作原理、Nodejs的安装与布署，以及如何使用要 sokcet.io 构建 WebRTC 信令消息服务器。socket.io 由于有房间的概念所以与WebRTC非常匹配，用它开发WebRTC信令服务器非常方便。

另外，在本文中的例子只是一个简单例子并没有太多的实际价值。在我的 《WebRTC实时互动直播技术入门与实战》课中，会以上面的例子为基础，教给大家如何一步一步的实现 WebRTC信令服务器，并与 WebRTC 配合实现1对1音视频实时互动直播系统。

课程地址

WebRTC实时互动直播技术入门与实战

谢谢！

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

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

相关文章

数据结构-栈4-栈的应用-中缀转后缀

数据结构-栈4-栈的应用-中缀转后缀

//碰到数字直接输出 //运算符号&#xff1a;与栈顶符号进行优先级比较//若栈顶符号优先级比运算符号优先级低&#xff1a;此符号进栈&#xff08;括号优先级最低&#xff09;//若栈顶符号优先级不低于运算符号优先级&#xff1a;将栈顶符号一直弹出并输出&#xff0c;直到不满足…
阅读更多...
四二拍用音符怎么表示_每个音符都是赞美歌拍子分析 0基础识简谱每日必看

四二拍用音符怎么表示_每个音符都是赞美歌拍子分析 0基础识简谱每日必看

点击上方蓝字 关注我们拍子状态分析是为了帮助0基础家人识谱用的&#xff0c;一首诗歌拿在手上只所以看起来复杂&#xff0c;是这些节奏让人眼花缭乱&#xff0c;其实真正理解了其中的含义&#xff0c;就会感觉豁然开朗&#xff0c;此种方法是掌握节奏型的捷径&#xff0c;不需…
阅读更多...
数据结构-栈5-栈的应用-后缀转中缀

数据结构-栈5-栈的应用-后缀转中缀

#define _CRT_SECURE_NO_WARNINGS #include"LinkList.c" #include<stdio.h> #include<stdlib.h> #include<string.h>//遇到数字压栈 //遇到符号&#xff0c;取出栈的第一个元素为右操作符&#xff0c;第二个元素为左操作符。计算完毕后压栈typedef…
阅读更多...
midl会议_2020年医学图像处理领域值得关注的期刊和会议

midl会议_2020年医学图像处理领域值得关注的期刊和会议

期刊注册IEEE Xplore账号&#xff0c;将该期刊的更新添加提醒&#xff0c;每有新文章出来就会推送到邮箱。注册账号后也可以订阅文章更新会议MICCAI: International Conference on Medical Image Computing and Computer Assisted Intervention (每年9-10月)2.IPMI: Informatio…
阅读更多...
数据结构排序1-冒泡，选择，插入排序

数据结构排序1-冒泡，选择，插入排序

冒泡排序 &#xff0c;选择排序&#xff0c;插入排序 #include<iostream> #include<stdio.h> #include<stdlib.h> #include<random> #include<time.h> #include<sys/timeb.h> using namespace std; #define MAX 10long getSystemTime() {…
阅读更多...
emacs shell插件_Windows 下 Emacs 中的 zsh shell 使用方法

emacs shell插件_Windows 下 Emacs 中的 zsh shell 使用方法

导读运行跨平台 shell(例如 Bash 或 zsh)的最大优势在于你能在多平台上使用同样的语法和脚本。在 Windows 上设置(替换)shell 挺麻烦的&#xff0c;但所获得的回报远远超出这小小的付出。MSYS2 子系统允许你在 Windows 上运行 Bash 或 zsh 之类的 shell。使用 MSYS2 很重要的一…
阅读更多...
数据结构排序2-希尔，快速，归并排序

数据结构排序2-希尔，快速，归并排序

希尔排序 希尔排序是对插入排序的改进。增加了分组 分组插入排序 降低元素个数&#xff0c;然后对每组分别进行插入排序 利用分组增量遍历&#xff0c;因为最后必须全部排序一次&#xff0c;然后分别对每组插入排序。把每组的第一个数作为有序序列&#xff0c; 要比较的第一个…
阅读更多...
数据结构排序3-堆排序

数据结构排序3-堆排序

堆排序 思想&#xff1a;假设数组放入完全二叉树中&#xff0c; 1、初始化堆&#xff1a;调节父结点与子结点的大小。让所有的子结点都小于父结点。 2、将完全二叉树中的叶子结点和根结点进行互换后&#xff0c;继续调整堆。直至结束 #include<iostream> #include<…
阅读更多...
删除代码中的空行

删除代码中的空行

打开替换&#xff08;ctrlh?&#xff09;&#xff0c;使用正则表达式&#xff1a; ^\s*\n ^ 匹配输入字符串的开始位置\s 表示匹配任何空白字符&#xff0c;包括制表符&#xff0c;空格&#xff0c;换页符等等* 表示匹配多次\n 表示匹配换行符 替换为&#xff1a; <…
阅读更多...
数据结构-哈希与映射

数据结构-哈希与映射

二叉树映射map #include<iostream> #include<map> //映射&#xff08;也叫字典&#xff09;&#xff0c;二叉树映射&#xff0c;不是哈希映射 using namespace std; int main() {cout << "二叉树&#xff08;红黑树&#xff09;" << endl;…
阅读更多...
python3.6.5+cuda9+cudnn7.1+win10+tensorflow-gpu1.9.0下载配置

python3.6.5+cuda9+cudnn7.1+win10+tensorflow-gpu1.9.0下载配置

一、首先明确cuda和cudnn对应版本 tensorflow版本与cuda cuDNN版本对应使用 tensorflow-gpu v1.9.0 | cuda9.0 | cuDNN7.1.4可行 | 备注&#xff1a;7.0.4/ 7.0.5/ 7.1.2不明确 tensorflow-gpu v1.8.0 | cuda9.0 | cuDNN 不明确 | 备注&#xff1a;7.0.4/ 7.0.5/ 7.1.2/…
阅读更多...
python配置opencv镜像安装

python配置opencv镜像安装

直接利用pip install opencv-python 安装即可&#xff0c;但是会出现time out情况&#xff0c;所以采用镜像安装 pip install opencv-python -i https://pypi.tuna.tsinghua.edu.cn/simple 打开pycharm验证&#xff1a;输入import cv2 as cv 不报错&#xff0c;即安装成功
阅读更多...
win10+vs2015+opencv3配置

win10+vs2015+opencv3配置

一、下载opencv3和vs2015&#xff0c;并解压与安装 二、配置opencv环境变量 右键“我的电脑---属性---高级系统设置---环境变量&#xff0c;在下方“环境变量”里找到“Path”&#xff0c;进入编辑&#xff1b; 添加”…opencv\build\x64\vc14\bin”&#xff0c;如…
阅读更多...
数据结构-图及其遍历

数据结构-图及其遍历

图-邻接矩阵 #include<iostream> #define MAX_VERTS 20 using namespace std; //邻接矩阵 浪费空间class Vertex { //顶点 public:Vertex(char lab) { Label lab; } private:char Label; };class Graph { //图 public:Graph();~Graph();void addVertex(char lab);voi…
阅读更多...
ios http长连接_Nginx篇05——http长连接和keeplive

ios http长连接_Nginx篇05——http长连接和keeplive

nginx中http模块使用http长连接的相关配置(主要是keepalive指令)和http长连接的原理解释。1、http长连接1.1 预备知识连接管理是一个 HTTP 的关键话题&#xff1a;打开和保持连接在很大程度上影响着网站和 Web 应用程序的性能。在 HTTP/1.x 里有多种模型&#xff1a;短连接, 长…
阅读更多...
php 目录555 权限_CMS网站安全权限划分设置教程

php 目录555 权限_CMS网站安全权限划分设置教程

DiYunCMS(帝云CMS)-免费开源可商用的PHP万能建站程序CMS网站安全权限划分设置教程网站安全是网站搭建运营过程中非常重要的一部分&#xff0c;DiYunCMS非常注重安全&#xff0c;开发了强大的安全功能。本文给大家介绍下DiYunCMS网站的安全设置方法。首先需要安装【系统安全】插…
阅读更多...
python 列表生成式

python 列表生成式

python笔记21-列表生成式 前言 python里面[]表示一个列表&#xff0c;快速生成一个列表可以用range()函数来生成。 对列表里面的数据进行运算和操作&#xff0c;生成新的列表最高效快速的办法&#xff0c;那就是列表生成式了。 range() 1.一个连续的数字类型列表&#xff0…
阅读更多...
php mysql grant_mysql grant命令详解_MySQL

php mysql grant_mysql grant命令详解_MySQL

bitsCN.comgrant 权限 on 数据库对象 to 用户一、grant 普通数据用户&#xff0c;查询、插入、更新、删除 数据库中所有表数据的权利。grant select on testdb.* to common_user%grant insert on testdb.* to common_user%grant update on testdb.* to common_user%grant delet…
阅读更多...
python matplotlib简单使用

python matplotlib简单使用

一、简单介绍 Matplotlib是Python的一个绘图库&#xff0c;是Python中最常用的可视化工具之一。 二、安装方法 安装方法&#xff1a;pip install matplotlib 注意&#xff1a;安装matplotlib前需要先安装numpy才可以 三、基本绘图命令 1、plt.fig([num]) 在绘图过程中&a…
阅读更多...
python窗体设计插件_Python 界面生成器 wxFormBuilder 的入门使用（wxPython的界面设计工具的初学笔记）...

python窗体设计插件_Python 界面生成器 wxFormBuilder 的入门使用（wxPython的界面设计工具的初学笔记）...

环境&#xff0c;Win10&#xff0c;python3.7.3&#xff0c;wxPython 4.0.4&#xff0c;wxFormBuilder 3.91、准备一个窗体。点击wxformbuilder上方的标签“forms”&#xff0c;并点击标签下方的第一个类似窗体的图标“Frame”然后&#xff0c;下面就会出现一个窗体。但是现在还…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023