WebRTC 教程四： WebRTC聊天室設(shè)計(jì)和服務(wù)器搭建

時(shí)間：2023-07-22 09:15:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-22 09:15:02 來源：網(wǎng)站運(yùn)營(yíng)

WebRTC 教程四： WebRTC聊天室設(shè)計(jì)和服務(wù)器搭建：

這篇文章主要介紹了 WebRTC 聊天室設(shè)計(jì)和搭建，主要包括信令服務(wù)器及客戶端網(wǎng)頁(yè)設(shè)計(jì)。

附上教程（1）：WebRTC信令、架構(gòu)和 API

附上教程（2）：WebRTC API和Leak

附上教程（3）：WebRTC特性，調(diào)試方法以及相關(guān)服務(wù)器搭建方法

目錄

• WebRTC 聊天室：設(shè)計(jì)
• WebRTC 聊天室：信令服務(wù)器
• WebRTC 聊天室：客戶端部署

WebRTC 聊天室：設(shè)計(jì)

講者首先介紹了要搭建 WebRTC 聊天室所需要的編程語言。對(duì)于客戶端，當(dāng)然應(yīng)該部署在瀏覽器上，就選用 HTML 和 CSS 作為前端開發(fā)工具，如果想要更進(jìn)一步的 UI 框架就可以選擇 BootStrap，前端邏輯就可以使用 JavaScript。

對(duì)于剩下的服務(wù)端而言，信令服務(wù)器，根據(jù)前面提到的，我們可以使用 Node.JS 來作為服務(wù)端應(yīng)用。

對(duì)于聊天室的一些功能，列舉如下：

• 用戶可以登錄；
• 可以保持在線用戶名單；
• 用戶可以請(qǐng)求聊天；
• 所有用戶都就緒后，就開始創(chuàng)建聊天室；
• 用戶可以退出聊天室；
• 僅一對(duì)一聊天；
• 僅文本和表情；
• 用戶可以退出。

講者接著介紹了對(duì)于搭建聊天室，會(huì)需要用到哪些 WebRTC 功能或 API：

• 只要用戶登錄并請(qǐng)求聊天室，就會(huì)有一個(gè) RTCPeerConnection；
• 對(duì)于數(shù)據(jù)傳輸，用戶需要?jiǎng)?chuàng)建 RTCDataChannel；
• 用戶需要通過信令服務(wù)器交換 sdp 請(qǐng)求和答復(fù)，以及 ICE 信息。

講者設(shè)計(jì)了一個(gè)聊天室的簡(jiǎn)要流程框圖：

其中可以看到，NodeJS WebSocket 正在監(jiān)聽用戶請(qǐng)求并返還回應(yīng)，這個(gè) NodeJS 服務(wù)器的主要責(zé)任是支持 WebRTC 信令。

WebRTC 聊天室：信令服務(wù)器

講者首先介紹了信令服務(wù)器的代碼：

服務(wù)端會(huì)接收來自客戶端的請(qǐng)求并返回答復(fù)。如果用戶刷新了頁(yè)面或是關(guān)閉了頁(yè)面，服務(wù)器就會(huì)移除用戶，如果該用戶還希望繼續(xù)使用應(yīng)用則需要重新登陸一次。首先創(chuàng)建一個(gè) WebSocket 從客戶端監(jiān)聽請(qǐng)求。在線用戶列表使用 map 來儲(chǔ)存?？蛻舳丝梢酝ㄟ^ WebSocket 來連接服務(wù)端，json 信息用于登錄或登出。服務(wù)端首先要檢查客戶端的信息是 json 還是一個(gè)普通的信息，來判斷是登錄信息還是只是一個(gè)發(fā)送的信息內(nèi)容。一旦連接建立好，客戶端就需要把帶有用戶登錄信息的 json 發(fā)送給服務(wù)端，服務(wù)端就會(huì)回復(fù)成功或失敗。之后服務(wù)端就會(huì)記錄在用戶在線名單上，最后把在線用戶名單發(fā)送給所有的在線用戶。

如果一個(gè)用戶請(qǐng)求聊天室，服務(wù)端首先檢查用戶是否存在登錄，然后就需要檢查另一個(gè)用戶的用戶狀態(tài)，并返回成功或失敗。基于此服務(wù)端會(huì)令用戶發(fā)送請(qǐng)求給另一個(gè)用戶。此后，用戶會(huì)根據(jù)情況選擇是否接收并返還答復(fù)，服務(wù)器再將答復(fù)轉(zhuǎn)發(fā)給用戶。答復(fù)類型包含如下：

