JS `IPFS` (InterPlanetary File System) 在浏览器端的应用：去中心化存储

咳咳，大家好！今天咱们来聊聊一个听起来很科幻，但其实离我们很近的技术——IPFS，以及它在浏览器端的应用。咱们的目标是：让你的浏览器也能玩转去中心化存储！

第一部分：IPFS，你好骚啊！(概念入门)

首先，得搞清楚啥是IPFS。别被“星际文件系统”这高大上的名字吓着，其实它就是一个更牛逼的下载方式。

传统下载的痛点： 想象一下，你从百度网盘下载一个电影。网盘挂了，你就GG了。服务器压力大，下载慢到哭。
IPFS的骚操作： IPFS把文件切成小块，分散存储在全球不同的节点上。你想下载电影，它会从离你最近的节点，同时下载多个小块。这样一来，服务器压力小，下载速度快，而且只要有一部分节点存着你的文件，你就还能下！

用一张表来简单对比一下：

特性	传统HTTP下载	IPFS下载
存储方式	中心化服务器	去中心化，分散存储
地址	基于位置的URL（例如：`www.example.com/movie.mp4`）	基于内容的哈希（例如：`Qm...`）
可靠性	服务器挂了就完蛋	只要有一部分节点存着，就能下载
速度	服务器压力大时慢	多节点同时下载，速度快
安全性	依赖服务器的安全措施	内容哈希校验，保证文件完整性

重要概念：内容寻址

这是IPFS的核心。HTTP用的是“位置寻址”，告诉你文件在哪里。IPFS用的是“内容寻址”，告诉你文件是什么。

HTTP： “我要去www.example.com/movie.mp4拿电影” (我得知道它在哪)
IPFS： “我要拿哈希值为Qm...的电影” (我不在乎它在哪，只要它是这个电影就行)

这个哈希值就是根据文件内容生成的，只要内容稍微变动，哈希值就会完全不同。这就保证了文件的唯一性和不可篡改性。

第二部分：浏览器与IPFS，干柴烈火？(技术实现)

浏览器本身并不直接支持IPFS，需要借助一些工具才能让它们“勾搭”上。

IPFS节点： 你需要在你的电脑上运行一个IPFS节点，它就像一个本地的IPFS服务器，负责存储和检索文件。你可以下载IPFS Desktop客户端，或者用命令行安装：

# 安装go-ipfs (需要先安装Go语言)
go install github.com/ipfs/go-ipfs/v2/cmd/ipfs@latest

# 初始化IPFS
ipfs init

# 启动IPFS
ipfs daemon

启动后，你会看到类似这样的信息：

Initializing daemon...
go-ipfs version: x.x.x
Repo version: x
System version: x86_64/darwin
Golang version: gox.x.x
Swarm listening on /ip4/127.0.0.1/tcp/4001
Swarm listening on /ip4/::1/tcp/4001
Swarm listening on /ip6/::/tcp/4001
Swarm listening on /ip4/192.168.x.x/tcp/4001
...

这就是你的IPFS节点在运行了。

IPFS Companion浏览器插件： 这是个神器！它可以让你的浏览器直接访问IPFS地址。安装后，它会自动把ipfs://和ipns://开头的地址重定向到你的本地IPFS节点。
js-ipfs库： 如果你想在你的网页里直接操作IPFS，比如上传、下载文件，就需要用到js-ipfs库。它允许你在浏览器里创建一个IPFS节点。

代码示例：用js-ipfs上传文件

<!DOCTYPE html>
<html>
<head>
  <title>IPFS Upload Example</title>
</head>
<body>
  <h1>IPFS Upload</h1>
  <input type="file" id="fileInput">
  <button id="uploadButton">Upload to IPFS</button>
  <p id="ipfsHash"></p>

  <script src="https://unpkg.com/ipfs@latest/dist/index.min.js"></script>
  <script>
    async function uploadFile() {
      const fileInput = document.getElementById('fileInput');
      const uploadButton = document.getElementById('uploadButton');
      const ipfsHashElement = document.getElementById('ipfsHash');

      if (fileInput.files.length === 0) {
        alert('Please select a file.');
        return;
      }

      const file = fileInput.files[0];
      const reader = new FileReader();

      reader.onload = async function(event) {
        const fileContent = event.target.result;
        uploadButton.disabled = true;
        uploadButton.innerText = 'Uploading...';

        try {
          const node = await Ipfs.create(); // 创建一个IPFS节点

          const result = await node.add({
            path: file.name,
            content: fileContent
          });

          const ipfsHash = result.cid.toString();
          ipfsHashElement.innerText = `IPFS Hash: ${ipfsHash}`;
          console.log('IPFS Hash:', ipfsHash);
          uploadButton.innerText = 'Upload to IPFS';
          uploadButton.disabled = false;

           // 停止节点，释放资源
           await node.stop()

        } catch (error) {
          console.error('Error uploading to IPFS:', error);
          ipfsHashElement.innerText = `Error: ${error.message}`;
          uploadButton.innerText = 'Upload to IPFS';
          uploadButton.disabled = false;
        }
      };

      reader.readAsArrayBuffer(file);
    }

    document.getElementById('uploadButton').addEventListener('click', uploadFile);
  </script>
</body>
</html>

这段代码做了这些事：

引入js-ipfs库： https://unpkg.com/ipfs@latest/dist/index.min.js
创建IPFS节点： await Ipfs.create()
读取文件内容： 用FileReader读取用户选择的文件。
上传文件到IPFS： await node.add({ path: file.name, content: fileContent })
显示IPFS哈希值： 把上传后得到的哈希值显示在页面上。

代码解释：

