WebRTC 教程四： WebRTC聊天室设计和搭建

这篇文章主要介绍了 WebRTC 聊天室设计和搭建，主要包括信令服务器及客户端网页设计。

WebRTC 教程一：WebRTC信令、架构和 API 入门

WebRTC 教程二：WebRTC API 和 Leak

WebRTC 教程三：WebRTC特性，调试方法以及相关服务器搭建方法

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"，则服务器会认为此用户已退出并更新用户名单。
本文福利，免费领取C++音视频学习资料包、技术视频/代码，内容包括（音视频开发，面试题，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，编解码，推拉流，srs）↓↓↓↓↓↓见下面↓↓文章底部点击免费领取↓↓

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"。

本文福利，免费领取C++音视频学习资料包、技术视频/代码，内容包括（音视频开发，面试题，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，编解码，推拉流，srs）↓↓↓↓↓↓见下面↓↓文章底部点击免费领取↓↓