Skip to main content

本周项目:WebTorrent

· 18 min read

本周,我们与@feross@dcposch聊了聊WebTorrent,这是一款由网络驱动的种子客户端,可以将用户连接在一起,形成一个分布式、去中心化的浏览器对浏览器网络。

🌐 This week we caught up with @feross and @dcposch to talk about WebTorrent, the web-powered torrent client that connects users together to form a distributed, decentralized browser-to-browser network.


什么是 WebTorrent?

🌐 What is WebTorrent?

WebTorrent 是第一个可以在浏览器中运行的种子客户端。它完全用 JavaScript 编写,并且可以使用 WebRTC 进行点对点传输。不需要浏览器插件、扩展或安装。

WebTorrent 使用开放的 Web 标准,将网站用户连接在一起,形成一个分布式、去中心化的浏览器到浏览器网络,以实现高效的文件传输。

🌐 Using open web standards, WebTorrent connects website users together to form a distributed, decentralized browser-to-browser network for efficient file transfer.

你可以在这里看到 WebTorrent 的演示:webtorrent.io

🌐 You can see a demo of WebTorrent in action here: webtorrent.io.

webtorrent homepage

为什么这很酷?

🌐 Why is this cool?

想象一个类似 YouTube 的视频网站,但访客会帮助托管网站的内容。使用 WebTorrent 技术的网站用户越多,它就越快,也越可靠。

🌐 Imagine a video site like YouTube, but where visitors help to host the site's content. The more people that use a WebTorrent-powered website, the faster and more resilient it becomes.

浏览器之间的通信省去了中间环节,让人们可以按照自己的方式进行交流。不再需要客户端/服务器——只是一个平等的点对点网络。WebTorrent 是重新去中心化网络旅程的第一步。

🌐 Browser-to-browser communication cuts out the middle-man and lets people communicate on their own terms. No more client/server – just a network of peers, all equal. WebTorrent is the first step in the journey to re-decentralize the Web.

Electron 在其中扮演什么角色?

🌐 Where does Electron come into the picture?

大约一年前,我们决定开发 WebTorrent Desktop,这是一个作为桌面应用运行的 WebTorrent 版本。

🌐 About one year ago, we decided to build WebTorrent Desktop, a version of WebTorrent that runs as a desktop app.

WebTorrent 桌面播放器窗口

我们创建 WebTorrent Desktop 有三个原因:

🌐 We created WebTorrent Desktop for three reasons:

  1. 我们想要一款简洁、轻量、无广告的开源种子应用。
  2. 我们想要一个能够良好支持流媒体的种子应用。
  3. 我们需要一个可以连接 BitTorrent 和 WebTorrent 网络的“混合客户端”

如果我们已经可以在 Web 浏览器中下载种子,为什么还要开发桌面应用?

🌐 If we can already download torrents in my web browser, why a desktop app?

首先,简单介绍一下 WebTorrent 的设计背景。

🌐 First, a bit of background on the design of WebTorrent.

webtorrent desktop logo

在早期,BitTorrent 使用 TCP 作为其传输协议。后来,uTP 出现了,承诺比 TCP 提供更好的性能和额外优势。每个主流的种子客户端最终都采用了 uTP,而如今你可以通过任一协议使用 BitTorrent。WebRTC 协议是下一个合乎逻辑的步骤。它带来了与网页浏览器互操作的可能性——一个由所有桌面 BitTorrent 客户端和数百万网页浏览器组成的庞大 P2P 网络。

🌐 In the early days, BitTorrent used TCP as its transport protocol. Later, uTP came along promising better performance and additional advantages over TCP. Every mainstream torrent client eventually adopted uTP, and today you can use BitTorrent over either protocol. The WebRTC protocol is the next logical step. It brings the promise of interoperability with web browsers – one giant P2P network made up of all desktop BitTorrent clients and millions of web browsers.

“网页节点”(在网页浏览器中运行的种子节点)通过增加数百万新的节点并将 BitTorrent 扩展到数十种新的使用场景,从而使 BitTorrent 网络更加强大。WebTorrent 尽可能严格地遵循 BitTorrent 规范,以便现有的 BitTorrent 客户端可以轻松添加对 WebTorrent 的支持。

