我的動(dòng)機(jī) 我們的目標(biāo)是制作一個(gè)精簡(jiǎn)易用的點(diǎn)對(duì)點(diǎn)文件共享網(wǎng)絡(luò)應(yīng)用程序，將更多的精力投入到用戶體驗(yàn)與簡(jiǎn)單地辦事上。這個(gè)網(wǎng)絡(luò)應(yīng)用程序不只是針對(duì)特定的個(gè)人群體服務(wù)的，而是針對(duì)整個(gè)社區(qū)服務(wù)。 既然有這么多文件共享網(wǎng)站，為什么我們還要做這些呢？ 當(dāng)然，我也思考過(guò)這個(gè)問(wèn)題，但所有的這些網(wǎng)站都沒(méi)有真正地說(shuō)明過(guò)這些文件在哪里共享或存儲(chǔ)。這可能是一種隱私威脅，因?yàn)樵诋?dāng)前疫情的情況下，許多人或許經(jīng)常使用這些服務(wù)來(lái)共享文件甚至機(jī)密文件。使用安全的點(diǎn)對(duì)點(diǎn)連接和它的數(shù)據(jù)通道可以傳輸大量的文件，卻不需要存儲(chǔ)在任何服務(wù)器上，這使得它真正地結(jié)實(shí)與私有，因?yàn)橹挥羞B接的客戶端/對(duì)等端直接與中間服務(wù)器通信，不需要中間服務(wù)器進(jìn)行傳輸。 WebRTC使對(duì)等連接和數(shù)據(jù)通道成為可能。WebRTC基本上是一種相互通信與傳送數(shù)據(jù)的全球網(wǎng)絡(luò)方式，類(lèi)似于藍(lán)牙、NFC和WIFI數(shù)據(jù)共享。我們可以使用WebRTC實(shí)現(xiàn)跨平臺(tái)支持，因?yàn)樗腔诰W(wǎng)絡(luò)的。 讓我們更深入地研究WebRTC。 WebRTC

“WebRTC是一個(gè)免費(fèi)的開(kāi)放項(xiàng)目，通過(guò)簡(jiǎn)單的APIs為瀏覽器與移動(dòng)應(yīng)用程序提供實(shí)時(shí)通信（RTC）功能。WebRTC組件已經(jīng)進(jìn)行了優(yōu)化，以更好地滿足這一目的。” webrtc.org

好吧，假設(shè)，一個(gè)“點(diǎn)對(duì)點(diǎn)”關(guān)聯(lián)考慮兩部設(shè)備之間發(fā)送的直接信息，而不需要服務(wù)器保存這些信息。聽(tīng)起來(lái)這對(duì)我們的情況很理想對(duì)吧？不幸的是，這不是WebRTC工作的方式！

圖為使用WebRTC進(jìn)行數(shù)據(jù)傳輸 盡管WebRTC實(shí)現(xiàn)了點(diǎn)對(duì)點(diǎn)連接，但它確實(shí)需要一個(gè)稱(chēng)為信令服務(wù)器的服務(wù)器，該服務(wù)器用于共享有關(guān)預(yù)期將其相互連接的設(shè)備的數(shù)據(jù)。這些微妙之處可以通過(guò)任何傳統(tǒng)的信息共享技術(shù)來(lái)共享。WebSockets在這里受到青睞，因?yàn)樗鼫p少了在一個(gè)龐大的建立關(guān)聯(lián)的系統(tǒng)中共享這些額外數(shù)據(jù)的惰性。 簡(jiǎn)而言之，信令服務(wù)器幫助建立連接，然而，當(dāng)連接建立后，服務(wù)器將不再涉及相關(guān)設(shè)備之間共享的信息。 一年前，當(dāng)我開(kāi)始我的第一個(gè)WebRTC項(xiàng)目時(shí)，很難找到一個(gè)在“production”級(jí)別下工作得像樣的模型。后來(lái)我在網(wǎng)上找到了這個(gè)Youtube頻道編碼。開(kāi)發(fā)人員給出了關(guān)于可用于生產(chǎn)的WebRTC應(yīng)用程序的一些很好的例子。 WebRTC如何創(chuàng)建一個(gè)連接（技術(shù)） 好吧，沒(méi)有簡(jiǎn)單的方法來(lái)解釋這一點(diǎn)，但我的看法是，在網(wǎng)絡(luò)上所有數(shù)量可觀的設(shè)備中，無(wú)論如何都必須有一個(gè)設(shè)備通過(guò)產(chǎn)生信號(hào)來(lái)啟動(dòng)連接，并將其發(fā)送到信令服務(wù)器上。這個(gè)對(duì)等點(diǎn)被稱(chēng)為啟動(dòng)器，在simple-peer（此項(xiàng)目中使用的模塊）中，當(dāng)創(chuàng)建一個(gè)啟動(dòng)器對(duì)等點(diǎn)時(shí)，{initiator：true}會(huì)被傳遞給制作者/構(gòu)造函數(shù)。

