使用WebRTC傳輸數(shù)據(jù)
因為家里的手機、電腦設(shè)備比較多，windows，mac，iOS，Android等等，經(jīng)常需要在各個設(shè)備之間傳輸文件，不是每個設(shè)備上都有微信，文件傳輸這些軟件，但是每個設(shè)備上都有瀏覽器，所以做了一個簡單基于webrtc進行文件傳輸?shù)膚eb app。
前后端其實完全可以不用任何框架，但是本著學(xué)習的目的，小項目也鋪大點，前端改用vue3+vite+tailwind+antdv。后端使用nestjs。使用monorepo、pnpm管理組織項目。整體都使用TS。
兩臺設(shè)備之間怎么進行p2p連接
簡單來講就是客戶端將自身的局域網(wǎng)的IP映射到所在公網(wǎng)IP上，局域網(wǎng)中不同IP映射到公網(wǎng)上的端口是不同的。需要通信的兩臺設(shè)備就是用映射后的公網(wǎng)IP+端口進行通信。
兩臺設(shè)備獲取到對方的網(wǎng)絡(luò)信息才能夠進行通信，信令服務(wù)器就是用來交換這些信息的。
但是并不是每次兩個設(shè)備之間都能建立p2p連接，這個時候就需要一個中轉(zhuǎn)服務(wù)，用于轉(zhuǎn)發(fā)不能直接進行p2p連接的設(shè)備之間的數(shù)據(jù)傳輸。
WebRTC
WebRTC允許網(wǎng)絡(luò)應(yīng)用或者站點，在不借助中間媒介的情況下，建立瀏覽器之間點對點（Peer-to-Peer）的連接，實現(xiàn)視頻流和（或）音頻流或者其他任意數(shù)據(jù)的傳輸。WebRTC 包含的這些標準使用戶在無需安裝任何插件或者第三方的軟件的情況下，創(chuàng)建點對點（Peer-to-Peer）的數(shù)據(jù)分享和電話會議成為可能。
我們來看一下WebRTC具體是怎么建立連接的
首先創(chuàng)建一個本地
RTCPeerConnection用于p2p連接。創(chuàng)建一個RTCDataChannel作為sendChannel用于發(fā)送數(shù)據(jù)到遠端。
本地調(diào)用createOffer創(chuàng)建一個offer，將創(chuàng)建好的offer設(shè)置為localDescription。然后再將offer發(fā)送到遠端。當遠端收到offer后，創(chuàng)建一個遠端的RTCPeerConnection，并將收到的offer設(shè)置為remoteDescription。給創(chuàng)建好的RTCPeerConnection添加一個dataChannel事件，在連接建立之后，狀態(tài)變?yōu)閛pen，dataChannel事件將會被觸發(fā)，我們將event。channel作為recieveChannel。給遠端的receiveChannel添加message事件，這樣當本地sendChannel發(fā)送數(shù)據(jù)時，遠端的receiveChannel的message事件就會被觸發(fā)。遠端調(diào)用createAnswer創(chuàng)建一個answer，將創(chuàng)建好的answer設(shè)置為localDescription，并且將answer發(fā)送給本地。本地將收到的遠端返回的answer設(shè)置為remoteDescription。連接建立后。本地調(diào)用sendChannel發(fā)送數(shù)據(jù)，遠端在receiveChannel的message事件處理接受到的數(shù)據(jù)。
本地和遠端之間offer、answer的傳遞需要使用信令服務(wù)器中轉(zhuǎn)，我們使用socket.io來完成。
完成后的效果
具體代碼可見 https://github.com/rocktodog/webrtc-p2p
