HeliaShare - 基于 Helia 的多机文件分享 Demo

一个纯静态 HTML + JavaScript 的浏览器端 IPFS 文件分享应用，基于 Helia 库实现。

功能特性

1. 文件上传到 IPFS

支持拖拽上传和点击选择文件
自动生成多种 CID 格式：
- CIDv0 (Base58, Qm开头) - 兼容旧版 IPFS
- CIDv1 Base32 (bafy开头) - 新版默认格式
- CIDv1 Base58 - 备用格式
自动固定到本地存储
上传历史记录保存在浏览器本地

2. 通过 CID 获取文件

输入 CID 即可从 IPFS 网络获取文件
优先从默认引导节点获取数据，速度更快更稳定
实时进度显示：连接网络 → 查找提供者 → 下载数据 → 完成
支持自动固定到本地
自动触发浏览器下载（获取成功后立即下载）
支持多种文件类型预览（图片、视频、音频、文本）
支持使用用户提供的文件名进行下载

3. 本地分享管理

自动开始分享：节点初始化完成后自动开始分享本地块
查看分享状态和统计
垃圾回收功能清理未固定块

4. 网络浏览器

查看当前连接的 IPFS 节点
标记显示默认引导节点 ⭐
查看本地存储的块

默认引导节点

应用配置了默认的引导节点，优先从该节点获取数据：

/ip4/164.92.116.163/udp/4001/webrtc-direct/certhash/uEiB-LSkXRRznjYd7TGyssl9HjuwPrpduoQ-DKKVXIZK0jw/p2p/12D3KooWN57Fmw7NEAXiFa76TLH8JaJjUvTisfGu1ufjtjTt6Fg3

引导节点优势

✅ 优先连接：应用启动时自动连接
✅ 优先获取：获取文件时优先从该节点请求数据
✅ 稳定可靠：作为固定的数据提供者
✅ 快速发现：通过该节点快速发现其他节点

技术栈

前端: 纯 HTML + 原生 JavaScript (ES Modules)
IPFS 实现: Helia (通过 CDN 加载)
存储: 浏览器 IndexedDB / Memory Blockstore
传输: WebRTC-direct, WebSockets

安装部署

要求

任意 Web 服务器（Nginx, Apache, Caddy, 或静态文件托管）
支持 HTTPS (WebRTC 需要安全上下文)
现代浏览器 (Chrome, Firefox, Edge)

部署方式

方式 1: 静态文件托管（最简单）

# 直接将 HeliaShare 目录上传到任何静态文件托管服务
# 例如: GitHub Pages, Netlify, Vercel, Cloudflare Pages

方式 2: Nginx

server {
    listen 443 ssl http2;
    server_name your-domain.com;

    root /path/to/HeliaShare;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    # 添加 CORS 头（用于 ES Modules）
    add_header Access-Control-Allow-Origin "*";
}

方式 3: Python 快速测试

cd HeliaShare
python3 -m http.server 8080
# 访问 http://localhost:8080

方式 4: Node.js

cd HeliaShare
npx serve -s . -l 8080
# 访问 http://localhost:8080

注意事项

必须使用 HTTPS：WebRTC 需要在安全上下文（HTTPS 或 localhost）中运行
现代浏览器：需要支持 ES Modules 和 WebRTC

使用说明

上传文件

将文件拖放到上传区域，或点击选择
系统自动计算 CID，显示多种格式：
- CIDv0 (Qm开头)
- CIDv1 Base32 (bafy开头)
- CIDv1 Base58
点击历史记录中的"复制CID"按钮可复制 CIDv0（如果有）或默认 CID

获取文件

在 CID 输入框中粘贴 IPFS 地址（支持任意格式）
点击"获取文件"按钮
实时查看获取进度：
- 正在连接网络...
- 正在解析 CID...
- 正在查找提供者... (优先搜索默认引导节点)
- 正在下载... (显示已接收字节数，标记数据来源)
- 下载完成！
获取成功后自动触发浏览器下载
同时显示文件预览（如果支持）

引导节点连接

应用启动时自动尝试连接默认引导节点
在"网络浏览器"中可以看到已连接的节点，引导节点会标记 ⭐
如果引导节点连接失败，应用会尝试通过 DHT 发现其他节点

分享本地块

