WebRTC教程—数据通道

作者:deepstreamHub(原文链接

翻译:刘通

原标题:WebRTC 01: Data Channels

上一篇:WebRTC教程—概述

 

让我们从一个简单的例子开始吧:在两个浏览器窗口之间创建一个连接,并且来回地发送文字消息。要想完成这个功能,我们就需要用到WebRTC的数据通道(data-channels)–一个基础的连接类型可以让你在两个对等端之间发送文本和随机数据。

datachannel1

(点击图片跳转到原文查看例子)

选择一个WebRTC

对于浏览器标准来说,WebRTC API是非常复杂并且处于低层。当你想要建立一个Websocket连接的时候,你所需要的只是调用new Websocket( ‘ws://…’ )。但是WebRTC需要整个连接的创建过程,产生请求和应答,发送和接收ICE候选,以及一些其他的协议都需要你来处理好。如果你想要尝试一下的话,我们非常推荐你去看Mozilla的DataChannel教程,但是在我们的这篇教程中,我们要将一切工作尽可能的简化,所以只使用一个WebRTC库来完成上述工作。

有很多WebRTC库都可以使用,它们可以提供便利的方法或者高层抽象。WebRTC是一个新兴的标准,而且还是处于不断变化之中的,所以选择一个较新的,良好维护的库是至关重要的。

在我们的例子中,我们会使用Simple Peer:一个基础的,非常洁净的低层P2P连接封装器。

谁打给谁?

现在是时候通过我们的浏览器窗口打电话给另外一个浏览器了。但是首先,我们必须要解决谁在准备接电话,谁准备拨通电话这个问题。为了保持整体的简单性,我们在一个窗口的URL中加入#initiator这个标签。所以当创建连接的时候,我们指定

datachannel2

在下篇文章的全网状连接例子中,我们要自己的对比用户名localUserName > remoteUserName来达到同样的目的。

信令

在连接被建立的时候,两个对等端都需要发送包含它们自身数据以及如何连接到他们的信息—也就是之前所提到的ICE。

Simple peer让整个过程变得简单。任何时刻,我们的本地端想要发送给远端信息时,它都会激活一个 ’signal’ 事件。只要我们收到了一个信号,我们就会使用我们连接中的.signal()类函数来对信号进行处理。

我们通过调用下面这个函数来创建一个连接:

datachannel3

为了确保我们不会接收到我们自己产生的事件,我们会在两端都创建一个随机的用户名:

datachannel4

并且用它来过滤出我们自己的信号:

datachannel5

一旦连接建立之后,我们的连接就会激活一个‘connect’事件。

datachannel6

这里我们可以简单的使用下图中的代码发送消息

datachannel7

并且通过下图所示接收代码

datachannel8

可以点击下图跳转原文来自己尝试一下这个示例(需要同时在两个标签页中都打开原文网页)。

datachannel9

填写常用邮箱,接收社区更新

WebRTC 中文社区由

运营