一些像 Vuze 这样的种子应用已经支持网页端节点,但我们不想等其他应用去添加支持。所以基本上,WebTorrent Desktop 是我们加速 WebTorrent 协议普及的一种方式。 通过制作一个人们真正想使用的超棒种子应用,我们增加了网络中可以与网页端节点共享种子的节点数量(即网站上的用户)。

🌐 Some torrent apps like Vuze already support web peers, but we didn't want to wait around for the rest to add support. So basically, WebTorrent Desktop was our way to speed up the adoption of the WebTorrent protocol. By making an awesome torrent app that people really want to use, we increase the number of peers in the network that can share torrents with web peers (i.e. users on websites).

除了人们已知的功能之外,torrent 还有哪些有趣的用例?

🌐 What are some interesting use cases for torrents beyond what people already know they can do?

WebTorrent 最令人兴奋的用途之一是对等辅助传输。像 维基百科互联网档案馆 这样的非营利项目可以通过让访问者参与来减少带宽和托管成本。热门内容可以通过浏览器间直接传输,快速且廉价。很少访问的内容则可以通过 HTTP 从源服务器可靠地提供。

🌐 One of the most exciting uses for WebTorrent is peer-assisted delivery. Non-profit projects like Wikipedia and the Internet Archive could reduce bandwidth and hosting costs by letting visitors chip in. Popular content can be served browser-to-browser, quickly and cheaply. Rarely-accessed content can be served reliably over HTTP from the origin server.

互联网档案馆实际上已经更新了他们的种子文件,使其可以很好地与 WebTorrent 配合使用。因此,如果你想在你的网站上嵌入互联网档案馆的内容,你可以以一种减少档案馆托管成本的方式来做,从而让他们能够将更多资金用于真正的网络档案保存!

🌐 The Internet Archive actually already updated their torrent files so they work great with WebTorrent. So if you want to embed Internet Archive content on your site, you can do it in a way that reduces hosting costs for the Archive, allowing them to devote more money to actually archiving the web!

还有一些令人兴奋的商业用例,从 CDN 到通过 P2P 交付应用。

🌐 There are also exciting business use cases, from CDNs to app delivery over P2P.

你最喜欢的使用 WebTorrent 的项目有哪些?

🌐 What are some of your favorite projects that use WebTorrent?

gaia app screenshot

用 WebTorrent 构建的最酷的东西,毫无疑问,可能是 Gaia 3D 星图。它是一个流畅的 3D 交互式银河系模拟。数据通过 torrent 在你的浏览器中加载。飞越我们的恒星系统时,你会被震撼,同时意识到与宇宙的浩瀚相比,我们人类是多么渺小。

🌐 The coolest thing built with WebTorrent, hands down, is probably Gaia 3D Star Map. It's a slick 3D interactive simulation of the Milky Way. The data loads from a torrent, right in your browser. It's awe-inspiring to fly through our star system and realize just how little we humans are compared to the vastness of our universe.