节点初始化完成后自动开始分享
查看"本地分享管理"面板了解分享状态
点击"停止分享"可暂停提供数据
点击"开始分享本地块"可恢复分享

垃圾回收

点击"清理未固定块"按钮
系统会删除未固定的临时数据
释放本地存储空间

文件结构

HeliaShare/
├── index.html         # 主页面 (纯 HTML)
├── style.css          # 样式表
├── app.js             # 主应用逻辑
├── .htaccess          # Apache 配置（可选）
└── README.md          # 本文件

纯静态文件，无需任何后端服务器！

工作原理

浏览器端 IPFS 节点

使用 Helia 库在浏览器中创建完整的 IPFS 节点
通过 WebRTC 和 WebSocket 连接到 IPFS 网络
使用 libp2p 进行点对点通信

默认引导节点

应用在 app.js 中配置了默认引导节点：

const DEFAULT_BOOTSTRAP_NODES = [
    '/ip4/164.92.116.163/udp/4001/webrtc-direct/...'
]

获取文件流程：

尝试从默认引导节点获取数据
如果引导节点不可用，通过 DHT 查找其他提供者
从找到的任何节点获取数据

CID 格式支持

应用支持多种 CID 格式：

CIDv0: Base58btc 编码，以 Qm 开头，兼容性好
CIDv1 Base32: 以 bafy 开头，现代格式，DNS 友好
CIDv1 Base58btc: 备用格式

上传文件后会显示所有可用格式，方便在不同场景下使用。

内容寻址

每个文件通过其内容的哈希值（CID）唯一标识
相同内容始终产生相同 CID
文件可以从网络中的任何节点获取

数据存储

默认使用内存存储（页面刷新后数据丢失）
支持 IndexedDB 持久化存储
固定操作确保数据不会被垃圾回收

注意事项

网络要求: 需要良好的网络连接才能连接到 IPFS 网络
浏览器兼容性: 需要支持 ES Modules 和 WebRTC 的现代浏览器
HTTPS 要求: WebRTC 需要在安全上下文（HTTPS 或 localhost）中运行
存储限制: 浏览器存储空间有限，大文件可能受限
引导节点可用性: 默认引导节点需要在线才能提供优先获取服务

故障排除

节点无法连接

检查网络连接
确保使用 HTTPS 访问
检查浏览器控制台错误信息

引导节点连接失败

检查引导节点是否在线
应用会尝试通过 DHT 发现其他节点
可能需要等待更长时间发现其他提供者

文件获取失败

确认 CID 正确无误
检查默认引导节点是否在线
检查网络中是否有其他节点提供该内容
尝试等待一段时间后重试

上传失败

检查文件大小（浏览器存储有限制）
确保节点已完全初始化
检查浏览器存储权限

更新日志

v1.2.1

✅ 改为纯静态 HTML（移除 PHP 依赖）
✅ 支持任何静态文件托管服务部署

v1.2.0

✅ 添加默认引导节点配置
✅ 优先从引导节点获取数据
✅ 引导节点标记显示 ⭐
✅ 获取进度显示数据来源

v1.1.0

✅ 自动开始分享本地块
✅ 获取文件显示实时进度条
✅ 获取成功后自动触发浏览器下载
✅ 支持使用用户提供的文件名下载
✅ 上传后显示多种 CID 格式（CIDv0 Qm开头、CIDv1 Base32/58）

HeliaShare - 基于 Helia 的多机文件分享 Demo

功能特性

1. 文件上传到 IPFS

2. 通过 CID 获取文件

3. 本地分享管理

4. 网络浏览器

默认引导节点

引导节点优势

技术栈

安装部署

要求

部署方式

方式 1: 静态文件托管（最简单）

方式 2: Nginx

方式 3: Python 快速测试

方式 4: Node.js

注意事项

使用说明

上传文件

获取文件

引导节点连接

分享本地块

垃圾回收

文件结构

工作原理

浏览器端 IPFS 节点

默认引导节点

CID 格式支持

内容寻址

数据存储

注意事项

故障排除

节点无法连接

引导节点连接失败

文件获取失败

上传失败

更新日志

v1.2.1

v1.2.0

v1.1.0

v1.0.0

参考资源

许可证

发表评论 取消回复

发表评论取消回复