您曾經(jīng)在iPhone或Mac上使用過AirDrop嗎？

好的，如果還沒有，您是否可以想象一下，只需按一下按鈕就可以在手機或筆記本電腦之間無縫共享文件？

由Robin Linus創(chuàng)建的SnapDrop.net允許您使用瀏覽器在任何設(shè)備之間直接共享文件。不管是在iPhone和Android還是裝有PC的平板電腦之間。

無需上傳到云或從云下載。?

那么到底是怎么工作的呢？

在逐行分析之后，我找出了它的出色架構(gòu)。在這篇文章中，我將向您展示其工作原理。

使用這項新技術(shù)

了解這項技術(shù)可以使您與尚未探索其功能的其他工程師區(qū)分開。

WebRTC（Web實時通信）是一項了不起的技術(shù)，僅在幾年前才問世。其數(shù)據(jù)通道使SnapDrop可以將字節(jié)（甚至是音頻和視頻?。┲苯訌囊粋€對等方發(fā)送到另一對等方。

（將對等設(shè)備當(dāng)作手機或筆記本電腦之類的設(shè)備）

但是，WebRTC無法在沒有幫助的情況下連接兩個用戶。它需要一個信令服務(wù)器，換句話說，它需要一些東西來發(fā)現(xiàn)其他對等節(jié)點并顯示如何連接。

沒有此功能就無法使用WebRTC

ICE（交互式連接建立）是計算機在沒有公共IP地址的情況下如何從Internet到其自身繪制地圖的方法。這是由于路由器和計算機之間發(fā)生了NAT（網(wǎng)絡(luò)地址轉(zhuǎn)換）。

制作完地圖后，您將為這兩種設(shè)備找到某種相互共享其地圖的方法。SnapDrop通過NodeJS服務(wù)器執(zhí)行此操作，該服務(wù)器使用WebSockets（另一個很棒的協(xié)議）在每個對等方之間進行通信。

現(xiàn)在您可能正在考慮，這安全嗎？

好的，但是您如何確保該東西呢？

默認(rèn)情況下，WebRTC在傳輸中會加密其數(shù)據(jù)。太酷了，除了您之外，其他所有人也可能不想與隨機的人共享文件。

SnapDrop僅在具有相同IP地址的兩臺計算機之間共享ICE，這意味著它們位于同一網(wǎng)絡(luò)/ WiFi中。

它通過為每個IP地址創(chuàng)建房間來實現(xiàn)此目的，并通過生成唯一ID來區(qū)分設(shè)備。

/* Code to handle joining peers from the server */_joinRoom(peer) {
    // if room doesn't exist, create it
    if (!this._rooms[peer.ip]) {
      this._rooms[peer.ip] = {};
    }
    // add this peer to room
    this._rooms[peer.ip][peer.id] = peer;}

您可能不希望在公共wifi上使用此應(yīng)用，因為那樣任何人都可以將文件發(fā)送給您。但是在這種大流行中，無論如何誰要出去？♀?

上面的代碼片段通過將對等體存儲在服務(wù)器類的一個對象中而做出了一個有趣的選擇。通常，您希望使用數(shù)據(jù)庫，但這可能是為了簡化操作，并且該應(yīng)用程序可能沒有很多流量。

熟悉的用戶界面和用戶體驗

樣式幾乎與AirDrop一樣。每個設(shè)備都有一個有趣的名稱和一個圖標(biāo)，以幫助區(qū)分每個對等設(shè)備。不僅如此，它還有一個漸進式Web應(yīng)用程序，它提供了一些不錯的功能，例如：

• 感覺像本地應(yīng)用程序

• 通知事項

• 實時更新

如果設(shè)備不支持WebRTC怎么辦？

到目前為止，大多數(shù)設(shè)備/瀏覽器都支持WebRTC，但如果不支持WebRTC，則SnapDrop具有后備功能！在這種情況下，它使用已經(jīng)建立的WebSocket連接來發(fā)送文件數(shù)據(jù)。

但是，這效率較低且安全性較低，因為數(shù)據(jù)需要先到達服務(wù)器，然后再到達其最終目的地。

if (window.isRtcSupported && peer.rtcSupported) {
    this.peers[peer.id] = new RTCPeer(this._server, peer.id);} else {
    this.peers[peer.id] = new WSPeer(this._server, peer.id);}

事件驅(qū)動的代碼樣式

代碼庫完全是事件驅(qū)動的。當(dāng)您要使服務(wù)彼此分離并允許在發(fā)生操作時進行處理時，可以使用此樣式。

這是對WebRTC和WebSocket的補充，因為它們也是事件驅(qū)動的。當(dāng)消息進入，或者有新的同伴加入，或者想要發(fā)送文件時，這就是事件。

一開始很難遵循，因為它不是線性過程。這是注冊和觸發(fā)事件的類。

class Events {
    static fire(type, detail) {
        window.dispatchEvent(new CustomEvent(type, { detail: detail }));
    }
    static on(type, callback) {
        return window.addEventListener(type, callback, false);
    }}

這樣您就可以編寫這樣的事件驅(qū)動代碼

Events.on('signal', e => this._onMessage(e.detail));Events.on('peers', e => this._onPeers(e.detail));Events.on('files-selected', e => this._onFilesSelected(e.detail));Events.on('send-text', e => this._onSendText(e.detail));Events.on('peer-left', e => this._onPeerLeft(e.detail));

自己檢查代碼

希望您今天學(xué)到了一些東西！如果您想親自探索代碼，請訪問github存儲庫。https://github.com/RobinLinus/snapdrop

創(chuàng)建者還很友好地創(chuàng)建了docker compose文件，因此您可以自己運行和托管該文件。我想知道有多少人在運行自己的SnapDrop實例？

謝謝閱讀！

您如何看待這類博客文章？我覺得我不得不寫這篇文章，因為這個項目教會了我一些寶貴的經(jīng)驗。在下面發(fā)表評論，我會盡快回復(fù)大家！

下一個再見?。