WebRTC 入门教程（一）| 搭建WebRTC信令服务器

时间  2019-12-04
标签 webrtc 入门 教程 搭建 信令 服务器 繁體版
原文   原文链接
做者：李超，音视频技术专家。本入门教程将分为三篇内容，分别讲述信令服务器的搭建、媒体服务器的搭建、Android 端的 WebRTC 应用实现，全文采用开源框架来搭建，适用于大多数入门的开发者。转载请注明出处。 如遇到 WebRTC 开发问题，能够点击这里，关注做者与他交流。

前言

咱们在学习 WebRTC 时，首先要把实验环境搭建好，这样咱们就能够在上面作各类实验了。javascript

对于 WebRTC 来讲，它有一整套规范，如怎样使用它的接口、使用SDP进行媒体协商、经过ICE收集地址并进行连通性检测等等。除此以外，WebRTC还须要房间服务器将多端汇集到一块儿管理，以及信令服务器进行信令数据交换（如媒体描述信息SDP的交换，链接地址的交抽换等），但在WebRTC的规范中没有对这部份内容进行规定，因此须要由用户本身处理。html

你能够根据本身的喜爱选择服务器（如 Apache，Nginx 或 Nodejs），我今天将介绍如何使用 Nodejs 来搭建信令服务器。前端

为何选择 Nodejs

Apache、Nginx和Nodejs都是很是成熟的Web服务器，Nginx 能够说是的性能是最好的Web服务器了。但从将来的发展来讲，Nodejs可能会更有优点。java

如今以Chrome为表明的浏览器的功能愈来愈强大，之前认为经过浏览器不可能完成的事儿，如今它均可以轻松实现。H5､ WebSocket的出现以及如今WebRTC的加入，让你们愈来愈以为之后的浏览器能够说是“无所不能”。所以，推进 JavaScript 语言的发展愈来愈迅速。这能够从如今 JavaScript 技术的火爆，以及各类层叠不穷JS FrameWork的出现得以印证。node

而 Nodejs 的最大优势便是可使用 JS 语言开发服务器程序。这样使得大量的前端同窗能够无缝的转到服务器开发，甚至有可能先后端使用同一套代码实现。对于这一点我想不管是对我的仍是对于企业都是具大的诱惑。git

  • 一方面 JS 语言的简单性能够方便开发出各类各样功能的服务端程序。
  • 更难得的是 Nodejs 的生态链很是的完整，有各类各样的功能库。你能够根据本身的须要经过安装工具 NPM 快速的安装，这也使它也获得了广大开发者的喜欢。

Nodejs 如今是很是流行的 Web 服务器，它在服务器端使用 V8(JavaScript)引擎，经过它解析 JS 脚原本控制服务器的行为。这对于广大的 JS 同窗来讲真是太幸福了，在10年前还很难想像能够经过 JS 脚本语言来写服务器程序。github

固然，若是你想对Nodejs做能力拓展的话，仍是要写C/C++库，而后加载到 Nodejs 中去。npm

Nodejs的基本原理

Nodejs

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

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

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

nodejs事件处理

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

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

两个 V8 引擎

v8

如上图所示，在咱们使用 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

socket.io

这次，咱们使用 Nodejs 下的 socket.io 库来实现 WebRTC 信令服务器。socket.io特别适合用来开发WebRTC的信令服务器，经过它来构建信令服务器特别的简单，这主要是由于它内置了房间 的概念。

socketio

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

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

  • 给本次链接发消息

    socket.emit()

  • 给某个房间内全部人发消息

    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下的 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 与服务端通信。

首先，在server.js目录下建立 js 子目录，而后在 js目录下生成 client.js。

下面是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); //侦听 2013

io.sockets.on('connection', (socket) => {

  // convenience function to log server messages to the client
  function 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 clients
      socket.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 安装 socket.io 和 node-static，安装方法以下：

进入到 server.js 所在的目录，而后执行下面的命令。

npm install socket.io
npm install node-static

启动服务器并测试

经过上面的步骤咱们就使用 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信令服务器很是方便。

另外，在本文中的例子只是一个简单例子并无太多的实际价值。在后面的文章中我会以这个例子为基础，在其上面不断增长一些功能，最终你会看到一个完整的Demo程序。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程