如圖：信號(hào)服務(wù)器在運(yùn)行 當(dāng)我們得到對(duì)等點(diǎn)的信號(hào)信息時(shí)，這些信息應(yīng)該通過(guò)某種方式通過(guò)信令服務(wù)器發(fā)送到不同的集線器。不同的集線器獲取此信息并嘗試與發(fā)起程序建立關(guān)聯(lián)。在這個(gè)過(guò)程中，這些對(duì)等體同樣產(chǎn)生它們的信號(hào)信息并被發(fā)送給發(fā)起方。發(fā)起方獲取此信息并嘗試與其余對(duì)等方建立連接。 瞧！這些設(shè)備現(xiàn)在已經(jīng)連接起來(lái)，現(xiàn)在有一個(gè)數(shù)據(jù)通道，可以在沒(méi)有中間服務(wù)器的情況下共享信息。 盡量不要過(guò)分強(qiáng)調(diào)你無(wú)法理解WebRTC的上述工作方式以及簡(jiǎn)單對(duì)等點(diǎn)如何把它抽象化。當(dāng)我一開(kāi)始擺弄WebRTC時(shí)，它嚇了我一大跳。接下來(lái)的部分將對(duì)這一點(diǎn)進(jìn)行更簡(jiǎn)單和細(xì)致的解釋。 與WebRTC共享文件(使用simple-peer)

const express = require("express"); const http = require("http"); const app = express(); const server = http.createServer(app); const socket = require("socket.io"); const io = socket(server); const users = {}; const socketToRoom = {}; io.on('connection', socket => { socket.on("join room", roomID => { if (users[roomID]) { const length = users[roomID].length; if (length === 2) { socket.emit("room full"); return; } users[roomID].push(socket.id); } else { users[roomID] = [socket.id]; } socketToRoom[socket.id] = roomID; const usersInThisRoom = users[roomID].filter(id => id !== socket.id); socket.emit("all users", usersInThisRoom); }); socket.on("sending signal", payload => { io.to(payload.userToSignal).emit('user joined', { signal: payload.signal, callerID: payload.callerID }); }); socket.on("returning signal", payload => { io.to(payload.callerID).emit('receiving returned signal', { signal: payload.signal, id: socket.id }); }); socket.on('disconnect', () => { const roomID = socketToRoom[socket.id]; let room = users[roomID]; if (room) { room = room.filter(id => id !== socket.id); users[roomID] = room; socket.broadcast.emit('user left', socket.id); } }); }); server.listen(process.env.PORT || 8000, () => console.log('server is running on port 8000')); Websocket服務(wù)器JscodeReact前端編碼器

import React, { useEffect, useRef, useState } from "react";import io from "socket.io-client";import Peer from "simple-peer";import styled from "styled-components";import streamSaver from "streamsaver"; const Container = styled.div` padding: 20px; display: flex; height: 100vh; width: 90%; margin: auto; flex-wrap: wrap;`; const worker = new Worker("../worker.js"); const Room = (props) => { const [connectionEstablished, setConnection] = useState(false); const [file, setFile] = useState(); const [gotFile, setGotFile] = useState(false); const chunksRef = useRef([]); const socketRef = useRef(); const peersRef = useRef([]); const peerRef = useRef(); const fileNameRef = useRef(""); const roomID = props.match.params.roomID; useEffect(() => { socketRef.current = io.connect("/"); socketRef.current.emit("join room", roomID); socketRef.current.on("all users", users => { peerRef.current = createPeer(users[0], socketRef.current.id); }); socketRef.current.on("user joined", payload => { peerRef.current = addPeer(payload.signal, payload.callerID); }); socketRef.current.on("receiving returned signal", payload => { peerRef.current.signal(payload.signal); setConnection(true); }); socketRef.current.on("room full", () => { alert("room is full"); }) }, []); function createPeer(userToSignal, callerID) { const peer = new Peer({ initiator: true, trickle: false, }); peer.on("signal", signal => { socketRef.current.emit("sending signal", { userToSignal, callerID, signal }); }); peer.on("data", handleReceivingData); return peer; } function addPeer(incomingSignal, callerID) { const peer = new Peer({ initiator: false, trickle: false, }); peer.on("signal", signal => { socketRef.current.emit("returning signal", { signal, callerID }); }); peer.on("data", handleReceivingData); peer.signal(incomingSignal); setConnection(true); return peer; } function handleReceivingData(data) { if (data.toString().includes("done")) { setGotFile(true); const parsed = JSON.parse(data); fileNameRef.current = parsed.fileName; } else { worker.postMessage(data); } } function download() { setGotFile(false); worker.postMessage("download"); worker.addEventListener("message", event => { const stream = event.data.stream(); const fileStream = streamSaver.createWriteStream(fileNameRef.current); stream.pipeTo(fileStream); }) } function selectFile(e) { setFile(e.target.files[0]); } function sendFile() { const peer = peerRef.current; const stream = file.stream(); const reader = stream.getReader(); reader.read().then(obj => { handlereading(obj.done, obj.value); }); function handlereading(done, value) { if (done) { peer.write(JSON.stringify({ done: true, fileName: file.name })); return; } peer.write(value); reader.read().then(obj => { handlereading(obj.done, obj.value); }) } } let body; if (connectionEstablished) { body = (

); } else { body = (

Once you have a peer connection, you will be able to share files

); } let downloadPrompt; if (gotFile) { downloadPrompt = ( ); } return ( {body} {downloadPrompt} );}; export default Room; 在此Repo上找到整個(gè)代碼。如果你在瀏覽器中嘗試應(yīng)用上述代碼并選擇一些圖片文件（最好小于100KB），它會(huì)立即下載這些圖片文件。這是因?yàn)檫@個(gè)對(duì)等點(diǎn)位于一個(gè)類(lèi)似的瀏覽器中，而發(fā)送方處于提示狀態(tài)。 傳送和獲取的信息的大小是相等的。這表明我們可以選擇一次性移動(dòng)整個(gè)記錄！ 為什么使用數(shù)據(jù)緩沖區(qū)而不是blob？ 在我們過(guò)去的代碼中，如果我們選擇了一個(gè)巨大的文件（大于100KB），那么文檔很可能不會(huì)被發(fā)送，這是WebRTC通道的某些約束的直接結(jié)果。

