[譯] Dweb: 用 WebTorrent 搭建一個可復原的 Web (中英)

西樓聽雨發表於2018-08-20
Web


原文：hacks.mozilla.org/2018/08/dwe…
作者：Feross Aboukhadijeh 發表時間：August 15, 2018
譯者：西樓聽雨 發表時間：2018/8/20
原文是 Mozilla 開發者網站釋出的關於 Dweb 的概念、應用及使用案例介紹的系列文章中的第三篇。(轉載請註明出處)


本系列各篇章的翻譯連結如下：

  1. [譯] Dweb: 什麼是 Dweb？(中英)
  2. [譯] Dweb: 基於 Secure Scuttlebutt 的社交訊息流 (中英)
  3. [譯] Dweb: 用 WebTorrent 搭建一個可復原的 Web (中英)
  4. [譯] Dweb: 基於 Beaker 的去中心化 Web (中英)
  5. [譯] Dweb: 基於 IPFS 的去中心化 Web 檔案系統 (中英)
  6. 待發布······


譯註：以下斜體文字是原文中的編者按

In this series we are covering projects that explore what is possible when the web becomes decentralized or distributed. These projects aren’t affiliated with Mozilla, and some of them rewrite the rules of how we think about a web browser. What they have in common: These projects are open source, and open for participation, and share Mozilla’s mission to keep the web open and accessible for all.

在這個系列中，我們會講到一些正在嘗試探索在 Web 變為去中心化或分散式的時候存在哪些可能性的專案，這些專案不附屬於 Mozilla，其中一些專案還重新定義了我們對 web 瀏覽器的認識。他們都有共同點：這些專案都是開源的，開放參與的，並且和 Mozilla ”keep the web open and accessible for all (讓 Web 對所有人保持開放和可訪問)“ 的宗旨一致。

The web is healthy when the financial cost of self-expression isn’t a barrier. In this installment of the Dweb series we’ll learn about WebTorrent – an implementation of the BitTorrent protocol that runs in web browsers. This approach to serving files means that websites can scale with as many users as are simultaneously viewing the website – removing the cost of running centralized servers at data centers. The post is written by Feross Aboukhadijeh, the creator of WebTorrent, co-founder of PeerCDN and a prolific NPM module author… 225 modules at last count! –Dietrich Ayala

當自我表達所需的經濟代價不再是一種障礙時，Web 就是健康的。在這個系列的本次講解中，我們將瞭解到的是 WebTorrent ——一種執行在瀏覽器中的 BitTorrent 協議的實現。這種供應檔案的方式可以讓網站在同時檢視網站的使用者量無論有多大的情況下都保持著伸縮性——(這可以)節省執行在資料中心的中心式伺服器的運營代價。

什麼是 WebTorrent ？

WebTorrent is the first torrent client that works in the browser. It’s written completely in JavaScript – the language of the web – and uses WebRTC for true peer-to-peer transport. No browser plugin, extension, or installation is required.

WebTorrent 是第一款執行在瀏覽器中的 torrent 客戶端。它完全是用 JavaScript ——也就是 Web 所使用的語言——編寫的，使用的是 WebRTC 來進行真實的點對點傳輸。沒借助瀏覽器外掛、擴充套件，也無需額外安裝其他東西。

Using open web standards, WebTorrent connects website users together to form a distributed, decentralized browser-to-browser network for efficient file transfer. The more people use a WebTorrent-powered website, the faster and more resilient it becomes.

藉助各種開放的 Web 標準，WebTorrent 得以將網站的使用者連線到一起，組成一張具備高效檔案傳輸能力的“瀏覽器對瀏覽器”的分散式、去中心化的網路。一個基於 WebTorrent 的網站，其使用的人越多，它的速度就越快，可復原性也越強。

[譯] Dweb: 用 WebTorrent 搭建一個可復原的 Web (中英)

架構

The WebTorrent protocol works just like BitTorrent protocol, except it uses WebRTC instead of TCP or uTP as the transport protocol.

WebTorrent 協議的工作機制和 BitTorrent 協議一樣，除了它使用的是 WebRTC 而不是 TCP 或者 uTP 作為傳輸協議外。

In order to support WebRTC’s connection model, we made a few changes to the tracker protocol. Therefore, a browser-based WebTorrent client or “web peer” can only connect to other clients that support WebTorrent/WebRTC.

