【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

相关推荐
码农小灰9 小时前
Kafka消息持久化机制全解析:存储原理与实战场景
java·分布式·kafka
凳子(刘博浩)9 小时前
决策树的笔记
笔记
喜欢你,还有大家12 小时前
Linux笔记7——shell编程基础-1
linux·运维·笔记
山中月侣12 小时前
Java多线程编程——基础篇
java·开发语言·经验分享·笔记·学习方法
m0_6786933314 小时前
深度学习笔记34-YOLOv5调用官方权重进行检测
笔记·深度学习·yolo
纪莫15 小时前
Kafka如何保证「消息不丢失」,「顺序传输」,「不重复消费」,以及为什么会发生重平衡(reblanace)
java·分布式·后端·中间件·kafka·队列
想躺平的咸鱼干15 小时前
RabbitMQ 基础
java·分布式·rabbitmq·idea·amqp·消息转换器·交换机模型
AI视觉网奇17 小时前
zsh 使用笔记 命令行智能提示 bash智能
linux·运维·笔记
KaiwuDB17 小时前
KWDB 分布式架构探究——数据分布与特性
数据库·分布式
于越海17 小时前
Python工程师向项目管理转型的深度分析与学习道路规划
笔记·python·学习