WebRTC 教程 (4)

来源：Engineering Semester 内容整理：李昊勇 这篇文章主要介绍了 WebRTC 聊天室设计和搭建，主要包括信令服务器及客户端网页设计。

WebRTC 教程（1）

WebRTC 教程（2）

WebRTC 教程 (3)

目录

• WebRTC 聊天室：设计
• WebRTC 聊天室：信令服务器
• WebRTC 聊天室：客户端部署

WebRTC 聊天室：设计

讲者首先介绍了要搭建 WebRTC 聊天室所需要的编程语言。对于客户端，当然应该部署在浏览器上，就选用 HTML 和 CSS 作为前端开发工具，如果想要更进一步的 UI 框架就可以选择 BootStrap，前端逻辑就可以使用 JavaScript。

对于剩下的服务端而言，信令服务器，根据前面提到的，我们可以使用 Node.JS 来作为服务端应用。

对于聊天室的一些功能，列举如下：

• 用户可以登录；
• 可以保持在线用户名单；
• 用户可以请求聊天；
• 所有用户都就绪后，就开始创建聊天室；
• 用户可以退出聊天室；
• 仅一对一聊天；
• 仅文本和表情；
• 用户可以退出。

讲者接着介绍了对于搭建聊天室，会需要用到哪些 WebRTC 功能或 API：

• 只要用户登录并请求聊天室，就会有一个 RTCPeerConnection；
• 对于数据传输，用户需要创建 RTCDataChannel；
• 用户需要通过信令服务器交换 sdp 请求和答复，以及 ICE 信息。

讲者设计了一个聊天室的简要流程框图：

其中可以看到，NodeJS WebSocket 正在监听用户请求并返还回应，这个 NodeJS 服务器的主要责任是支持 WebRTC 信令。

WebRTC 聊天室：信令服务器

讲者首先介绍了信令服务器的代码：

服务端会接收来自客户端的请求并返回答复。如果用户刷新了页面或是关闭了页面，服务器就会移除用户，如果该用户还希望继续使用应用则需要重新登陆一次。首先创建一个 WebSocket 从客户端监听请求。在线用户列表使用 map 来储存。客户端可以通过 WebSocket 来连接服务端，json 信息用于登录或登出。服务端首先要检查客户端的信息是 json 还是一个普通的信息，来判断是登录信息还是只是一个发送的信息内容。一旦连接建立好，客户端就需要把带有用户登录信息的 json 发送给服务端，服务端就会回复成功或失败。之后服务端就会记录在用户在线名单上，最后把在线用户名单发送给所有的在线用户。

如果一个用户请求聊天室，服务端首先检查用户是否存在登录，然后就需要检查另一个用户的用户状态，并返回成功或失败。基于此服务端会令用户发送请求给另一个用户。此后，用户会根据情况选择是否接收并返还答复，服务器再将答复转发给用户。答复类型包含如下：

• 如果用户的答复类型为"busy"，则服务器认为用户拒绝了请求。
• 如果答复类型为"answer"，则服务器认为用户准备好加入聊天室。
• 如果用户答复类型为"candidate"，服务器会接收用户发的 ICE 内容并转发给另一用户。
• 如果用户答复类型为"ready"，则服务器认为用户准备好了，服务器会向每个用户发送聊天室准备好的信息。在用户进入聊天室后，就会被服务器标记为"busy"，也就不能请求或答复聊天。
• 如果答复类型为"leave"，服务器就会了解此用户请求退出聊天室。
• 如果答复类型为"quit"，则服务器会认为此用户已退出并更新用户名单。

WebRTC 聊天室：客户端部署

讲者首先展示了这个客户端 demo，在两个页面中可以各使用一个用户名登录，之后可以选择用户并向其发送通话请求，另一方可以选择收到或拒绝，在通话时，可以点击右上角 leave 来退出聊天。

讲者会使用 HTML 和 JavaScript 来开发客户端应用。首先讲者介绍了 HTML 来写应用页面，写一个 HTML 页面，使用不同的分区来实现登录页面和通话页面。

讲者写了一个 html 文件并命名为 index.html，在页面中加入了 head 和 body 部分，可以在 head 部分导入所需要的包。在 body 部分，使用了三个分区来分别设计登录页面，用户页面和用户聊天页面。可以通过使用 JavaScript 来控制这些分区的显示。

然后讲者展示了 Javascript 完成的这个页面的逻辑设计：

在客户端，需要连接到信令服务器。当用户名输入完毕后，用户名就需要发送到服务器确认，如果登录成功，服务器会发送返回"server_login"，而如果服务器返回了"false"，则说明相同的用户名已经被使用，需要换一个名字。

如果一个用户登录了，则服务器需要向所有用户同步该用户的上线信息。如果一个用户点击了另一个用户，则需要向服务器发送建立聊天的请求"wang_to_call"，如果对端用户在线且有空，则会显示出请求聊天的页面，并建立 RTC 连接。为了建立 ICE 连接，首先需要添加 STUN 和 TURN 服务器名。之后就可以通过 RTCPeerConnection API 创建 WebRTC 连接。接下来通过 Create_DataChannel API 函数创建 RTCDataChannel，你可以根据需求来设置你的 DataChannel 参数。DataChannel 建立完毕后，还需要为其设置回调函数，如报错，收到信息，打开和关闭 channel 等。之后根据客户端请求建立 SDP 请求，最后创建 WebRTC 答复。最后在两个用户都发送了"ready"答复后，就可以开始创建聊天室，并将两个用户的状态都设置为"busy"。

http://mpvideo.qpic.cn/0bc3viaaqaaa24aix737ybrfbkwdbcvaacaa.f10002.mp4?dis_k=c20388669d891c0bf758b20720b98ec0&dis_t=1653387715&vid=wxv_2397994833299996672&format_id=10002&support_redirect=0&mmversion=false