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

上传 upload.html client.seed

javascript 复制代码
<!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/intro
            client.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

javascript 复制代码
<!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 refresh

        const torrentId = document.querySelector('form input[name=torrentId]').value
        log('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 seconds
        const 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 page
        torrent.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 = str
        document.querySelector('.log').appendChild(p)
      }
    </script>
  </body>
</html>

效果

上传

下载

CG

相关推荐
YuCaiH35 分钟前
数组理论基础
笔记·leetcode·c·数组
〆、风神1 小时前
Spring Boot 整合 Lock4j + Redisson 实现分布式锁实战
spring boot·分布式·后端
bicijinlian2 小时前
多语言笔记系列:使用导入魔法命令
笔记
胡萝卜糊了Ohh2 小时前
kafka
分布式·kafka
foo1st4 小时前
JDK(Ubuntu 18.04.6 LTS)安装笔记
java·笔记·ubuntu
DKPT4 小时前
常见正则表达式整理与Java使用正则表达式的例子
java·笔记·学习·面试·正则表达式
下雨的Jim4 小时前
前端速成之——Script
前端·笔记
caodongwang4 小时前
【NCCL】transport建立(一)
p2p·rdma·nccl·transport
爱码小白4 小时前
wordpress学习笔记
笔记·学习
桑榆08064 小时前
Spark-Streaming核心编程
大数据·分布式·spark