设为首页收藏本站
开启辅助访问 手机用户广告合作切换到宽版

元宇宙织梦网(区块链大数据 芝麻卡NFR：吃饭赚钱 睡觉赚钱 做梦赚钱)

 找回密码
 立即注册

QQ登录

只需一步，快速开始

元宇宙织梦网(区块链大数据 芝麻卡NFR：吃饭赚钱 睡觉赚钱 做梦赚钱)»芝麻卡社区 › 区块链技术应用 › 区块链技术 › IPFS开发简介与入门实战

社区广播台

返回列表 发新帖
查看: 3399|回复: 0

IPFS开发简介与入门实战

[复制链接]
发表于 2021-4-22 23:39:31 | 显示全部楼层 |阅读模式
本帖最后由 赤膊医数 于 2021-4-22 23:41 编辑 ' f# ]( }/ g9 r; t# o2 a
7 u9 k/ W+ j/ N$ a( h
2018年，最火爆且值得期待的区块链项目莫过于EOS和IPFS。1、IPFS简介
  • IPFS是什么) @% X* Q0 V: G# Q( F/ [- a$ J1 u/ K
    星际文件系统IPFS（InterPlanetary File System）是一个面向全球的、点对点的分布式版本文件系统，目标是为了补充（甚至是取代）目前统治互联网的超文本传输协议（HTTP），将所有具有相同文件系统的计算设备连接在一起。原理用基于内容的地址替代基于域名的地址，也就是用户寻找的不是某个地址而是储存在某个地方的内容，不需要验证发送者的身份，而只需要验证内容的哈希，通过这样可以让网页的速度更快、更安全、更健壮、更持久。
    " B$ m4 H, S3 k: Z( Q) C) E1 P1 F以上内容来自巴比特官网介绍
    & O. g# q3 ?+ F" U! V2 c7 E( N! F$ U0 b  bIPFS是基于区块链技术的去中心化存储网络，实现了永久性存储。! _, s, K1 |/ x; h( I
  • IPFS的火热& Q1 ^- b5 L+ ?7 @
    Filecoin ICO是迄今为止涉及金额最大的ICO，仅一小时就募集了接近2亿美元，打破ICO记录，成为2017年最火爆的区块链项目。IPFS项目吸引了世界各地数字货币投资者和互联网从业者的密切关注，2018年比较值得期待的是IPFS主网的上线。然而就在前段时间，官方公布说上线时间延期到年底。
    * g$ N7 \1 t: Q& |, o4 _, J& v. y* ?注：Filecoin是IPFS激励层的加密数字货币（即代币），有点类似于以太坊平台上的以太币。
    % g& ~- F' k! |! |' XIPFS官网：https://ipfs.io/
    & K5 s; P! f# d  HFilecoin官网：https://filecoin.io/' M$ a: J2 @# W  P# M
  • IPFS的应用案例
    + Q0 `, T! V3 ?8 i. D' ?GitHub有两款开源项目，且有对应网址，分别是音乐播放器和视频播放器。! u% U, x1 ~) ?7 K* E( m; j# p
    2 B: U8 f# [, V5 ]; @; e
    • IPFS音乐播放器. o) q( H1 x6 T8 b9 K

      0 F, o+ r" g2 N, r) `$ A3 c7 n5 v1 N6 M9 X$ X
      5521305-ae7a09ee6683f37a.jpg
      ) j5 [! Z" U/ g7 A( H) M9 I' V; b, Q) ]5 S
      IPFS音乐播放器
        v9 o, W( x- R. d. Q
      9 n- B/ B# U* B& bIPFS音乐播放器网址：https://diffuse.sh/1 j) S" i: q5 V1 j) w( t( u8 Q
      GitHub地址：https://github.com/icidasset/diffuse
      8 q0 F; w! C3 ]" H. T% {
    • IPFS视频在线播放器
      - u! L% h" L, E/ [2 w. t
      / u3 Z/ U% ^4 ^, h1 c# _$ K$ ~, {  c3 e/ q8 k! A" }9 A$ a
      5521305-6bb3339c3bf60f73.png 7 F3 m" Y  I1 x4 ^
      8 a) G. _2 |' M
      IPFS视频在线播放器首页/ r8 D9 F4 z* T4 P

      - ]* [( e+ V/ ]* {
      . x7 q2 X, o5 f* P

      I  X" _- R+ N 5521305-f10de97d94961616.png
    0 ~! k! u& h, A* c) Q2 ^  F" O
    * H4 K% D& |4 ~' DIPFS视频在线播放器播放电影
      X7 T  j" e  k# ]# k( @9 x& r+ F6 V$ Z- U. ?# o& j9 Y
    号称是国内第一个IPFS应用
    $ H8 l$ b2 W4 O( o( ]$ r2 DIPFS视频在线播放器网址：http://www.ipfs.guide/
    $ f) o. ?; C1 `# n! U4 LGitHub地址：https://github.com/download13/ipfstube5 G/ \; k) I0 N7 Q/ a
    可用于测试的电影视频Hash（这里只列举两部）：* z5 T4 i( q: M7 m
    神秘巨星：QmWBbKvLhVnkryKG6F5YdkcnoVahwD7Qi3CeJeZgM6Tq68
    1 c' x- i3 m5 ]. ^盗梦空间：QmQATmpxXvSiQgt9c9idz9k3S3gQnh7wYj4DbdMQ9VGyLh
    ; _6 v6 c0 q; O, I
2、IPFS的安装既然IPFS这么牛，有必要了解一下IPFS的开发，先从IPFS的安装开始。
' L  c! x2 q5 U% E
  • IPFS Desktop
    1 {- T) ?+ y0 N3 u. t9 |3 \6 J当然，可以直接安装IPFS节点桌面管理软件来体验一下。该软件可以方便地运行和管理自己的节点，查看IPFS节点资源信息，支持二次开发。该项目是Node.js编写的，已开源。
    / ?) `6 j* j: g# \4 h4 s* j( N  j) L2 J3 l  U

    * I% n) o" Q8 T- S 5521305-6a23898f658aaa52.png " {1 S6 w% O5 o* ?! ]7 W
    * c; h" n; Q. v- ]* _, k
    IPFS节点桌面管理软件9 a* W% |$ b9 L# P) u% C* M0 q2 S

    & R0 O. y8 P% _4 H; [' l+ {3 \. `; XGitHub地址：) E  a9 |3 I& _: x
    https://github.com/ipfs-shipyard/ipfs-desktop8 i4 N% S1 V) J1 A0 \% c, L* A1 ]3 U
  • Go-IPFS
    ! k" U0 I+ R3 ?% @+ D5 ?6 Q进入IPFS的官网，找到并切换到"Install"页面，点击"Download IPFS for your platform"，会跳转到如下网址（需要翻墙）：- R: j: q$ D7 i0 g% j
    https://dist.ipfs.io/#go-ipfs
    ) f& V9 N" j# q# J7 ^5 J9 L1 b* B
    0 \2 ]% b6 ?% k  B6 r% i 5521305-4fc9604f1c9a3f8a.png 3 @. [1 T- h5 H* Z% s

    4 x7 v$ g; l' S下载Go-IPFS6 q% y/ }& V' G3 y

    4 ]# j  H! o; D! v. h0 h( i8 V# C& b如果打不开，可以试着去Github查看安装方法
    / e) k7 e+ N9 v& ]; w9 |5 S  {GitHub地址：https://github.com/ipfs/go-ipfs. I8 e' `* O: Y# F* N4 p
    将网页下载好的文件解压出来，下载的是"go-ipfs_v0.4.13_darwin-amd64.tar.gz"，解压出来的是go-ipfs文件夹，' b+ H9 I1 c# ^1 @+ w& F/ K8 Z; h
    然后打开终端，进入到go-ipfs文件夹根目录，复制ipfs文件到系统的bin目录，然后可以通过"ipfs version"来检查，操作如下：) l$ R) u9 W6 p) I0 x3 f
    wenzildeiMac:go-ipfs wenzil$ pwd/Users/wenzil/Desktop/study/go-ipfswenzildeiMac:go-ipfs wenzil$ lsLICENSE     README.md   build-log   install.sh  ipfswenzildeiMac:go-ipfs wenzil$ cp ipfs /usr/local/bin/ipfswenzildeiMac:go-ipfs wenzil$ ipfs versionipfs version 0.4.13' @( J; b4 H/ \9 e: U
