前言
主要介绍了 WebRTC 实时通信技术的前端应用，包括其核心概念、连接方法、连接流程以及如何搭建一个简易的信令服务器。今日前端早读课文章由 @苏璇分享，公号：大转转 FE 授权。
正文从这开始～～
继【第3375期】WebRTC 探索：前端视角下的实时通信解析（上）一文之后，我们已经对 WebRTC 的基础概念和 API 有了初步的了解。在本文中，我们将进一步挖掘 WebRTC 的核心技术，探索其在前端开发中的应用潜力。随着实时通信技术的飞速发展，WebRTC 已经成为现代网络应用的关键技术之一。接下来，让我们深入探讨 WebRTC 的核心技术及其实现细节。
1、WebRTC 连接：核心概念与实现
在 WebRTC 中，PeerConnection 是实现点对点（P2P）视频通话的核心 。要全面理解 PeerConnection 的工作原理，首先需要掌握一些关键概念和连接方式。以下是这些核心术语的解释，以及在不同网络环境下建立 WebRTC 连接的方式。
1.1 核心概念
理解 PeerConnection 的运作需要了解以下关键术语：
信令（Signaling）：在 WebRTC 中，信令是建立连接前交换控制信息的过程，包括 SDP 的交换。
SDP（Session Description Protocol）：会话描述协议，用于在通信双方之间交换多媒体会话的参数。
ICE（Interactive Connectivity Establishment）：是一种网络协议，用于在网络 NAT（Network Address Translation，网络地址转换）或防火墙之后的用户之间建立直接的点对点（P2P）连接。ICE 的主要目标是简化在复杂网络环境中的连接建立过程。
Candidate：指的是一种网络候选描述，它提供了一种可能的网络路径，用于尝试在两个 PeerConnection 之间建立连接。每个 WebRTC PeerConnection 都会生成多个 Candidate，这些 Candidate 包含了不同的网络接口信息，比如 IP 地址和端口号，以及可能用于连接的其他网络参数。
Offer 和 Answer：在 SDP 交换过程中，发起方创建一个 "offer" 描述其媒体能力，接收方根据 offer 创建一个 "answer"
总结：
SDP 是信令过程中交换的会话描述数据格式，用于确定多媒体会话的参数。
信令是 WebRTC 连接建立前的控制信息交换机制，涉及 SDP 的创建和交换。
ICE 协议通过收集和测试网络 Candidate 来实现 NAT 穿透，以建立点对点连接。
Offer 和 Answer 是 SDP 交换的一部分，分别由发起方和接收方创建，以协商会话的媒体参数。
1.2 PeerConnection 的核心方法和事件
PeerConnection 是 WebRTC 中用于建立和维护点对点连接的关键 API。以下是其核心方法和事件：
核心方法：
addIceCandidate ()：添加 ICE 候选信息，即双方协商信息，持续整个建立通信过程，直至无更多候选信息。
addTrack ()：添加音频或视频轨道。
createAnswer ()：创建应答信令。
createDataChannel ()：创建数据通道，建立 WebRTC 通信后，可直接 p2p 发送文本消息，无需中转服务器。
createOffer ()：创建初始信令。
setRemoteDescription ()：设置远端描述信息。
setLocalDescription ()：设置本地描述信息。
核心事件：
ondatachannel：监听数据通道的创建及数据传输事件。
ontrack：监听远程媒体轨道，即远端音视频流。
onicecandidate：监听 ICE 候选信息的生成和传输。
通过这些方法和事件，PeerConnection 可以高效地建立和管理 P2P 连接，实现媒体流的传输以及数据通道的管理。通过 信令 机制，客户端 A 和客户端 B 交换 SDP 和 ICE 候选信息，完成连接的建立和维护。
1.3 WebRTC 的连接方式
在建立 WebRTC 连接之前，客户端 A 和客户端 B 通常需要通过信令服务器交换必要的连接信息。信令服务器负责在客户端之间传递连接所需的信息，包括 SDP（Session Description Protocol）和 ICE（Interactive Connectivity Establishment）候选信息。根据不同的网络环境，WebRTC 选择合适的连接方式来建立和维护点对点连接。
1.3.1 通过本地网络直接连接
当两个设备位于同一个局域网内（例如家庭网络或办公室网络）时，它们可以直接通过对等连接进行通信，而无需经过中间服务器。这种连接方式充分利用了本地网络的低延迟和高速特性，实现快速的数据传输和实时通信。
1.3.2 通过公共 IP 地址 Internet 直接连接
当两个设备不在同一局域网内时，它们需要通过公共 IP 地址进行互相访问。设备之间的直接连接依赖于公共 IP 地址，但设备通常不知道它们在互联网上的公共 IP 地址。因此，需要使用 STUN 服务器（Session Traversal Utilities for NAT）来帮助设备发现自己的公共 IP 地址，从而建立连接。
STUN 服务器 的主要作用是：
发现公共 IP 地址并协助 NAT 穿透：STUN 服务器帮助设备识别它们在互联网中的公共 IP 地址，尤其是在 NAT 环境下。这一过程有助于设备之间建立点对点连接，从而实现网络通信。
公共 IP 直接连接
然而，即使有 STUN 服务器的帮助，这种连接方式仍可能受到 NAT 和 防火墙 的限制：
1.3.3 通过 TURN 服务器路由连接媒体
在某些情况下，P2P 连接可能会失败，尤其是当 NAT 和防火墙设备不允许直接流量时。此时，TURN 服务器（Traversal Using Relays around NAT）可以作为中间服务器来转发数据。
TURN 服务器路由连接
TURN 服务器 的作用是：
虽然 TURN 需要额外的带宽成本，但它确保了在 P2P 连接不可用时，音视频数据仍能通过服务器转发，从而保证通信的连续性。
1.4 信令服务器与 STUN/TURN 服务器的协作
在 WebRTC 会话中，信令服务器负责交换建立连接所需的信息，包括 SDP 和 ICE 候选信息。STUN 服务器帮助发现公共 IP 地址，TURN 服务器在 P2P 连接失败时提供备选路径。通过理解这些连接方式和信令过程，我们可以更好地应对不同网络环境下的通信挑战，优化 WebRTC 的实时通信体验。
2、WebRTC p2p 会话连接流程
在深入探索了 PeerConnection 的概念之后，我们现在转向 WebRTC 技术的核心 —— 会话的建立过程。WebRTC 的 P2P 架构允许在用户之间直接建立通信，无需经过中心服务器。以下是对 WebRTC 呼叫流程的详细描述，它将揭示如何从初始设置到成功建立连接的每一个步骤：
WebRTC 呼叫流程：
1、连接信令服务器
2、创建 RTCPeerConnection 对象
3、创建并发送 SDP Offer
Peer A 调用 createOffer 方法生成一个会话描述（SDP Offer），描述了它希望如何进行通信，例如使用的编解码器、带宽等。
调用 setLocalDescription 方法设置本地会话描述。
通过信令服务器将 SDP Offer 发送给 Peer B。
4、Peer B 处理 SDP Offer
Peer B 接收到 SDP Offer 后，通过 setRemoteDescription 方法设置远程会话描述。
接着，Peer B 创建自己的 RTCPeerConnection 对象，并创建 SDP Answer 响应 Peer A 的 Offer。
调用 setLocalDescription 设置本地会话描述。
通过信令服务器将 SDP Answer 发送回 Peer A。
5、Peer A 处理 SDP Answer
6、交换 ICE 候选信息
Peer A 和 Peer B 各自开始收集 ICE 候选信息，这些信息描述了可能用于建立连接的网络路径。
收集完毕后，双方通过信令服务器交换 ICE 候选信息。
接收到 ICE 候选后，使用 addIceCandidate 方法将其添加到 RTCPeerConnection 对象中。
7、建立 P2P 连接
WebRTC 呼叫流程是一个涉及信令交换、SDP 协商、ICE 候选收集和交换的复杂过程。通过这个流程，WebRTC 能够在不同设备之间建立起安全的点对点媒体流传输，实现高质量的实时通信。
请注意，实际的 WebRTC 应用可能还需要考虑更多细节，例如信令的具体格式、ICE 候选的类型和优先级、以及如何在实际应用中处理各种网络条件。
3、搭建一个简易的信令服务器
在 WebRTC 的应用中，信令服务器负责在两个客户端之间交换控制信息以建立和维护点对点连接。虽然信令服务器本质上只是一个消息转发器，但它对 WebRTC 的正常运行至关重要。WebRTC 并没有提供信令传递机制，你可以使用任何你喜欢的方式如 WebSocket 或者 XMLHttpRequest 等等，来交换彼此的令牌信息。接下来，我们将用 WebSocket 来设计并实现一个简易版信令服务器。
【第1882期】基于Unix Socket的可靠Node.js HTTP代理实现（支持WebSocket协议）
3.1 信令服务器设计
信令服务器的核心功能包括：
1、用户连接管理：
2、信息转发：
信令服务器通过 WebSocket 实时处理这些信息，确保双方能够顺利建立和维护 WebRTC 连接。
3.2 示例代码
以下是一个基于 Node.js 和 WebSocket 的信令服务器示例代码：
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
// 创建 Express 应用
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
// 提供静态文件服务（例如 HTML 文件）
app.use(express.static('public'));
// 监听 HTTP 请求并发送主页面
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// 处理 WebSocket 连接
io.on('connection', (socket) => {
console.log('A user connected');
// 处理 SDP Offer 事件
socket.on('offer', (data) => {
// data 包含目标客户端 ID 和 SDP Offer
const { to, offer } = data;
// 将 SDP Offer 转发给目标客户端
socket.to(to).emit('offer', { offer, from: socket.id });
});
// 处理 SDP Answer 事件
socket.on('answer', (data) => {
// data 包含目标客户端 ID 和 SDP Answer
const { to, answer } = data;
// 将 SDP Answer 转发给目标客户端
socket.to(to).emit('answer', { answer, from: socket.id });
});
// 处理 ICE 候选信息事件
socket.on('ice-candidate', (data) => {
// data 包含目标客户端 ID 和 ICE 候选信息
const { to, candidate } = data;
// 将 ICE 候选信息转发给目标客户端
socket.to(to).emit('ice-candidate', { candidate, from: socket.id });
});
// 处理客户端断开连接事件
socket.on('disconnect', () => {
console.log('A user disconnected');
});
});
// 启动服务器并监听 3000 端口
server.listen(3000, () => {
console.log('Server is running on port 3000');
});
3.3 信令服务器功能解析
用户管理
信令转发
SDP Offer：客户端 A 发起连接请求并生成初始的 SDP Offer，服务器负责将该 Offer 转发给客户端 B。
SDP Answer：客户端 B 接收到 Offer 后，生成对应的 SDP Answer，并通过服务器将其返回给客户端 A。
ICE 候选信息：在连接过程中，双方通过交换 ICE 候选信息寻找最佳网络路径，服务器则充当中间人，将这些候选信息在客户端之间进行传递。
通过上述步骤，我们成功搭建了一个基础的信令服务器，它在 WebRTC 点对点连接中起到了核心作用，负责信令的处理与转发，包括 SDP 和 ICE 候选信息。这一基础实现为 WebRTC 的 P2P 通信提供了坚实的保障。信令服务器的设计也具有高度的灵活性，可以根据实际需求进行扩展，满足更多样化的功能或更复杂的应用场景。
【第3260期】WebSockets、服务器推送事件、Long-Polling、WebRTC、WebTransport对比
4、小结
这篇文章带你穿越了 WebRTC 的核心世界。我们从 WebRTC 连接的基本概念出发，逐步揭开了 P2P 会话连接的流程奥秘，并深入解析了信令和 ICE 如何在幕后协作，促成实时通信的顺利进行。为了将理论付诸实践，我们还搭建了一个简易的信令服务器，铺设了 WebRTC 连接的桥梁。
通过这些环节，你不仅掌握了 WebRTC 的核心原理，还收获了构建实时通信服务的实际经验。
下一篇文章将是实践的重头戏，我们会基于 WebRTC 实现一个 1v1 音视频通话的 demo，把理论变成生动的实际应用。期待与你在下一篇文章中继续探讨 WebRTC 的精彩世界。
关于本文
作者：@苏璇
原文：https://mp.weixin.qq.com/s/OcGmj-n6sZLWsJs7cfJMiA
这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。