為了能支援 WebRTC 的連線模型，我們對(torrent 的) tracker 協議做了一些修改。這樣，一個基於瀏覽器的 WebTorrent 客戶端——或者說是 “web peer”—— 就可以與其他支援 WebTorrent 及 WebRTC 的客戶端建立連線。

Once peers are connected, the wire protocol used to communicate is exactly the same as in normal BitTorrent. This should make it easy for existing popular torrent clients like Transmission, and uTorrent to add support for WebTorrent. Vuze already has support for WebTorrent!

一旦點與點之間建立了連線，(基於該連線之上的)用於通訊的協議就和常規的 BitTorrent 的沒有區別了。這可以讓已有的各主流的 torrent 客戶端——如 Transmission、uTorrent——在增加對 WebTorrent 的支援時變得容易。——Vuze 已經實現了對 WebTorrent 的支援！

[譯] Dweb: 用 WebTorrent 搭建一個可復原的 Web (中英)

開始

It only takes a few lines of code to download a torrent in the browser!

在瀏覽器中下載一個 torrent 檔案只需要幾行程式碼就可以做到！

To start using WebTorrent, simply include the webtorrent.min.js script on your page. You can download the script from the WebTorrent website or link to the CDN copy.

要使用 WebTorrent，只需在你的頁面中將 weborrent.min.js 指令碼檔案引用進來即可。你可以從 WebTorrent 的網站上下載(這個檔案)或者將連結指向到一個 CDN 副本。

<script src="webtorrent.min.js"></script>複製程式碼

This provides a WebTorrent function on the window object. There is also an npm package available.

這樣之後，它會在 Window 物件上提供一個 WebTorrent 函式(供使用)。此外還有 npm 包 可用。

var client = new WebTorrent()
​
// Sintel, a free, Creative Commons movie
// 《辛特爾》，一部免費，採用“知識共享”(許可協議)的電影
var torrentId = 'magnet:...' // Real torrent ids are much longer. // 真實的 torrent id 遠比這個長
​
var torrent = client.add(torrentId)
​
torrent.on('ready', () => {
// Torrents can contain many files. Let's use the .mp4 file
// 一個種子檔案可以包含許多個檔案。這裡我們只使用 .mp4 檔案
var file = torrent.files.find(file => file.name.endsWith('.mp4'))
    // Display the file by adding it to the DOM.
    // Supports video, audio, image files, and more!
    // 把他新增到 DOM 中進行展示。
    // 支援視訊、音訊、影像檔案等等！
    file.appendTo('body')
})複製程式碼

That’s it! Now you’ll see the torrent streaming into a <video width="300" height="150"> tag in the webpage!

就這樣！現在你就可以在網頁中看到這個 torrent 被灌輸到了 <video width="300" height="150"> 標籤中。

更多資訊

You can learn more at webtorrent.io, or by asking a question in #webtorrent on Freenode IRC or on Gitter. We’re looking for more people who can answer questions and help people with issues on the GitHub issue tracker. If you’re a friendly, helpful person and want an excuse to dig deeper into the torrent protocol or WebRTC, then this is your chance!

你可以在 webtorrent.io 瞭解更多的資訊，你也可以在 Freenode IRC 及 Gitter 上的 #webtorrent (頻道/主題下)發出提問。我們正期待有更多的人在 GitHub 的問題跟蹤列表上提交和解答問題。如果你是一位友好、樂於助人的人，並且在找機會深入挖掘 torrent 協議和/或 WebRTC，那麼現在就是機會！

關於 Feross Aboukhadijeh

Feross writes popular open source software including WebTorrent, StandardJS, and hundreds of Node.js packages (collectively 200+ million downloads per month). He recently released a fun site called BitMidi that curates MIDI files for your listening pleasure! His open source work is supported by generous donors on Patreon.

Feross 編寫了許多流行的開源軟體的，包括 WebTorrent、StandardJS，以及幾百份的 Node.js 包(每月總計 2 億多次的下載量)。最近，他釋出了一個名為 BitMidi 的有趣的網站，這個網站組織了許多的 MIDI 檔案，可以為你帶來聽覺享受！他的開源事業都是由 Patreon 上慷慨的捐助者們所支援的。


相關文章