3、IPFS节点的创建、查看和启动以下是安装官网的Go-IPFS步骤下实验的
8 X. f* a, \6 M: C8 @: I
  • 创建节点1 x4 Q5 N1 M# x  |2 _  k4 g
    进入到当前用户的根目录，并使用"ipfs init"命令创建节点，可以用"open ./"打开创建节点生成的".ipfs"目录。0 y, X- ~7 E4 k% U
    wenzildeiMac:go-ipfs wenzil$ cd ~/wenzildeiMac:~ wenzil$ pwd/Users/wenzilwenzildeiMac:~ wenzil$ ipfs initinitializing IPFS node at /Users/wenzil/.ipfsgenerating 2048-bit RSA keypair...donepeer identity: QmWH4xmGBznY9CJ4SjxpxWqGwMwrFtPdjgeweLCfJxW8j9to get started, enter:    ipfs cat /ipfs/QmS4ustL54uo8FzR9455qaxZwuMiUhyvMcX9Ba8nUH4uVv/readmewenzildeiMac:~ wenzil$ cd .ipfswenzildeiMac:.ipfs wenzil$ open ./3 S, l! ]3 ?) i* G
/ F8 e7 b: G/ z0 e) r2 @3 Q! h5 k
5521305-5a5a65e04aadc891.png
* a& j1 N- `( B4 P/ F+ Q: d1 k% m! P' b
IPFS节点的创建
5 F7 F+ S4 k8 }8 J. x
  |+ D' B0 f9 W6 z) v) v3 E
  • 查看节点id
    . ^0 o  y8 y+ V3 R- }9 d: w+ \* nwenzildeiMac:.ipfs wenzil$ ipfs id{    "ID": "QmWH4xmGBznY9CJ4SjxpxWqGwMwrFtPdjgeweLCfJxW8j9",    "PublicKey": "CAASpgIwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCt98O5zNptBtmSF6xYdOHAMunQsXE9rAmgqBXVPLJk+AoaBjNiAipB+sTXKwaj8stp9c3iuSzz10+dyYI38bq4TPDCsHnQ3PjKSgZwEaT0M6pJhGqJcSbLY57CjQOEwgFe+tw3b4hcoDvvNJMG0dZZg1r9xnfevBz0DNewlj2vtviSTQL6r/ZXlD04GsytxTSQ2pzMJTG3QmYyokeZ37DT7Vwa+IJjDCiDJC5BlZ204zunZBx3tqWUn2Hr2NtEX+4YDdX4SBHa0ZDNqZmzLRe5YlAXjVI0ONHs+BVsC1v1L5we52iSYCSgVHoxRP/pa9EZdHMvgs9QeAa5jO90yxgTAgMBAAE=",    "Addresses": null,    "AgentVersion": "go-ipfs/0.4.13/",    "ProtocolVersion": "ipfs/0.1.0"}
  • 修改IPFS默认存储空间
    7 b3 h3 {9 D8 w& J/ R) E* f" J$ M3 w存储节点默认存储大小为10G，如果你想修改存储空间，可以修改config配置文件，找到StorageMax并修改5 G6 |9 s1 ~* _. R/ Y
    wenzildeiMac:~ wenzil$ export EDITOR=/usr/bin/vimwenzildeiMac:~ wenzil$ ipfs config edit  ) a6 o3 t: l# }  P- B) q; x
    5521305-9a3e346dfd368715.png
    : N2 g! U( I# a
    9 y; V4 ]5 c+ U: b. Y, w2 B3 b修改IPFS默认存储空间
    # V8 B9 j$ b* U% r' k0 E. p( \0 z3 ]# I8 C& a2 b
  • 启动和同步节点服务器9 [8 P7 B/ M2 ^$ w) R: x
    执行"ipfs daemon"命令，可以同步节点数据到IPFS网络。- d+ b& l% o9 R. V5 l0 \0 e; C
    wenzildeiMac:.ipfs wenzil$ ipfs daemonInitializing daemon...Adjusting current ulimit to 2048...Successfully raised file descriptor limit to 2048.Swarm listening on /ip4/127.0.0.1/tcp/4001Swarm listening on /ip4/192.168.1.100/tcp/4001Swarm listening on /ip6/::1/tcp/4001Swarm listening on /p2p-circuit/ipfs/QmWH4xmGBznY9CJ4SjxpxWqGwMwrFtPdjgeweLCfJxW8j9Swarm announcing /ip4/100.64.9.179/tcp/55898Swarm announcing /ip4/127.0.0.1/tcp/4001Swarm announcing /ip4/192.168.1.100/tcp/4001Swarm announcing /ip6/::1/tcp/4001API server listening on /ip4/127.0.0.1/tcp/5001Gateway (readonly) server listening on /ip4/127.0.0.1/tcp/8082Daemon is ready4 \: D9 A. n, M& S( q) q. y! W
4、IPFS运行体验
  • IPFS查看ReadMe
    - b: O: @) a" O6 |可以回去查看执行"ipfs init"命令的时候，返回的内容。打开一个新的终端，操作如下：. ?6 F) a6 O; ~3 @) P: C% h7 I
    wenzildeiMac:~ wenzil$ ipfs cat /ipfs/QmYwAPJzv5CZsnA625s3Xf2nemtYgPpHdWEz79ojWnPbdG/readmeHello and Welcome to IPFS!██╗██████╗ ███████╗███████╗██║██╔══██╗██╔════╝██╔════╝██║██████╔╝█████╗  ███████╗██║██╔═══╝ ██╔══╝  ╚════██║██║██║     ██║     ███████║╚═╝╚═╝     ╚═╝     ╚══════╝If you're seeing this, you have successfully installedIPFS and are now interfacing with the ipfs merkledag! -------------------------------------------------------| Warning:                                              ||   This is alpha software. Use at your own discretion! ||   Much is missing or lacking polish. There are bugs.  ||   Not yet secure. Read the security notes for more.   | -------------------------------------------------------Check out some of the other files in this directory:  ./about  ./help  ./quick-start     <-- usage examples  ./readme          <-- this file  ./security-notes
  • Web管理界面9 {/ u, H6 l9 O5 a0 S5 P
    IPFS节点服务器启动后，可以用浏览器访问：http://localhost:5001/webui
    $ o' E3 K; t" D# r3 K3 l% Z4 N有本地配置、节点连接、本地节点文件等信息，如图：
    & ?$ H# s- X* f/ l0 k  I
    ( r" }' n, s( T  q1 M1 v* v% A
    5 s3 z# e% h  E 5521305-e7b2945efee17b07.png
    . K& ^( B& ]- r. a& R1 E+ ~
    9 K6 D$ k) H4 C# A) e$ a' V* ~IPFS的Web管理界面
    % q1 f  @' b/ }3 H4 R: j: y7 [0 |% D% A7 r8 u/ T

    2 G- ~# N' U. r$ V5 w  _1 y' Z/ i+ d# `0 L% |$ L
