Node.js 什么是WebTorrent以及如何使用它
什么是WebTorrent?
WebTorrent是用于Node.js的流式传输种子客户端。WebTorrent是用Web的语言JavaScript编写的。不需要扩展和插件。只需使用npm安装。
要在浏览器中使用WebTorrent,需要WebRTC(Web实时通信)。
WebTorrent的特点:
- 它是Node.js和浏览器的种子客户端。
- 速度非常快。
- 可以高效地下载多个种子文件。
- 完全使用纯 JavaScript 编写。
步骤1: 创建一个项目文件夹:
mkdir Project
步骤2:转到创建的项目文件夹并运行npm init进行初始化:
npm init
步骤3:使用npm安装。
现在按照以下给出的命令来安装WebTorrent:
npm install webtorrent
在终端中运行上面的代码,例如Vscode终端。
此外,您还可以通过在软件包名称之前添加“-g”来全局安装它。
npm install -g webtorrent
或者您可以简单地包含下面给出的“webtorrent.min.js”脚本,以直接使用WebTorrent。
<script src="https://cdn.jsdelivr.net/npm/webtorrent@latest/webtorrent.min.js"></script>
项目结构: 项目结构应该如下所示:
步骤4:检查WebTorrent是否安装并查看WebTorrent的版本。
现在您可以在依赖项下的package.json文件中查看版本和已安装的包。
步骤5:安装Browserify。
Browserify是一个模块,它使我们能够在我们的Web项目中包含节点模块。Browserify将我们的所有依赖项捆绑在一起,让我们在浏览器中使用 require(‘modules’)。要安装Browserify,请按照以下命令进行操作。
npm install Browserify
示例1: 现在我们可以使用WebTorrent。为了测试它是否有效,我们来制作一个小型的种子视频播放器,只显示种子文件。
方法:
- 包含最新版本的WebTorrent,以便我们可以使用WebTorrent功能。
- 初始化WebTorrent。
- 使用磁力链接下载种子文件。
- 使用mp4作为文件格式。
- 通过将文件添加到DOM中的file.appendTo()来显示文件。
将Javascript代码视为 index.js ,将HTML代码视为 index.html 。
// Including modules
const WebTorrent = require('webtorrent');
// Initializing WebTorrent
const client = new WebTorrent()
// Using a magnet link
let NewMagnetTorrentId = 'Magnet Link'
// Starts downloading a new torrent file
client.add(NewMagnetTorrentId, function (torrent) {
// Using the .mp4 file
const file = torrent.files.find(function (Newfile) {
// Returning filename ending with .mp4
return Newfile.name.endsWith('.mp4')
})
// Display the file by adding it to the DOM.
file.appendTo('body')
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- title of the page -->
<title>WebTorrent video player</title>
</head>
<body>
<!-- Including script -->
<script src="./app.js"></script>
</body>
</html>
输出: 在终端中运行以下给定的命令。
在下面给定的命令中,’index.js’ 是当前文件,“app.js” 是转换后将要创建的文件的名称。
browserify index.js -o app.js
之后,创建了一个名为’app.js’的文件,该文件使用script标签与HTML文件链接。
现在你可以使用实时服务器打开HTML文件(我们只是用HTML文件来在屏幕上显示输出)或者直接打开下面显示的index.html文件。
示例2: 使用WebTorrent制作一个下载种子文件的种子文件下载器。
方法:
- 使用最新版本的WebTorrent,以便我们可以使用WebTorrent功能。
- 初始化WebTorrent。
- 使用磁力链接来下载种子文件。
- 使用preventDefault来防止页面刷新。
- 每隔10秒打印文件的下载进度。
- 将所有的文件渲染到同一个页面中。
- 显示已下载的文件。
将JavaScript代码视为 index.js 和HTML代码视为 index.html 。
const WebTorrent = require('webtorrent');
// Initializing WebTorrent
const client = new WebTorrent()
// queryselector selects the 'form' and
//addEventListener listen the submit event
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault() // As the submit event occur it prevent page refresh
// selecting the form's input section
const NewTorrentLink = document.querySelector(
'form input[name=NewTorrentLink]').value
// concatenate torrentId
log('New Magnet Link: ' + NewTorrentLink)
// starts downloading a new torrent
client.add(NewTorrentLink, onTorrent)
})
// getting torrent metadata
function onTorrent(torrent) {
log('<h3>Getting torrent metadata</h3>')
log(
// Info hash of the torrent string
'Torrent Information: ' + torrent.infoHash
// Magnet URI of torrent
)
// Showing the download progress every 10 second
const NewInterval = setInterval(function () {
log('Progress Reader: ' +
(torrent.progress * 100).toFixed(1) + '%')
}, 10000)
// Emitted when all the files download 100%
torrent.on('Completed The Process', function () {
log('Progress: 100%')
clearInterval(NewInterval)
})
// Render all files into to the page
torrent.files.forEach(function (NewFile) {
// Appending file with .Final
NewFile.appendTo('.Final')
// Getting a url that can be used to refer a file
// and callback will be called once the file is ready
NewFile.getBlobURL(function (errorfound, NewUrl) {
if (errorfound) return log(errorfound.message)
log('File Process done.')
log('<a href="' + NewUrl + '">Download Complete File: '
+ NewFile.name + '</a>')
})
})
}
// Function log
function log(FinalString) {
// Creating element 'p'
const p = document.createElement('p')
// setting HTML content
p.innerHTML = FinalString
// Selecting '.Final' and appending it to 'p'
document.querySelector('.Final').appendChild(p)
}
<html>
<body>
<h1>Download files using the WebTorrent</h1>
<!-- creating a form the magnet link -->
<form>
<p>Download using magnet link: </p>
<input name="NewTorrentLink" , value="">
<!-- submit button to submit the magnet link -->
<button type="submit">Download</button>
</form>
<h2>Logs for the downloading</h2>
<!-- creating a class log -->
<div class="Final"></div>
<script src="./app.js"></script>
</body>
</html>
输出: 在终端中运行下面给出的命令。
在下面给出的命令中,’index.js’是当前文件,’app.js’是在转换后正在创建的文件的名称。
browserify index.js -o app.js
之后,创建了一个名为’app.js’的文件,它使用脚本标签链接到HTML文件。
现在,您可以使用live server打开HTML文件(我们仅在屏幕上显示输出时使用HTML文件),或者直接打开下面显示的index.html文件。