当前位置：首页 > news >正文

【p2p、分布式，区块链笔记 Torrent】WebTorrent的上传和下载界面

news 2025/1/16 0:16:09

上传 upload.html client.seed

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文件上传与哈希值</title><script src="https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js"></script>
</head>
<body><h1>文件上传与哈希值</h1><input type="file" id="fileInput" multiple><button id="uploadButton">上传并获取哈希值</button><div id="hashOutput"></div><div id="magnetOutput"></div><script>const client = new WebTorrent();document.getElementById('uploadButton').onclick = function () {const fileInput = document.getElementById('fileInput');const files = fileInput.files;if (files.length === 0) {alert('请先选择一个文件。');return;}const torrentId = files[0].name; // 你可以选择使用文件名或自定义的 ID// 创建一个新的 torrent 并为其播种（Node.js）https://webtorrent.io/introclient.seed(files, { name: torrentId }, function (torrent) {const hash = torrent.infoHash; // 获取哈希值document.getElementById('hashOutput').innerText = '文件哈希: ' + hash ;document.getElementById('magnetOutput').innerText = '文件链接: ' + torrent.magnetURI;console.log('哈希值:', hash);console.log('Client is seeding ' + torrent.magnetURI)});};</script>
</body>
</html>

下载 download.html client.add

下载界面的代码来源

<!doctype html>
<html><body><h1>Download files using the WebTorrent protocol (BitTorrent over WebRTC).</h1><form><label for="torrentId">Download from a magnet link: </label><input name="torrentId", placeholder="magnet:" value="magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent"><button type="submit">Download</button></form><h2>Log</h2><div class="log"></div><!-- Include the latest version of WebTorrent --><script src="https://cdn.jsdelivr.net/npm/webtorrent@latest/webtorrent.min.js"></script><script>const client = new WebTorrent()client.on('error', function (err) {console.error('ERROR: ' + err.message)})document.querySelector('form').addEventListener('submit', function (e) {e.preventDefault() // Prevent page refreshconst torrentId = document.querySelector('form input[name=torrentId]').valuelog('Adding ' + torrentId)client.add(torrentId, onTorrent)})function onTorrent (torrent) {log('Got torrent metadata!')log('Torrent info hash: ' + torrent.infoHash + ' ' +'<a href="' + torrent.magnetURI + '" target="_blank">[Magnet URI]</a> ' +'<a href="' + torrent.torrentFileBlobURL + '" target="_blank" download="' + torrent.name + '.torrent">[Download .torrent]</a>')// Print out progress every 5 secondsconst interval = setInterval(function () {log('Progress: ' + (torrent.progress * 100).toFixed(1) + '%')}, 5000)torrent.on('done', function () {log('Progress: 100%')clearInterval(interval)})// Render all files into to the pagetorrent.files.forEach(function (file) {file.appendTo('.log') // !!Render a file into to the page!!!log('(Blob URLs only work if the file is loaded from a server. "http//localhost" works. "file://" does not.)')file.getBlobURL(function (err, url) {if (err) return log(err.message)log('File done.')log('<a href="' + url + '">Download full file: ' + file.name + '</a>')})})}function log (str) {const p = document.createElement('p')p.innerHTML = strdocument.querySelector('.log').appendChild(p)}</script></body>
</html>

效果

上传

在这里插入图片描述

下载

Client is seeding magnet:?xt=urn:btih:5fe7e4f9ab9d978560a95612d6c3fd2888bac963&dn=carbon.png&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com