5、设置跨域资源共享当我们在前端通过js接口操作ipfs时，会遇到跨域资源访问问题，可以在终端执行以下配置来解决：$ ]5 c9 e: a9 O
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"]'6、IPFS的基本操作6.1 添加单个文件到IPFS节点
  • 新建文件
    . F& W+ T1 |( v: awenzildeiMac:ifps_test wenzil$ vi test.txtwenzildeiMac:ifps_test wenzil$ cat test.txt IPFS测试文件
  • 添加文件到IPFS节点
    7 S, w& n$ g& n+ t" VwenzildeiMac:ifps_test wenzil$ ipfs add test.txt added QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab test.txt添加文件到IPFS节点后，返回了文件的哈希值
    ! ^3 N- y6 w  V% T. b5 j
  • 查看IPFS节点的文件
    8 ]: P8 E/ z9 A2 Z* ywenzildeiMac:ifps_test wenzil$ ipfs cat QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbIPFS测试文件注意：此时的文件只是添加到了本地的IPFS节点，读取的是本地数据，可以通过如下网址查看。
    1 Y' }6 o9 a& V0 S" Y: {http://localhost:8080/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab; l+ }" t( C4 h1 X
    通过"ipfs daemon"命令启动节点服务器，会将本地节点文件同步到外网，同步成功后，这时就可以访问如下网址来查看（如果访问失败，试着翻墙看看）。4 Y* \  Q2 T$ A* z- u* X/ A
    https://ipfs.io/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab
    5 J9 Q- N9 r9 J  f, U! v* S3 j3 W2 ~0 t( g
    5521305-47b7c5838326410f.png
    # |  a( s4 ~( A' ~1 S* \& v  W
    4 B5 w0 H5 T: I. V: \& q查看IPFS文件内容. Y, v, z) a! {2 Y8 `8 U1 I5 F
    2 i5 Y& a5 W( H7 s# C, l
    如果访问成功的话，说明已经存储到IPFS网络中。目前IPFS网络暂未加入代币Filecoin机制，所以存储读取文件免费，速度也比较慢。% p+ A" y, ^" \/ D( a8 b
  • 下载IPFS节点的文件8 U/ g  J! k1 G/ J. |
    wenzildeiMac:ifps_test wenzil$ ipfs get QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbSaving file(s) to QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab 25 B / 25 B [========================================================] 100.00% 0s查看当前目录，发现多了一个"QmSV..."的文件"4 J% |) U( }: k: F, y" E# R& d

    * W% }9 k8 S9 ^+ W# U. U) I& {3 ?$ j. }: o8 U
    5521305-eb55bb51ae418085.png $ f% S, a5 J. z6 f' J
    9 o5 l0 F" _5 L4 [% w  s3 G
    下载IPFS节点的文件$ S& S1 l9 w* ?( \( m

    9 u  U2 i0 W) C. Z# n- j* L; ~& }& S) m4 C8 N/ x
6.2 创建文件夹存储文件
  • ipfs命令新建文件夹
    + u( \+ `) d% Q" r. lwenzildeiMac:ipfs_test wenzil$ pwd/Users/wenzil/Desktop/study/ipfs_testwenzildeiMac:ipfs_test wenzil$ ipfs files mkdir /wenzilwenzildeiMac:ipfs_test wenzil$ ipfs files cp /ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab /wenzil/test.txtwenzildeiMac:ipfs_test wenzil$ ipfs files lstestwenzilwenzildeiMac:ipfs_test wenzil$ ipfs files ls /testwenzilwenzildeiMac:ipfs_test wenzil$ ipfs files rm -rf /testwenzildeiMac:ipfs_test wenzil$ ipfs files lswenzilwenzildeiMac:ipfs_test wenzil$ ipfs files ls /wenziltest.txtwenzildeiMac:ipfs_test wenzil$ ipfs files read /wenzil/test.txtIPFS测试文件注："ipfs files rm -rf /文件夹名"可以删除文件夹。* v( j) S* Y, U, u; U

    & ^/ F- x- n. F  O" z% w# q) o* i. A9 n
