WebRTC 教程四: WebRTC聊天室设计和搭建
这篇文章主要介绍了 WebRTC 聊天室设计和搭建,主要包括信令服务器及客户端网页设计。
WebRTC 教程一:WebRTC信令、架构和 API 入门
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)↓↓↓↓↓↓见下面↓↓文章底部点击免费领取↓↓
相关文章
- 使用 Docker 高效搭建本地开发环境(详细教程)
- 【玩转 Cloud Studio】记录Vue3+TS+Vite搭建教程
- Framework7 Vue 教程 入门 学习
- 在线客服系统源码 自适应手机移动端 支持多商家 带搭建教程
- 富士施乐DocuCentre S2110 驱动程序与下载-含打印机扫描套件+IP设置教程
- servu搭建ftp服务器教程_ftp端口映射
- Git教程
- linux搭建apache_plsql安装教程及配置
- [保姆级教程]SRS直播服务器搭建兼ffmpeg推流+obs在线直播+集成
- 三网码支付系统源码三网免挂有PC软件有云端源码+搭建教程
- zblog怎么搭建专题页?如何实现调用多个tag及tag所属文章的图文教程
- ServerMmon青蛇探针,一个超好用的服务器状态监控-搭建教程
- Linux jdk安装及环境变量配置教程(jdk-8u144-linux-x64.tar.gz)
- 搭建nextcloud私有云存储网盘的教程详解
- Centos定制rpm包、搭建yum仓库的教程
- 在centos7上搭建mysql主从服务器的方法(图文教程)
- SVN客户端入门使用教程详解编程语言
- MySQL操作快速入门:易语言教程(易语言教程之mysql)
- Oracle学习之路——电子书教程(oracle教程电子书)
- MySQL轻松上手一键搭建教程大揭秘(mysql一键搭建)