使用WebRTC传输数据

因为家里的手机、电脑设备比较多，windows，mac，iOS，Android等等，经常需要在各个设备之间传输文件，不是每个设备上都有微信，文件传输这些软件，但是每个设备上都有浏览器，所以做了一个简单基于webrtc进行文件传输的web app。

前后端其实完全可以不用任何框架，但是本着学习的目的，小项目也铺大点，前端改用vue3+vite+tailwind+antdv。后端使用nestjs。使用monorepo、pnpm管理组织项目。整体都使用TS。

两台设备之间怎么进行p2p连接

简单来讲就是客户端将自身的局域网的IP映射到所在公网IP上，局域网中不同IP映射到公网上的端口是不同的。需要通信的两台设备就是用映射后的公网IP+端口进行通信。

两台设备获取到对方的网络信息才能够进行通信，信令服务器就是用来交换这些信息的。

但是并不是每次两个设备之间都能建立p2p连接，这个时候就需要一个中转服务，用于转发不能直接进行p2p连接的设备之间的数据传输。

WebRTC

WebRTC允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。

我们来看一下WebRTC具体是怎么建立连接的

1. 首先创建一个本地RTCPeerConnection用于p2p连接。

2. 创建一个RTCDataChannel作为sendChannel用于发送数据到远端。

3. 本地调用createOffer创建一个offer，将创建好的offer设置为localDescription。然后再将offer发送到远端。

4. 当远端收到offer后，创建一个远端的RTCPeerConnection，并将收到的offer设置为remoteDescription。给创建好的RTCPeerConnection添加一个dataChannel事件，在连接建立之后，状态变为open，dataChannel事件将会被触发，我们将event。channel作为recieveChannel。

5. 给远端的receiveChannel添加message事件，这样当本地sendChannel发送数据时，远端的receiveChannel的message事件就会被触发。

6. 远端调用createAnswer创建一个answer，将创建好的answer设置为localDescription，并且将answer发送给本地。

7. 本地将收到的远端返回的answer设置为remoteDescription。

8. 连接建立后。本地调用sendChannel发送数据，远端在receiveChannel的message事件处理接受到的数据。

本地和远端之间offer、answer的传递需要使用信令服务器中转，我们使用socket.io来完成。

完成后的效果

具体代码可见 https://github.com/rocktodog/webrtc-p2p