6.3 IPFS上传文件夹
  • ipfs命令添加文件夹
    ( W+ ?( A/ _9 Z$ p+ |先在本地创建一个文件夹和对应文件，如图：
    ! @7 i$ v" M" B5 k& [+ \" \
    ! p9 J  J6 I% O0 N4 m* g: m8 Z6 R5 X) l) S, {- l# n* L1 L8 B
    5521305-3f47f331d7d63fb6.png
      ~1 F3 w& q* j7 `' O2 n( Y/ E; l0 s/ Y8 f
    本地创建文件夹及文件
    3 \5 A' ]3 H& Z/ M# E) Y* Z4 S# y5 _9 O
    然后通过"ipfs add -r 文件夹"命令添加整个文件夹
    # \, \4 O8 l8 S) J5 z: `( @# e6 l wenzildeiMac:ipfs_folder wenzil$ pwd /Users/wenzil/Desktop/study/ipfs_folder wenzildeiMac:ipfs_folder wenzil$ ls portrait.jpeg   readme.txt wenzildeiMac:ipfs_folder wenzil$ cd .. wenzildeiMac:study wenzil$ pwd /Users/wenzil/Desktop/study wenzildeiMac:study wenzil$ ipfs add -r ipfs_folder/ added   QmbHptfJfyuGAZxstFYgAVfz33cytR1seTD3ZabBSDd899     ipfs_folder/portrait.jpeg added   QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQv  T ipfs_folder/readme.txt added   QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj   ipfs_folder wenzildeiMac:study wenzil$
  • 查看文件夹的文件内容$ M3 \% Z- Z) F1 `, o
    wenzildeiMac:study wenzil$ ipfs cat QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQvT 我是区块链开发小白，请大家多多赐教，谢谢。欢迎阅读我的区块链系列文章，简书地址：https://www.jianshu.com/u/5f809ab3698cwenzildeiMac:study wenzil$ ipfs cat /ipfs/QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQvT我是区块链开发小白，请大家多多赐教，谢谢。欢迎阅读我的区块链系列文章，简书地址：https://www.jianshu.com/u/5f809ab3698cwenzildeiMac:study wenzil$ ipfs cat /ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj/readme.txt我是区块链开发小白，请大家多多赐教，谢谢。欢迎阅读我的区块链系列文章，简书地址：https://www.jianshu.com/u/5f809ab3698c
  • 查看IPFS对应文件夹
    " o$ s# q) p: o; \6 C, `访问文件夹对应的IPFS地址：; A9 k+ c) g  W' t/ c6 m% a: \3 F1 a
    https://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj0 E* K, H1 @  D# U( q
    第一次访问的时候，需要同步数据到IPFS网络，等待时间有点久，慢到让你以为同步失败了。
    . m+ R, W4 O5 Q) C% z1 D1 S3 n+ M2 ?0 I1 g$ N2 S( X- R0 c8 Z; Y
    5521305-72d506bca193abec.png
      X- U+ b; Z; b9 @; x) [8 O, y0 m! c# D, W1 b; V; j  R
    查看IPFS对应文件夹% o0 J" W5 [( n8 X( B

    6 w  o+ F5 u7 J  F; O+ Z" r访问文件夹对应的文件，如看到图片文件，访问ipfs网关：: m. J& I* y  J3 p+ I- E
    https://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj/portrait.jpeg
    7 K) d, V9 P6 F8 x% x1 D4 K; I2 ~( N6 @: l5 w- q2 X% P
    5521305-b2de93582c9d0dac.png ! b9 \/ p. R8 V

      _9 O& ?9 E3 q$ D( g' b查看IPFS文件夹对应文件
    + w6 i" _2 Y' r2 C, P
    & d! ^  O4 Z3 G4 u或者通过文件的Hash来访问，如访问txt文件的地址：
    - [; ?6 c& {$ G& ]4 l% T) b+ }! T, Whttps://ipfs.io/ipfs/QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQvT
    & n, ]/ e5 j. G2 a7 x' _
    1 z% _( J8 _5 f3 e) O 5521305-9f5f8194546ee968.png ( X2 D% C' d$ V; n7 `1 Q/ m

    ; H; P( v. R, h* a1 E! l1 e4 G通过文件Hash访问查看
    2 R/ ~3 i8 T" c+ S/ C0 s' Z3 {' A' j& r5 A! y
    " I# C& X! k' y- c# d
6.4 添加简单网页到IPFS节点
  • 网页效果和项目结构
    + L# n0 }: S  v( {) ]" s实现一个简单的实时显示系统当前时间的网页，效果如图：& ?$ U5 f- T- O: t: v% s- |

    . d4 ^( x/ ^8 Q: l7 r# \* z$ x; k& ]9 D
    5521305-13caff069d686e6e.png 4 \' [! m( r. x. x

    / P6 R1 Z( Q* p7 n  `* c, UIPFS添加简单网页
    # S7 ^% E# }, I4 z1 A$ ]* C' y* p0 z3 O5 N, O
    工程结构如图:
    9 V. z$ `. A0 J  h  M1 Y. I( ]

    / S' C$ V; a9 g- H8 z 5521305-1f43ed03e72738db.png
    3 G, J% S( j  B' g* a4 x5 u  z" \! O2 L
    网页工程结构
    * [0 Q6 h( b0 M& s/ H' M1 E) K6 ?# V3 J6 {0 ^4 [- Q

    # j& J( C) R; K/ K5 L
实现代码比较简单，这里就不贴代码了。
0 h+ U; d; V) u2 R
  • ipfs命令添加文件夹
    9 p1 S# Q! G* p* u2 i5 d$ o. @wenzildeiMac:study wenzil$ ipfs add -r ipfs_htmladded QmTj49dgFgFhfNRTUYyUSzk3puj7vvDoVsAynFrL7GAj1d ipfs_html/index.htmladded QmeHFBSyN9KqeZWKyKTWKYzDRU192YWDRjf6sLWFWhwk2z ipfs_html/styles.cssadded QmWkEfgL2pjo7n8b9YBCv4qwE77YWePkSscxiHQfPpwpkp ipfs_html/time.jsadded QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD ipfs_html记得要开启IPFS节点服务器进行数据的同步，可以使用"ipfs daemon"命令在新的终端窗口打开运行。
    : O9 D3 g9 x0 |# `2 r& j/ H/ H2 rwenzildeiMac:~ wenzil$ ipfs daemonInitializing daemon...Adjusting current ulimit to 2048...Successfully raised file descriptor limit to 2048.Swarm listening on /ip4/127.0.0.1/tcp/4001Swarm listening on /ip4/192.168.6.31/tcp/4001Swarm listening on /ip6/::1/tcp/4001Swarm listening on /p2p-circuit/ipfs/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrzSwarm announcing /ip4/127.0.0.1/tcp/4001Swarm announcing /ip4/192.168.6.31/tcp/4001Swarm announcing /ip6/::1/tcp/4001API server listening on /ip4/127.0.0.1/tcp/5001Gateway (readonly) server listening on /ip4/127.0.0.1/tcp/8082Daemon is ready
  • 访问ipfs对应文件. x9 K8 p0 e2 d3 b; S1 D7 n% w- V
    浏览器访问ipfs网关：" l; T6 o9 t8 i- J) V6 l6 @
    https://ipfs.io/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD/
    # D3 Z" P- P/ d
      l6 ^0 H3 c& A0 l 5521305-f507c2fadf344358.png % V5 p' F- p! ]5 h; I, Q* Q5 G. u

    * f) c. x# [- M& Q. q: a查看IPFS对应网页+ \$ x: F3 {+ C2 R4 z  [
    * Z; m: @* y  B: r; n) |

    0 ?( j1 l$ m+ d2 t' p$ z
6.5 IPNS绑定节点名
  • IPNS绑定节点操作
    5 o* y: q7 C2 B+ r' P1 d每次修改文件内容后，文件的哈希值就会发生变化。对于网站而言，发布后可能还需要做修改，这时需要IPNS绑定节点名。每次更新网站内容后，重新publish一次更新发布到IPNS即可。8 R% Z& U8 V8 B
    刚才的html根目录的哈希值是QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD，操作如下：
    3 u: p8 t9 N& ewenzildeiMac:study wenzil$ ipfs name publish QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDDPublished to QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz: /ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD
  • 查看当前节点( ?0 b5 k6 R: y' n# c% E
    wenzildeiMac:study wenzil$ ipfs id{    "ID": "QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz",    "PublicKey": "CAASpg......",    "Addresses": [        "/ip4/127.0.0.1/tcp/4001/ipfs/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz",        "/ip4/192.168.6.31/tcp/4001/ipfs/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz",        "/ip6/::1/tcp/4001/ipfs/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz",        "/ip4/14.xxx.xxx.xxx/tcp/4001/ipfs/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz",        "/ip4/61.xxx.xxx.xxx/tcp/20472/ipfs/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz"    ],    "AgentVersion": "go-ipfs/0.4.13/",    "ProtocolVersion": "ipfs/0.1.0"}    发现"ID"和上面"Published to"返回的节点一致，都是"QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz"  i( g; \  ?( z  f2 q" K4 G
  • 验证节点
    . D) A% q6 Q8 B命令为："ipfs name resolve 节点ID“
    , E2 }  K" B7 P* x, `+ ?$ |wenzildeiMac:study wenzil$ ipfs name resolve QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD
  • 访问IPNS对应文件9 i# x; g5 n5 m8 W: Y% G
    浏览器访问ipfs网关：  d; v* ?5 _7 Y
    https://ipfs.io/ipns/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/+ O+ F; s+ _- ]# v3 g$ S

      ?$ F7 r5 z. F

% u. E- `/ ?/ Y- W4 V 5521305-34805df9bb0347e0.png + c& s5 q) M: U( R& r
/ C5 ~/ Q3 Z+ |5 B3 H5 z
查看IPNS对应网页, N. f: N) I( y6 o

! x& j8 ?* e3 _7 l- k7、IPFS与以太坊DApp开发实战
  • IPFS与以太坊DApp结合的好处/ U& V9 O, p. _9 \
    在以太坊平台上，往区块链写入数据需要花费以太币，调用智能合约执行每一行代码的时候，都需要一定量的gas交易费。区块链存储大数据成本很高，而且不合理。
    ( w! V6 u& s/ y可以先将文件存储到IPFS，然后得到文件的Hash存储到以太坊区块链中。读取文件的时候，从以太坊区块链中获取文件的Hash，再通过Hash来读取IPFS网络上的文件。
    . x3 I7 o9 p9 L3 }: R: E使用官方提供的ipfs-api，可以很方便地在代码中操作节点将数据上传到IPFS，或者通过Hash从IPFS读取数据。
    % e- @5 @1 f5 b* ?" o, jTruffle框架提供了快速搭建包含以太坊智能合约的React项目，可以通过"truffle unbox react"创建工程，然后安装ipfs-api依赖库。于是，可以在前端方便地调用IPFS的接口来读取、上传文件。3 g1 R# ^& W3 a
    truffle unbox react官网：. ?3 j' g2 m2 b6 q# B4 j. E# s- m. O
    http://truffleframework.com/boxes/react7 N/ s7 ^/ h% c' {
  • IPFS与DApp开发实战
    8 C, z. I; g& I$ {" t; k* Y话不多说，开始进入实战开发。
    % \+ T( A4 `% f) y4 Q6 ^% ?7.1 安装Truffle unbox react新建一个空目录"ipfs_dapp"，然后执行安装命令$ E4 V& }, k/ g5 W" h: l- _6 s
    truffle unbox reactwenzildeiMac:ipfs_dapp wenzil$ pwd/Users/wenzil/Desktop/study/ipfs_dappwenzildeiMac:ipfs_dapp wenzil$ truffle unbox reactDownloading...Unpacking...Setting up...Unbox successful. Sweet!  Commands:    Compile:              truffle compile  Migrate:              truffle migrate  Test contracts:       truffle test  Test dapp:            npm test  Run dev server:       npm run start  Build for production: npm run build7.2 安装ipfs-apinpm install --save ipfs-apiwenzildeiMac:ipfs_dapp wenzil$ npm install --save ipfs-apinpm WARN deprecated bignumber.js@6.0.0: Custom ALPHABET bug fixed in v7.0.2react-box@0.1.0 /Users/wenzil/Desktop/study/ipfs_dapp├—┬ ipfs-api@22.0.0 │ ├—— async@2.6.1 │ ├—— big.js@5.1.1 │ ├—┬ bs58@4.0.1 │ │ └—— base-x@3.0.4 # ...... 省略N多行输出7.3 修改智能合约代码修改contracts目录中的"SimpleStorage.sol"，修改后完整代码：( _' E( ^9 x$ C, }+ ~
    pragma solidity ^0.4.18;contract SimpleStorage {  // 用于存储图片的哈希值  string storedData;  function set(string x) public {    storedData = x;  }  function get() public view returns (string) {    return storedData;  }}    修改"Migrations.sol"" c* Z) u' K3 t& e( e, q  Q8 s, d
    function Migrations() public { owner = msg.sender;}修改为：constructor() public {    owner = msg.sender;}7.4 编译智能合约truffle compilewenzildeiMac:ipfs_dapp wenzil$ truffle compileCompiling ./contracts/Migrations.sol...Compiling ./contracts/SimpleStorage.sol...Writing artifacts to ./build/contracts7.5 部署智能合约进入remix-ide，复制SimpleStorage.sol代码，然后切换到"Run"菜单，选择"Injected Web3"进行智能合约的部署5 d9 w  p3 r( v; f- Q/ |4 ]
    6 g( M3 W: ^5 g9 [8 [
    5521305-e9cbe2a2b1d0327b.png
    4 J5 K: b" n" S2 {. I0 d6 z+ r; I/ s) P' N" R" L
    Remix-IDE部署智能合约
    ( c. j! @) D0 j1 b
    ) g) A( e! \; @( `- P. I' \) T9 V3 j' {) d3 f0 z
    5521305-1c0743601b91144b.png 9 z# Y2 {% v9 i% ~  o# x# x* y

    . N0 ]9 G6 w9 S6 B# ?5 pRemix-IDE部署智能合约-确认
    2 M! t. [' l5 m1 \+ c/ \2 U
    * x/ ]% o: t7 P. e2 W8 B1 a然后复制智能合约地址，App.js文件中会用到合约地址为:"0xb177d6cf6916f128c9931e610c63208d9c5a40f3"& H" G- S& n2 [
    7.5 修改App.js文件import React, {Component} from 'react'import SimpleStorageContract from '../build/contracts/SimpleStorage.json'import getWeb3 from './utils/getWeb3'import './css/oswald.css'import './css/open-sans.css'import './css/pure-min.css'import './App.css'const ipfsAPI = require('ipfs-api');const ipfs = ipfsAPI({  host: 'localhost',  port: '5001',  protocol: 'http'});const contract = require('truffle-contract')const simpleStorage = contract(SimpleStorageContract)let account;// Declaring this for later so we can chain functions on SimpleStorage.let contractInstance;let saveImageToIPFS = (reader) => {    return new Promise(function(resolve, reject) {        const buffer = Buffer.from(reader.result);        ipfs.add(buffer).then((response) => {        console.log(response)        resolve(response[0].hash);     }).catch((err) => {        console.error(err)        reject(err);     })  })}class App extends Component {   constructor(props) {   super(props)   this.state = {       blockChainHash: null,       web3: null,       address: null,       imageHash: null,       isSuccess: false  }}componentWillMount() {    ipfs.swarm.peers(function(err, res) {    if (err) {      console.error(err);    } else {      // var numPeers = res.Peers === null ? 0 :     res.Peers.length;      // console.log("IPFS - connected to " + numPeers + " peers");      console.log(res);    }});getWeb3.then(results => {    this.setState({web3: results.web3})    // Instantiate contract once web3 provided.    this.instantiateContract()  }).catch(() => {    console.log('Error finding web3.')  })}instantiateContract = () => {  simpleStorage.setProvider(this.state.web3.currentProvider);  this.state.web3.eth.getAccounts((error, accounts) => {  account = accounts[0];    simpleStorage.at('0xb177d6cf6916f128c9931e610c63208d9c5a40f3').then((contract) => {    console.log(contract.address);    contractInstance = contract;    this.setState({address: contractInstance.address});    return;  });})}render() {  return (    <div className="App">    <div style={{marginTop:10}}>智能合约地址：</div>    <div>{this.state.address}</div>    <div style={{marginTop:10}}>上传图片到IPFS：</div>    <div>      <label id="file">选择图片</label>      <input type="file" ref="file" id="file" name="file" multiple="multiple"/>    </div>    <button style={{marginTop:10}} onClick={() => {        var file = this.refs.file.files[0];        var reader = new FileReader();        reader.readAsArrayBuffer(file)        reader.onloadend = function(e) {          console.log(reader);          saveImageToIPFS(reader).then((hash) => {            console.log(hash);            this.setState({imageHash: hash})          });      }.bind(this);  }}>开始上传</button>  <div style={{marginTop:10}}>图片哈希值：{this.state.imageHash}</div>  <button onClick={() => {       contractInstance.set(this.state.imageHash, {from: account}).then(() => {          console.log('图片的hash已经写入到区块链！');          this.setState({isSuccess: true});      })  }}>图片哈希写入区块链</button>  {    this.state.isSuccess      ? <div style={{marginTop:10}}>          <div>图片哈希成功写入区块链！</div>          <button onClick={() => {              contractInstance.get({from: account}).then((data) => {                console.log(data);                this.setState({blockChainHash: data});              })            }}>从区块链读取图片哈希</button>        </div>      : <div/>  }  {    this.state.blockChainHash      ? <div style={{marginTop:10}}>          <div>从区块链读取到的哈希值：{this.state.blockChainHash}</div>        </div>      : <div/>  }  {    this.state.blockChainHash      ? <div style={{marginTop:10}}>          <div>访问本地文件：</div>          <div>{"http://localhost:8082/ipfs/" + this.state.imageHash}</div>          <div>访问IPFS网关：</div>          <div>{"https://ipfs.io/ipfs/" + this.state.imageHash}</div>          <img alt="" style={{width: 100, height: 100 }} src={"https://ipfs.io/ipfs/" + this.state.imageHash}/>        </div>      : <img alt=""/>    }    </div>);  }}export default App7.6 新建终端，执行"npm start"命令，结果如图:
    % D( \2 N* q- R9 R, Y1 } 5521305-4dba93598490e042.png * J4 ^- O' h$ @$ T( }5 c! C
    ! F3 X7 w, w& z( u& C1 [+ Y
    npm_start  n3 w7 i1 H" K6 L" ^. z7 U

    0 J; @; o4 A/ J% W" ]会自动打开网页，然后上传一张本地图片，之后点击"图片哈希写入区块链"按钮
    / Z& ^3 {$ a% h7 \
      p% k9 `1 `' [  g6 f 5521305-c5e820e466316868.png
    0 G# Z" L# }+ L, k1 A1 i, {5 g- `$ i1 K- K  m* T5 m
    运行结果1$ ~; ~( v9 s4 Y; N' S8 q. t! |# X

    4 {0 c) Q; Q1 ?, {9 Q1 ]2 u9 D- s最终效果如图:% \, M) E5 d3 U" z% Q
    # h0 Q2 N& y% ^% `( S4 Q. {- H& ]

    . A% T( r1 ^$ m& r' }5 p 5521305-a13f100335acb2e5.png 7 S# K2 ^4 e; I; ]$ C7 }
    ; i* w/ q, [, c; Y" N2 f
    运行结果; \" D" a' E* L0 n5 g* k
    $ _3 t+ q0 [5 x3 F; G$ G
    访问IPFS网关：
    $ V/ G% n. i- J: x% ~3 nhttps://ipfs.io/ipfs/QmbHptfJfyuGAZxstFYgAVfz33cytR1seTD3ZabBSDd8996 M  _& V/ l. a' s
    发现图片已经成功写入IPFS，如图：/ e. m1 i& P7 c

    / m) X" h/ K/ m" }
    ' T- `' s/ C' {( @4 C4 v 5521305-583743843cc663c0.png 3 V) r+ `! k! m, j7 |& V3 D) y0 _

    . Q) b. a6 p# m+ e- U运行结果38 u; V2 l/ j, D: z( Y

    2 K# j! \# |$ K* D3 V备注：本地IPFS网关端口默认为8080，我的电脑上端口冲突了，系统自动修改为8082。. x8 f6 M" D& G4 e: L6 \
    搞定，收工。
    2 D! n' Y8 Z& ?9 M* |1 R: \PS：刚入坑的小白，很多不懂，还请各位大佬多赐教，谢谢！$ w9 p6 n2 O$ F7 u3 N4 G

    4 y9 ^/ n1 }% a5 q- n, h
5521305-6bb3339c3bf60f73.png
5521305-f10de97d94961616.png
5521305-6a23898f658aaa52.png
5521305-4fc9604f1c9a3f8a.png
5521305-5a5a65e04aadc891.png
5521305-9a3e346dfd368715.png
5521305-e7b2945efee17b07.png
5521305-47b7c5838326410f.png
5521305-eb55bb51ae418085.png
5521305-3f47f331d7d63fb6.png
5521305-72d506bca193abec.png
5521305-b2de93582c9d0dac.png
5521305-9f5f8194546ee968.png
5521305-13caff069d686e6e.png
5521305-1f43ed03e72738db.png
5521305-f507c2fadf344358.png
5521305-34805df9bb0347e0.png
5521305-e9cbe2a2b1d0327b.png
5521305-1c0743601b91144b.png
5521305-4dba93598490e042.png
5521305-c5e820e466316868.png
5521305-a13f100335acb2e5.png
5521305-583743843cc663c0.png
回复

使用道具 举报

返回列表 发新帖

发表回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表