你可以在《Torrenting The Galaxy》(https://medium.com/@flimshaw/torrenting-the-galaxy-extracting-2-million-3d-stars-from-180gb-of-csvs-457ff70c0f93) 中阅读这篇作品的制作进程,这是一篇博客文章,作者 Charlie Hoey 讲解了他是如何用 WebGL 和 WebTorrent 构建这张星图的。

🌐 You can read about how this was made in Torrenting The Galaxy, a blog post where the author, Charlie Hoey, explains how he built the star map with WebGL and WebTorrent.

brave logo

我们也是 Brave 的超级粉丝。Brave 是一款可以自动阻止广告和追踪器的浏览器,从而让网页加载更快、更安全。Brave 最近增加了对种子文件的支持,因此你可以 在不使用单独应用的情况下查看传统种子。该功能由 WebTorrent 提供支持。

🌐 We're also huge fans of Brave. Brave is a browser that automatically blocks ads and trackers to make the web faster and safer. Brave recently added torrent support, so you can view traditional torrents without using a separate app. That feature is powered by WebTorrent.

所以,就像大多数浏览器可以渲染 PDF 文件一样,Brave 也可以渲染磁力链接和种子文件。它们只是浏览器本地支持的另一种内容类型。

🌐 So, just like how most browsers can render PDF files, Brave can render magnet links and torrent files. They're just another type of content that the browser natively supports.

Brave 的联合创始人之一实际上是 Brendan Eich,他是 JavaScript 的创造者,而 JavaScript 正是我们编写 WebTorrent 所用的语言,因此我们认为 Brave 选择集成 WebTorrent 非常酷。

🌐 One of the co-founders of Brave is actually Brendan Eich, the creator of JavaScript, the language we wrote WebTorrent in, so we think it's pretty cool that Brave chose to integrate WebTorrent.

为什么选择在 Electron 上构建 WebTorrent 桌面?

🌐 Why did you choose to build WebTorrent Desktop on Electron?

WebTorrent Desktop main window

有一种说法认为 Electron 应用很“臃肿”,因为它们在每个应用中都包含了完整的 Chrome 内容模块。在某些情况下,这在一定程度上是正确的(Electron 应用的安装包通常约为 40MB,而特定操作系统的应用安装包通常约为 20MB)。

🌐 There is a meme that Electron apps are "bloated" because they include the entire Chrome content module in every app. In some cases, this is partially true (an Electron app installer is usually ~40MB, where an OS-specific app installer is usually ~20MB).

然而,在 WebTorrent Desktop 的情况下,我们几乎使用了每一个 Electron 功能,并且在正常操作进程中使用了许多 Chrome 功能。如果我们想为每个平台从零实现这些功能,开发我们的应用将需要多几个月甚至数年的时间,或者我们只能发布单个平台版本。

🌐 However, in the case of WebTorrent Desktop, we use nearly every Electron feature, and many dozens of Chrome features in the course of normal operation. If we wanted to implement these features from scratch for each platform, it would have taken months or years longer to build our app, or we would have only been able to release for a single platform.

只是为了让大家了解,我们使用了 Electron 的 dock 集成(显示下载进度)、菜单栏集成(在后台运行)、协议处理器注册(打开磁力链接)、防止休眠(在视频播放时防止休眠)以及 自动更新。至于 Chrome 的功能,我们也用了很多:<video> 标签(播放多种视频格式)、<track> 标签(支持字幕)、拖放支持,以及 WebRTC(在原生应用中使用起来并不简单)。

🌐 Just to get an idea, we use Electron's dock integration (to show download progress), menu bar integration (to run in the background), protocol handler registration (to open magnet links), power save blocker (to prevent sleep during video playback), and automatic updater. As for Chrome features, we use plenty: the <video> tag (to play many different video formats), the <track> tag (for closed captions support), drag-and-drop support, and WebRTC (which is non-trivial to use in a native app).

更不用说:我们的种子引擎是用 JavaScript 编写的,并假设存在大量 Node API,尤其是用于 TCP 和 UDP 套接字支持的 require('net')require('dgram')

🌐 Not to mention: our torrent engine is written in JavaScript and assumes the existence of lots of Node APIs, but especially require('net') and require('dgram') for TCP and UDP socket support.

基本上,Electron 正是我们所需要的,它拥有我们在创纪录的时间内交付一个稳定、精致的应用所需的全部功能。

🌐 Basically, Electron is just what we needed and had the exact set of features we needed to ship a solid, polished app in record time.

你最喜欢 Electron 的哪些方面?

🌐 What are your favorite things about Electron?

WebTorrent 库作为一个开源副项目已经开发了两年。我们在四周内完成了 WebTorrent Desktop。 Electron 是我们能够如此快速构建和发布应用的主要原因。

🌐 The WebTorrent library has been in development as an open source side project for two years. We made WebTorrent Desktop in four weeks. Electron is the primary reason that we were able to build and ship our app so quickly.

正如 Node.js 让使用 jQuery 的前端程序员能够轻松进行服务器编程一样,Electron 让熟悉 Web 或 Node.js 开发的任何人都可以进行原生应用开发。Electron 极具赋能性。

🌐 Just as Node.js made server programming accessible to a generation of jQuery-using front-end programmers, Electron makes native app development accessible to anyone familiar with Web or Node.js development. Electron is extremely empowering.

网站和桌面客户端共享代码吗?

🌐 Do the website and the Desktop client share code?

是的,webtorrent npm 包 可以在 Node.js、浏览器和 Electron 中运行。完全相同的代码可以在所有环境中执行——这就是 JavaScript 的魅力所在。它是当今的通用运行时。Java 小程序曾承诺“编写一次,处处运行”,但由于各种原因,这一愿景从未真正实现。相比其他平台,Electron 实际上最接近这一理想。

🌐 Yes, the webtorrent npm package works in Node.js, in the browser, and in Electron. The exact same code can run in all environments – this is the beauty of JavaScript. It's today's universal runtime. Java Applets promised "Write Once, Run Anywhere" apps, but that vision never really materialized for a number of reasons. Electron, more than any other platform, actually gets pretty darn close to that ideal.

在构建 WebTorrent 时,你遇到了哪些挑战?

🌐 What are some challenges you've faced while building WebTorrent?

在应用的早期版本中,我们在提升用户界面性能方面遇到了困难。我们将种子引擎放在与主应用窗口绘制相同的渲染进程中,结果不出意外,每当种子引擎进行大量 CPU 活动(例如验证从节点接收到的种子块)时,应用就会变得很慢。

🌐 In early versions of the app, we struggled to make the UI performant. We put the torrent engine in the same renderer process that draws the main app window which, predictably, led to slowness anytime there was intense CPU activity from the torrent engine (like verifying the torrent pieces received from peers).

我们通过将种子引擎移到第二个不可见的渲染进程来解决这个问题,我们通过IPC与该进程进行通信。这样,如果该进程短时间内使用大量 CPU,UI 线程也不会受到影响。流畅的滚动和动画非常令人满意。

🌐 We fixed this by moving the torrent engine to a second, invisible renderer process that we communicate with over IPC. This way, if that process briefly uses a lot of CPU, the UI thread will be unaffected. Buttery-smooth scrolling and animations are so satisfying.

注意:我们不得不将种子引擎放在渲染进程中,而不是“主”进程中,因为我们需要访问 WebRTC(它只在渲染进程中可用)。

🌐 Note: we had to put the torrent engine in a renderer process, instead of a "main" process, because we need access to WebRTC (which is only available in the renderer.)

Electron 应该在哪些方面改进?

🌐 In what areas should Electron be improved?

我们非常希望看到更好的关于如何构建和发布生产就绪应用的文档,尤其是像代码签名和自动更新这样棘手的话题。我们不得不通过研究源代码和在推特上询问来了解最佳实践!

🌐 One thing we'd love to see is better documentation about how to build and ship production-ready apps, especially around tricky subjects like code signing and auto-updating. We had to learn about best practices by digging into source code and asking around on Twitter!

WebTorrent 桌面版完成了吗?如果还没完成,接下来会有什么更新?

🌐 Is WebTorrent Desktop done? If not, what's coming next?

我们认为当前版本的 WebTorrent Desktop 非常出色,但总有改进的空间。我们目前正在努力改进界面细节、性能、字幕支持以及视频编码支持。

🌐 We think the current version of WebTorrent Desktop is excellent, but there's always room for improvement. We're currently working on improving polish, performance, subtitle support, and video codec support.

如果你有兴趣参与这个项目,可以查看我们的 GitHub 页面

🌐 If you're interested in getting involved in the project, check out our GitHub page!

有哪些 Electron 开发技巧可能对其他开发者有用?

🌐 Any Electron development tips that might be useful to other developers?

Feross,WebTorrent Desktop的贡献者之一,最近在NodeConf阿根廷大会上做了题为《现实世界的Electron:使用JavaScript构建跨平台桌面应用》的演讲,其中包含发布高质量Electron应用的实用技巧。如果你正处在已经有了一个基本可运行应用,并且希望将其提升到更高的精致度和专业水平的阶段,这次演讲特别有用。

在这里观看:

幻灯片在这里

DC,另一位 WebTorrent 贡献者,写了一份可以让你的应用看起来更专业、更原生的清单。它包含代码示例,并涵盖了 macOS 停靠栏整合、拖放、桌面通知,以及确保应用快速加载等内容。