IPFS音乐播放器

IPFS相关

IPFS第一次亲密接触

  • 什么是IPFS

  • IPFS对比HTTP/FTP等协议的优势

  • IPFS应用场景

-移动数据 交易 路由 网络

  • 定义数据 命名
  • 使用数据

具体场景;
挂载全球文件
版本管理功能
数据库
加密平台
各种类型cdn
永久访问的链接

​

ipfs入门

  • 官网地址：https://ipfs.io
  • 下载安装：https://dist.ipfs.io/#go-ipfs
  • 节点初始化
    • ipfs init
    • 如果出现Error: cannot acquire lock: can't lock file 删除其后边给出的repo.lock文件即可
  • 节点配置
    • ipfs id 查看当前节点id等信息
    • ipfs config show ipfs配置信息
  • 节点服务器daemon
    • ipfs daemon
  • 修改IPFS默认路径
  • 开放API请求
    • ipfs config --json Addresses.API '"/ip4/0.0.0.0/tcp/5001"'
  • 开放公共网关
    • ipfs config --json Addresses.Gateway '"/ip4/0.0.0.0/tcp/8080"'

发布数据

  • 上传文件

    ipfs add haha.txt文本

    ipfs add cat.jpg图片

    ipfs add -q cat.jpg 只输出hash结果

    hash记录返回的文件路径信息

  • 上传/查看目录

    添加目录: ipfs add -r dir

    查看目录: ipfs ls Qmej3u92BHJVkkiC8F5uL1J4a98no76TnXmQxHGXCHGE7t

  • 发布网站

    把包含index.html的文件夹add到ipfs网络即可

    ​

获取数据

命令行获取 cat/get

ipfs cat QmaoahyA1UejtgPifPvjpsviePsDnJn8vHrYAN9nfF7w9N 查看文本

ipfs cat QmaoahyA1UejtgPifPvjpsviePsDnJn8vHrYAN9nfF7w9N > new-haha.txt 保存文本

ipfs cat Qmd286K6pohQcTKYqnS1YhWrCiS4gz7Xi34sdwMe9USZ7u > new-cat.jpg保存图片

ipfs get QmZSwQghczB41omjfJipFPQ3FovYyLvXR9oa4Y9LQS7Urp -o tomcat.jpg获取并保存文件

ipfs get QmZSwQghczB41omjfJipFPQ3FovYyLvXR9oa4Y9LQS7Urp -Cao tomcat-go 压缩并下载文件

ipfs get QmYtrQVXatZGm1WRKZ29vUt5tFa24xnTvhv6D71DSNVttZ -o ipfs-day01获取文件夹

浏览器访问获取

  1. 在http://localhost:5001/webui下搜索hash值，可以raw查看原数据，download下载文件

  2. 在8080端口访问：http://localhost:8080/ipfs/Qmd286K6pohQcTKYqnS1YhWrCiS4gz7Xi34sdwMe9USZ7u

  3. 在ipfs.io访问：https://ipfs.io/ipfs/Qmd286K6pohQcTKYqnS1YhWrCiS4gz7Xi34sdwMe9USZ7u

    不需要FQ的网关：https://ipfs.infura.io/ipfs/Qmd286K6pohQcTKYqnS1YhWrCiS4gz7Xi34sdwMe9USZ7u

文本数据
图片数据
音频数据

files文件/文件夹操作

ipfs files cp <文件/文件夹的hash> <目标文件/文件夹> 拷贝文件

ipfs files ls -l 查看目录

ipfs files mkdir 创建目录

ipfs files cp 拷贝

ipfs files mv 移动

ipfs files stat 状态

ipfs files read 读取

React音乐播放器

音乐列表数据

  • 音乐名称/歌手等文本信息

  • 专辑图片展示

播放音频数据

  • 网易音乐api地址：

    https://github.com/Binaryify/NeteaseCloudMusicApi

  • ipfs-api：https://github.com/ipfs/js-ipfs-api

    • 初始化环境端口号开启服务：
    # Show the ipfs config API port to check it is correct
> ipfs config Addresses.API
/ip4/127.0.0.1/tcp/5001
# Set it if it does not match the above output
> ipfs config Addresses.API /ip4/127.0.0.1/tcp/5001
# Restart the daemon after changing the config

# Run the daemon
> ipfs daemon
    • cat获取数据
    ipfs.files.cat("QmY4NqRyr9SebC3P6W3pzg22UK3QsJNDKGzDHqQZsEyPi3", function (err, file) {
    if (err) {
        throw err
    }
    const json = file.toString('utf8');
    console.log(json)
    that.setState({
        songInfo: JSON.parse(json)
    })

})
    • add 添加数据
    const ipfsAPI = require('ipfs-api')
const ipfs = ipfsAPI('localhost', '5001', {protocol: 'http'})
const buffer = Buffer.from('hello ipfs-api!')
ipfs.add(buffer)
    .then( rsp => console.log(rsp[0].hash))
	.catch(e => console.error(e))

    ​

  • 设置cors

ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["PUT", "GET", "POST", "OPTIONS"]'
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["*"]'
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials '["true"]'
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Headers '["Authorization"]'
ipfs config --json API.HTTPHeaders.Access-Control-Expose-Headers '["Location"]'

ipns

  • 绑定ipfs节点, 把一个文件/文件夹的hash发布到自己的ID下

ipfs name publish QmSx37PT8iV2XxzfHLMRYSxZEt87uE3jdQwCyz7otd5ktP

  • 查看节点绑定的ipfs路径

ipfs name resolve [peerId]