• 如果用戶的答復(fù)類型為"busy"，則服務(wù)器認(rèn)為用戶拒絕了請(qǐng)求。
• 如果答復(fù)類型為"answer"，則服務(wù)器認(rèn)為用戶準(zhǔn)備好加入聊天室。
• 如果用戶答復(fù)類型為"candidate"，服務(wù)器會(huì)接收用戶發(fā)的 ICE 內(nèi)容并轉(zhuǎn)發(fā)給另一用戶。
• 如果用戶答復(fù)類型為"ready"，則服務(wù)器認(rèn)為用戶準(zhǔn)備好了，服務(wù)器會(huì)向每個(gè)用戶發(fā)送聊天室準(zhǔn)備好的信息。在用戶進(jìn)入聊天室后，就會(huì)被服務(wù)器標(biāo)記為"busy"，也就不能請(qǐng)求或答復(fù)聊天。
• 如果答復(fù)類型為"leave"，服務(wù)器就會(huì)了解此用戶請(qǐng)求退出聊天室。
• 如果答復(fù)類型為"quit"，則服務(wù)器會(huì)認(rèn)為此用戶已退出并更新用戶名單。

LinuxC++音視頻開發(fā)視頻：免費(fèi)】FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級(jí)開發(fā)
【文章福利】：音視頻學(xué)習(xí)資料、視頻和學(xué)習(xí)路線圖資料、以及面試題（資料包括C/C++，Linux，F(xiàn)Fmpeg webRTC rtmp hls rtsp ffplay srs 等），免費(fèi)分享，有需要的可以加君羊領(lǐng)取哦！~學(xué)習(xí)交流君羊994289133點(diǎn)擊加入領(lǐng)取資料

WebRTC 聊天室：客戶端部署

講者首先展示了這個(gè)客戶端 demo，在兩個(gè)頁(yè)面中可以各使用一個(gè)用戶名登錄，之后可以選擇用戶并向其發(fā)送通話請(qǐng)求，另一方可以選擇收到或拒絕，在通話時(shí)，可以點(diǎn)擊右上角 leave 來退出聊天。

講者會(huì)使用 HTML 和 JavaScript 來開發(fā)客戶端應(yīng)用。首先講者介紹了 HTML 來寫應(yīng)用頁(yè)面，寫一個(gè) HTML 頁(yè)面，使用不同的分區(qū)來實(shí)現(xiàn)登錄頁(yè)面和通話頁(yè)面。

講者寫了一個(gè) html 文件并命名為 index.html，在頁(yè)面中加入了 head 和 body 部分，可以在 head 部分導(dǎo)入所需要的包。在 body 部分，使用了三個(gè)分區(qū)來分別設(shè)計(jì)登錄頁(yè)面，用戶頁(yè)面和用戶聊天頁(yè)面?？梢酝ㄟ^使用 JavaScript 來控制這些分區(qū)的顯示。

然后講者展示了 Javascript 完成的這個(gè)頁(yè)面的邏輯設(shè)計(jì)：

在客戶端，需要連接到信令服務(wù)器。當(dāng)用戶名輸入完畢后，用戶名就需要發(fā)送到服務(wù)器確認(rèn)，如果登錄成功，服務(wù)器會(huì)發(fā)送返回"server_login"，而如果服務(wù)器返回了"false"，則說明相同的用戶名已經(jīng)被使用，需要換一個(gè)名字。

如果一個(gè)用戶登錄了，則服務(wù)器需要向所有用戶同步該用戶的上線信息。如果一個(gè)用戶點(diǎn)擊了另一個(gè)用戶，則需要向服務(wù)器發(fā)送建立聊天的請(qǐng)求"wang_to_call"，如果對(duì)端用戶在線且有空，則會(huì)顯示出請(qǐng)求聊天的頁(yè)面，并建立 RTC 連接。為了建立 ICE 連接，首先需要添加 STUN 和 TURN 服務(wù)器名。之后就可以通過 RTCPeerConnection API 創(chuàng)建 WebRTC 連接。接下來通過 Create_DataChannel API 函數(shù)創(chuàng)建 RTCDataChannel，你可以根據(jù)需求來設(shè)置你的 DataChannel 參數(shù)。DataChannel 建立完畢后，還需要為其設(shè)置回調(diào)函數(shù)，如報(bào)錯(cuò)，收到信息，打開和關(guān)閉 channel 等。之后根據(jù)客戶端請(qǐng)求建立 SDP 請(qǐng)求，最后創(chuàng)建 WebRTC 答復(fù)。最后在兩個(gè)用戶都發(fā)送了"ready"答復(fù)后，就可以開始創(chuàng)建聊天室，并將兩個(gè)用戶的狀態(tài)都設(shè)置為"busy"。