Ipfs.create()：这行代码创建了一个IPFS节点。浏览器环境下的js-ipfs节点默认运行在浏览器中，使用IndexedDB存储数据。
node.add()：这个函数将文件添加到IPFS网络。它返回一个包含文件信息的对象，其中cid属性就是文件的哈希值。
result.cid.toString()：将CID对象转换为字符串形式的哈希值。
await node.stop()：停止节点，释放资源。每次使用完节点都应该停止它，避免资源占用。

注意事项：

权限问题： 浏览器对本地存储有一定的限制，所以js-ipfs节点默认使用浏览器的IndexedDB来存储数据。
节点启动时间： 第一次启动js-ipfs节点可能需要一些时间，因为它需要初始化一些配置。
文件大小限制： 浏览器对上传文件的大小也有一定的限制，如果上传大文件可能会导致浏览器崩溃。

第三部分：IPFS的应用场景，骚得有价值！(实际应用)

IPFS的应用场景非常广泛，下面列举几个比较常见的：

去中心化网站： 你可以把你的网站部署到IPFS上，这样你的网站就不会因为服务器挂掉而无法访问。
- 原理： 把网站的静态文件（HTML、CSS、JavaScript、图片等）上传到IPFS，然后用IPNS（IPFS Name System）创建一个可变的地址，指向你的网站。
- 好处： 抗审查、高可用、防篡改。
文件存储和共享： 你可以用IPFS来存储和共享文件，就像一个去中心化的网盘。
- 应用： 团队协作、文件备份、内容分发。
- 案例： Textile、Pinata。
NFT（Non-Fungible Token）： NFT的元数据（图片、视频、音频等）可以存储在IPFS上，保证NFT的持久性和不可篡改性。
- 原因： 如果NFT的元数据存储在中心化服务器上，服务器挂了，NFT也就废了。
- 优势： 保证NFT的长期价值。
内容分发网络（CDN）： IPFS可以作为CDN使用，加速网站的访问速度。
- 原理： 把网站的静态资源存储在IPFS上，用户从离自己最近的IPFS节点下载资源。
- 优势： 降低服务器压力，提高访问速度。
数据溯源： IPFS可以用于存储数据的历史版本，方便进行数据溯源。
- 应用： 供应链管理、知识产权保护。

表格：IPFS应用场景对比

应用场景	描述	优势	劣势
去中心化网站	网站静态文件存储在IPFS上	抗审查、高可用、防篡改，无需担心服务器宕机	IPNS解析速度慢，需要IPFS Companion插件或网关支持
文件存储和共享	作为去中心化网盘使用	数据安全、隐私保护、不易丢失，可永久存储	存储需要付费，需要节点保持在线
NFT元数据存储	NFT的图片、视频等元数据存储在IPFS上	保证NFT的持久性和不可篡改性，防止元数据丢失导致NFT失效	需要长期pinning服务，确保数据不被垃圾回收
CDN内容分发	网站静态资源存储在IPFS上，用户从离自己最近的节点下载	加速网站访问速度，降低服务器压力，节省带宽成本	节点分布不均匀，可能影响访问速度
数据溯源	存储数据的历史版本，方便追溯数据的来源和修改记录	保证数据的完整性和可追溯性，防止数据被篡改或丢失	存储成本高，需要维护大量的历史数据

第四部分：IPFS的未来，骚气冲天！(发展趋势)

IPFS还很年轻，但它的潜力是巨大的。未来，我们可以期待这些发展趋势：

更快的IPNS解析： IPNS的解析速度一直是IPFS的痛点。未来，可能会出现更高效的IPNS实现，或者其他的命名系统。
更好的浏览器支持： 浏览器厂商可能会直接支持IPFS协议，让用户无需安装插件就能访问IPFS内容。
更成熟的生态系统： 围绕IPFS会出现更多的工具和服务，比如去中心化存储市场、去中心化应用开发框架等。
与Web3的深度融合： IPFS将成为Web3基础设施的重要组成部分，为去中心化应用提供存储和内容分发服务。

表格：IPFS未来发展趋势

趋势	描述	可能的影响
IPNS解析优化	更快速、更高效的IPNS实现	提升用户体验，加速去中心化网站的访问速度
浏览器原生支持	浏览器直接支持IPFS协议	降低用户使用门槛，推动IPFS的普及
生态系统完善	围绕IPFS出现更多的工具和服务	降低开发难度，丰富应用场景
Web3深度融合	IPFS成为Web3基础设施的重要组成部分	推动Web3应用的发展，提供可靠的存储和内容分发服务

第五部分：注意事项，别骚过头了！(风险提示)

虽然IPFS很强大，但也要注意一些问题：

数据持久性： 除非你主动pin住你的文件，否则它们可能会被IPFS网络垃圾回收。你需要使用Pinata、Infura等 pinning 服务，或者自己搭建IPFS集群。
隐私问题： IPFS上的文件是公开的，除非你加密它们。
法律风险： 不要存储和共享非法内容。
性能问题： js-ipfs的性能不如go-ipfs，尤其是在处理大文件时。
安全风险： 虽然IPFS本身是安全的，但如果你的应用存在漏洞，可能会被攻击者利用。

总结：

IPFS是一个很有前景的技术，它为我们提供了一种新的存储和共享数据的方式。虽然它还不够成熟，但它正在快速发展。掌握IPFS技术，将会让你在未来的Web3世界里更加游刃有余。

好了，今天的讲座就到这里。希望大家能从中学到一些东西，然后去尝试一下，感受一下IPFS的魅力。记住，技术是用来改变世界的，骚起来吧！

发表回复 取消回复

发表回复取消回复