如圖：數(shù)組緩沖區(qū)漫畫(huà)插圖(mozilla.org) 每個(gè)數(shù)組緩沖區(qū)一次只能有16KB的限制。簡(jiǎn)而言之，這意味著我們必須將文檔劃分成小數(shù)組緩沖區(qū)。 小文件可以通過(guò)WebRTC一次性發(fā)處，然而，對(duì)于大文檔，明智的做法是將文件隔離到較小的數(shù)組緩沖區(qū)中，并同樣發(fā)送每個(gè)部分。ArrayBuffer和Blob對(duì)象都有削減容量，這使得此過(guò)程更加簡(jiǎn)單。為此，如果你仔細(xì)查看代碼，你會(huì)發(fā)現(xiàn)我們使用了一個(gè)名為stream saver的模塊，它可以將數(shù)組緩沖區(qū)轉(zhuǎn)換回blob。 筆記 因?yàn)?a href="http://www.www27dydycom.cn/v/tag/852/" target="_blank">javascript是單線程的。處理大量數(shù)組緩沖區(qū)可能導(dǎo)致漂亮的UI無(wú)法響應(yīng)。為了解決這個(gè)問(wèn)題，我們將使用服務(wù)工作人員。一個(gè)服務(wù)工作人員是瀏覽器在后臺(tái)運(yùn)行的腳本，是與Web頁(yè)面分離的，這為不需要Web頁(yè)面或用戶交互的特性打開(kāi)大門(mén)。

let array = [];self.addEventListener("message", event => { if (event.data === "download") { const blob = new Blob(array); self.postMessage(blob); array = []; } else if (event.data === "abort") { array = []; } else { array.push(event.data); }}) 在服務(wù)工作程序中處理數(shù)組緩沖區(qū) 將文件劃分為數(shù)組緩沖區(qū)的優(yōu)點(diǎn) 雖然它可能會(huì)感覺(jué)分隔文件只是一些額外的代碼，并且會(huì)讓東西相互糾纏，但我們得到以下好處，并且可以幫助改進(jìn)我們的文檔共享應(yīng)用程序。

跨平臺(tái)支持（由mozilla.org提供說(shuō)明）

支持幾乎所有的瀏覽器

支持龐大的文檔大小——正如前面提到的，這是我們?yōu)槭裁匆獙?shí)現(xiàn)它的基本解釋。

一個(gè)更好的方法來(lái)破譯所發(fā)送信息的度量——通過(guò)在緩沖區(qū)中發(fā)送一個(gè)記錄，我們現(xiàn)在可以顯示信息，例如，發(fā)送的文檔的級(jí)別，發(fā)送記錄的速度等等。

識(shí)別未完成發(fā)送的文件——在無(wú)法完全發(fā)送文件的情況下，現(xiàn)在能夠以不同的方式獲取和處理文件。

結(jié)論 由于我們有一個(gè)使用WebRTC的文檔直接共享程序，而且它還利用了ArrayBuffer，我們現(xiàn)在應(yīng)該開(kāi)始考慮為應(yīng)用程序的生產(chǎn)做準(zhǔn)備的東西了。這些細(xì)節(jié)需要更多的探索，而不僅僅是遵循一個(gè)直接的教程。 可以補(bǔ)充的更多內(nèi)容：

信令服務(wù)器（STUN和TURN服務(wù)器）。

使多個(gè)對(duì)等連接可拓展。

當(dāng)WebRTC不能工作時(shí)才用的一種混合共享方式。

提高傳輸效率和速度。

我希望我已經(jīng)提供了足夠的信息讓你們開(kāi)始使用WebRTC應(yīng)用程序。