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

 找回密码
 立即注册

QQ登录

只需一步,快速开始

社区广播台

查看: 3433|回复: 0

IPFS开发简介与入门实战

[复制链接]
发表于 2021-4-22 23:39:31 | 显示全部楼层 |阅读模式
本帖最后由 赤膊医数 于 2021-4-22 23:41 编辑 2 s/ t8 A9 I9 p. V) \

# v$ \' A8 W/ |- S2018年,最火爆且值得期待的区块链项目莫过于EOS和IPFS。1、IPFS简介
  • IPFS是什么
    ; j% r- B# r& d/ G7 V% X* J星际文件系统IPFS(InterPlanetary File System)是一个面向全球的、点对点的分布式版本文件系统,目标是为了补充(甚至是取代)目前统治互联网的超文本传输协议(HTTP),将所有具有相同文件系统的计算设备连接在一起。原理用基于内容的地址替代基于域名的地址,也就是用户寻找的不是某个地址而是储存在某个地方的内容,不需要验证发送者的身份,而只需要验证内容的哈希,通过这样可以让网页的速度更快、更安全、更健壮、更持久。: u& X0 s5 `/ D" v
    以上内容来自巴比特官网介绍
    2 ?4 i; p% z- F/ a( W7 |: LIPFS是基于区块链技术的去中心化存储网络,实现了永久性存储。/ b/ B4 r+ Y# n: k  J2 ^5 M% a
  • IPFS的火热+ ]. k2 _' T' A) y" q6 E  O
    Filecoin ICO是迄今为止涉及金额最大的ICO,仅一小时就募集了接近2亿美元,打破ICO记录,成为2017年最火爆的区块链项目。IPFS项目吸引了世界各地数字货币投资者和互联网从业者的密切关注,2018年比较值得期待的是IPFS主网的上线。然而就在前段时间,官方公布说上线时间延期到年底。" O- Y9 W. A) Z
    注:Filecoin是IPFS激励层的加密数字货币(即代币),有点类似于以太坊平台上的以太币。
    % U; K. h2 `1 S* h1 a/ CIPFS官网:https://ipfs.io/
    . R! j0 k. z3 X6 ZFilecoin官网:https://filecoin.io/
    ! [8 Z- p6 E; Q( i/ s" }
  • IPFS的应用案例) W. w4 \; I! _+ A) G: {
    GitHub有两款开源项目,且有对应网址,分别是音乐播放器和视频播放器。: ^' ]( }& L0 ]8 O

    4 e) L+ s, w4 W. A% }
    • IPFS音乐播放器" u; T  ~+ ~* o

      ! n; }% s# t" U  ~9 K5 M  h
      $ N) K* Z1 I0 x 5521305-ae7a09ee6683f37a.jpg . N( w+ a5 n2 d
      9 C* V; W6 P5 t$ z- H5 e
      IPFS音乐播放器$ P  Q" |5 a2 t8 w; u) a

      1 H, ?+ ~$ ?: t; qIPFS音乐播放器网址:https://diffuse.sh/
      4 q) o' C! r0 g8 t( V- iGitHub地址:https://github.com/icidasset/diffuse- r! t7 _8 ]! C, \) X& G
    • IPFS视频在线播放器
      / k4 Z1 d) s7 W4 G6 N# E  H" L4 F+ {. o4 c7 m
      3 ?/ D  U8 b( Z* x' Q- `$ S
      5521305-6bb3339c3bf60f73.png ; T7 g$ ~3 O5 |5 r+ \8 I3 u- L

      $ n- }; Y0 V' X% V2 N3 D; ]/ JIPFS视频在线播放器首页' P" \' \2 y6 b/ H7 I* P8 I
      % Q% C; R& Z7 D. m9 N

      2 m0 Y  X) q- s8 @& N( E

      w- y& e& g! g! S' _$ O& u+ d 5521305-f10de97d94961616.png ( B$ q- i7 b2 F$ V. x: ^, a; o

    & S4 j6 C! o# K$ U8 |IPFS视频在线播放器播放电影
    : \1 J7 G3 `* g. K( A5 \. Y
    6 E4 d; ^" I- K" s+ |, G# D号称是国内第一个IPFS应用
    # E4 a# I% `9 X; w) `# kIPFS视频在线播放器网址:http://www.ipfs.guide/2 D0 F3 I5 @- O( h0 @
    GitHub地址:https://github.com/download13/ipfstube7 c1 m/ P5 w8 T) p- v
    可用于测试的电影视频Hash(这里只列举两部):
    9 w  s/ @, z- z8 ~, V神秘巨星:QmWBbKvLhVnkryKG6F5YdkcnoVahwD7Qi3CeJeZgM6Tq68
    - x$ g4 e9 c( C0 e' L- m4 R盗梦空间:QmQATmpxXvSiQgt9c9idz9k3S3gQnh7wYj4DbdMQ9VGyLh# K! K! R, R% u/ q* D" I9 ~
2、IPFS的安装既然IPFS这么牛,有必要了解一下IPFS的开发,先从IPFS的安装开始。5 b' L, v# }3 x) J5 E7 q
  • IPFS Desktop
    1 F# c* [9 f8 l  q  B: `当然,可以直接安装IPFS节点桌面管理软件来体验一下。该软件可以方便地运行和管理自己的节点,查看IPFS节点资源信息,支持二次开发。该项目是Node.js编写的,已开源。% m1 G. ?( w9 z9 {
    * }$ U2 W, W0 Q1 d' I- |% {# y
    % N# e  @2 N/ \2 f/ }
    5521305-6a23898f658aaa52.png 1 e0 G( x1 x4 y- g. l+ N
    + D: K' o+ }, j
    IPFS节点桌面管理软件  g, k0 I7 k  v
    $ k( M/ e, a$ Q* R. S. @
    GitHub地址:% {. w9 s% d3 _* T, P
    https://github.com/ipfs-shipyard/ipfs-desktop
    * c  N0 w% _( ~" I
  • Go-IPFS+ L) Y5 ]% p) {6 Y
    进入IPFS的官网,找到并切换到"Install"页面,点击"Download IPFS for your platform",会跳转到如下网址(需要翻墙):
    - e& P# }5 k5 i$ W& ^https://dist.ipfs.io/#go-ipfs! D% K; }& e7 S8 z) B. N) y
    ' M5 y* ~4 w8 K8 O% E$ O, l. p
    5521305-4fc9604f1c9a3f8a.png , _6 J$ q' X  e; J

    1 |! i- V! u: X9 q下载Go-IPFS
    ) m7 p/ h, R; o" i6 Z
    3 c8 v* O! {8 K# p如果打不开,可以试着去Github查看安装方法# t1 F# w+ O0 m  D( o
    GitHub地址:https://github.com/ipfs/go-ipfs
    , q# T  R& R4 f, R' {将网页下载好的文件解压出来,下载的是"go-ipfs_v0.4.13_darwin-amd64.tar.gz",解压出来的是go-ipfs文件夹,0 z0 V( f1 H& L( G: \* b# f
    然后打开终端,进入到go-ipfs文件夹根目录,复制ipfs文件到系统的bin目录,然后可以通过"ipfs version"来检查,操作如下:
    5 d6 k+ N) K" e7 owenzildeiMac: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* {- n$ ~- n9 u/ t7 Y5 s
3、IPFS节点的创建、查看和启动以下是安装官网的Go-IPFS步骤下实验的) ^) l; s0 R: m6 h' e+ d, e
  • 创建节点  W9 J& b6 X2 |/ E6 v
    进入到当前用户的根目录,并使用"ipfs init"命令创建节点,可以用"open ./"打开创建节点生成的".ipfs"目录。9 {2 Y& M4 B2 R% z4 P( b7 w0 C0 T
    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 ./
    & r6 C9 H' J/ Y4 ?
8 ]" F9 r) _; T, Q
5521305-5a5a65e04aadc891.png
$ d" P* T- \0 I0 {9 i8 O' p. G
% T+ v3 Z2 T, q1 n- D# n! qIPFS节点的创建  Y# f! I% f: r+ h. v. S- @
/ n! h, _6 d9 b3 n/ D, c1 [# N
  • 查看节点id' F5 G: D) t# L
    wenzildeiMac:.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默认存储空间6 Q  v9 \$ m2 v8 U
    存储节点默认存储大小为10G,如果你想修改存储空间,可以修改config配置文件,找到StorageMax并修改; u: d/ {- B, O
    wenzildeiMac:~ wenzil$ export EDITOR=/usr/bin/vimwenzildeiMac:~ wenzil$ ipfs config edit  
    % f1 _+ \! k) w0 p1 u* D 5521305-9a3e346dfd368715.png
    3 Y/ v6 i: m' o# S" H9 _1 B6 T; O5 v! H0 ]/ Q
    修改IPFS默认存储空间
    ( K, q2 T8 B: u. {1 q& R' ]- }9 u- Q- X3 ]" o5 d
  • 启动和同步节点服务器
    7 l7 n7 A8 x+ Y+ z0 R7 Z9 V执行"ipfs daemon"命令,可以同步节点数据到IPFS网络。, Y; |6 B' k& f) t& r5 j+ X/ S- o
    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 ready
    0 J- O, h3 c" R% J7 Z+ s* ~
4、IPFS运行体验
  • IPFS查看ReadMe& z" T0 B* B" i& n8 d$ x
    可以回去查看执行"ipfs init"命令的时候,返回的内容。打开一个新的终端,操作如下:( j& Z) O4 b$ T
    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管理界面
    0 b5 j- J" C7 w- UIPFS节点服务器启动后,可以用浏览器访问:http://localhost:5001/webui
    $ [7 N0 k: B8 t5 m; A! U9 f) }. T4 J有本地配置、节点连接、本地节点文件等信息,如图:; L0 h. z1 v6 M" y
    2 d5 o  ]- O9 k, i/ g

    $ d8 i: b! Y' k( w 5521305-e7b2945efee17b07.png
    $ e3 S) \) m+ _) C" q2 c& H* g% o1 A4 ]' t8 P5 }! R5 x( W6 }
    IPFS的Web管理界面
      i9 I8 o* K% h9 D( S* |! P& B; F5 F* h& R" B9 s* l, v# o0 s7 b

    0 U8 {  I8 x( G) ~7 o3 [; C
    $ s* ]6 ~2 ^( k  I3 n
5、设置跨域资源共享当我们在前端通过js接口操作ipfs时,会遇到跨域资源访问问题,可以在终端执行以下配置来解决:9 c+ D4 p& k. I, U$ |8 o8 W
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节点
  • 新建文件- x  W  F3 w5 j# ?
    wenzildeiMac:ifps_test wenzil$ vi test.txtwenzildeiMac:ifps_test wenzil$ cat test.txt IPFS测试文件
  • 添加文件到IPFS节点+ B  f% a( {: Z5 J( X% j1 K
    wenzildeiMac:ifps_test wenzil$ ipfs add test.txt added QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab test.txt添加文件到IPFS节点后,返回了文件的哈希值! h5 }' `6 u1 r7 |* m
  • 查看IPFS节点的文件  R8 h" c  C7 p
    wenzildeiMac:ifps_test wenzil$ ipfs cat QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbIPFS测试文件注意:此时的文件只是添加到了本地的IPFS节点,读取的是本地数据,可以通过如下网址查看。" D& L4 a% }( [" ]3 j9 D
    http://localhost:8080/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab
    & X1 F4 I1 K; I( N通过"ipfs daemon"命令启动节点服务器,会将本地节点文件同步到外网,同步成功后,这时就可以访问如下网址来查看(如果访问失败,试着翻墙看看)。; f; T% K$ y5 m. B9 L
    https://ipfs.io/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab
    0 c/ |5 K+ J4 B: d
    1 y) f- L. _" P/ |8 Y6 {+ b3 K 5521305-47b7c5838326410f.png 6 V/ A3 Q* C" q( u" Y
    - G6 h) J2 ~4 f8 T5 u1 P0 l% {
    查看IPFS文件内容
    9 e! I5 L9 U% l- C0 _; v' V) q, s  Y- d+ a( ^, m+ n0 r5 k
    如果访问成功的话,说明已经存储到IPFS网络中。目前IPFS网络暂未加入代币Filecoin机制,所以存储读取文件免费,速度也比较慢。& _3 n2 m4 ^* o7 l: g* ^$ g. Z3 J
  • 下载IPFS节点的文件
    % D! P5 ^: K3 e! MwenzildeiMac:ifps_test wenzil$ ipfs get QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbSaving file(s) to QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab 25 B / 25 B [========================================================] 100.00% 0s查看当前目录,发现多了一个"QmSV..."的文件"$ P2 U0 G+ s) }7 {4 c

    & M% z5 h3 f, r" B/ M9 C! k6 X/ I& q1 G9 w- b9 w4 [; P( N
    5521305-eb55bb51ae418085.png 8 Y' V) f: {$ X, Z
    6 R' U$ @. T* b6 J/ ^
    下载IPFS节点的文件
    2 H: c6 v4 y; g1 T# d: _
    0 Y5 A* {7 k% P' Y: R% K9 j0 z
    % B3 L4 w" H& @# B. j4 A* o
6.2 创建文件夹存储文件
  • ipfs命令新建文件夹& ?. k1 B: I. M, k/ L6 P5 `; P* p) a
    wenzildeiMac: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 /文件夹名"可以删除文件夹。6 S/ h0 Z" h: s6 e( r

    . ], z2 U+ i1 d% a+ J; \$ u- V! v
6.3 IPFS上传文件夹
  • ipfs命令添加文件夹9 o) f" R" T, I. A! k
    先在本地创建一个文件夹和对应文件,如图:
    $ p( y$ h3 n6 {! `5 N3 i
    9 t2 r! D* \/ Y: d3 E% [3 N) A* @0 i+ ?! b3 `1 j) l8 l; W( G  R# V1 o
    5521305-3f47f331d7d63fb6.png
    3 A) k" S: w7 ]" t/ G) i/ U3 t+ \7 v
    本地创建文件夹及文件
    2 r$ k6 `1 J! R: v2 E2 ^2 x+ m0 r9 K5 W
    然后通过"ipfs add -r 文件夹"命令添加整个文件夹
    0 U8 t" @# K4 r1 f 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$
  • 查看文件夹的文件内容
    9 }6 l% Q4 [# P3 g1 i  r. v, D) qwenzildeiMac: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对应文件夹/ l! O4 J/ [: R/ @
    访问文件夹对应的IPFS地址:
      U3 w/ ~9 t$ i& E* D' z) T; |' }https://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj
    ( n8 s; w+ R2 E+ D# p4 l' W第一次访问的时候,需要同步数据到IPFS网络,等待时间有点久,慢到让你以为同步失败了。, Y( D& v: B+ J0 g8 S2 C" w
    . Y2 I" o, r3 R# `' g  s0 M
    5521305-72d506bca193abec.png
    - X8 x1 v7 L, [4 Q1 j% q
      K; B' s+ k+ f8 [( S# V查看IPFS对应文件夹- x( q( o! L: W1 b( e/ x0 @

    0 J( j- p, ]/ `/ R访问文件夹对应的文件,如看到图片文件,访问ipfs网关:& N  J3 ]. X4 p2 Q
    https://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj/portrait.jpeg, H% R! _, v) v/ }% n& u
    : p, W: x# T9 O0 [+ K7 e
    5521305-b2de93582c9d0dac.png
    ; [& `5 v/ Z8 q! a
    2 l) j9 j9 p* Y9 ?& t查看IPFS文件夹对应文件) a0 {) B8 c/ v2 z
    ! H0 M: |8 @: `
    或者通过文件的Hash来访问,如访问txt文件的地址:1 V4 V/ C) z* G3 E: d3 s
    https://ipfs.io/ipfs/QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQvT
    4 P7 I% R2 n2 D& r1 O
    - x. V# u7 C5 A$ Z: p 5521305-9f5f8194546ee968.png
    4 @  M8 d) i) j3 B. w$ c9 k. g, v4 l; V
    通过文件Hash访问查看
      t. e" Q  J. q% T' K9 H( r9 u
    ' G- }( W0 V# ]6 M6 o8 q
6.4 添加简单网页到IPFS节点
  • 网页效果和项目结构1 y" O  b. {& F% I5 `2 w5 G) F- V
    实现一个简单的实时显示系统当前时间的网页,效果如图:
    1 t! K( `3 L$ u
    % p0 F  z0 i1 G1 @. u4 t8 w& h7 W+ R' \8 M* ^" t5 y
    5521305-13caff069d686e6e.png ' A0 c4 g! a- \5 S- H: q

    & F8 i8 m3 j0 _  ~9 GIPFS添加简单网页  s# R8 E& s/ {
    , N- Z2 A3 J7 _
    工程结构如图:; B$ H: u: l2 S' _
    + G6 ^+ t. k; G6 O* v( i6 @6 F
    8 G2 t! f+ T+ e! j+ I
    5521305-1f43ed03e72738db.png
    + f% X9 ^2 `3 J
    # f) r4 ^9 |9 g% _' I8 V网页工程结构
    . _5 |& c) r5 f0 ^# q' i5 O/ M! _  n  I" D9 V! \. R& n

    % m. W; i+ y1 c$ k* _2 ~
实现代码比较简单,这里就不贴代码了。4 U% l. G7 f0 l, E0 Q8 V; \
  • ipfs命令添加文件夹
    * ^( ]9 l! X+ F- ^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"命令在新的终端窗口打开运行。( @9 j2 ~$ a8 V: `; d9 G
    wenzildeiMac:~ 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对应文件$ f$ Y2 _; n: R( n4 O1 y7 V& b
    浏览器访问ipfs网关:
    ; b1 a0 ?! J" V. ^https://ipfs.io/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD/
    8 o6 l) L  \  y: o1 i6 l# N3 z2 t2 H& e! A3 H
    5521305-f507c2fadf344358.png : j8 A, E& ^7 N; h
    1 Q+ |: N, j/ J1 O
    查看IPFS对应网页4 T! F1 h  o2 T0 ~1 K* f

    6 O, t& a' ?$ @- i% i7 g8 ]! k2 w8 [3 T# N9 ~
6.5 IPNS绑定节点名
  • IPNS绑定节点操作8 @6 y2 m& l/ z: s) g8 L
    每次修改文件内容后,文件的哈希值就会发生变化。对于网站而言,发布后可能还需要做修改,这时需要IPNS绑定节点名。每次更新网站内容后,重新publish一次更新发布到IPNS即可。% T/ o5 D+ b8 L& [  n* b3 K4 z
    刚才的html根目录的哈希值是QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD,操作如下:
    2 b- p: [. F+ ?/ u- M; y4 P+ |9 vwenzildeiMac:study wenzil$ ipfs name publish QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDDPublished to QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz: /ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD
  • 查看当前节点! W5 d/ E' M. [0 ^5 a' F( R* j/ C
    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"- U4 A) H" {1 g0 g- W% w
  • 验证节点3 ~3 d! l) v+ q7 U
    命令为:"ipfs name resolve 节点ID“5 Z; Y: i0 a  P
    wenzildeiMac:study wenzil$ ipfs name resolve QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD
  • 访问IPNS对应文件% o6 T- `1 P2 n  B: l
    浏览器访问ipfs网关:! Y/ C  N  R, }0 @1 ^% t( P
    https://ipfs.io/ipns/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/& J/ R, x8 O7 y# [: k8 A

    / ]3 p0 v+ D% ?0 W& ^! {
- i! a, F6 y: w: I; ?8 u
5521305-34805df9bb0347e0.png ( \+ K8 d3 O8 d; m2 G* {

4 M) c1 U* f+ K) z) E5 \  H查看IPNS对应网页
5 n" L  j0 G" ~9 d/ m  M" r1 @
' y7 a+ b; A6 d. e7 R1 X7、IPFS与以太坊DApp开发实战
  • IPFS与以太坊DApp结合的好处
    % ~6 D  H# G8 L, p( c% H- v# B* z在以太坊平台上,往区块链写入数据需要花费以太币,调用智能合约执行每一行代码的时候,都需要一定量的gas交易费。区块链存储大数据成本很高,而且不合理。0 d$ H" z, r+ T' A9 {' v. G  k2 L
    可以先将文件存储到IPFS,然后得到文件的Hash存储到以太坊区块链中。读取文件的时候,从以太坊区块链中获取文件的Hash,再通过Hash来读取IPFS网络上的文件。
    $ F, y# _9 P3 s6 Y' x3 f使用官方提供的ipfs-api,可以很方便地在代码中操作节点将数据上传到IPFS,或者通过Hash从IPFS读取数据。
    8 N- J0 e9 l' O4 qTruffle框架提供了快速搭建包含以太坊智能合约的React项目,可以通过"truffle unbox react"创建工程,然后安装ipfs-api依赖库。于是,可以在前端方便地调用IPFS的接口来读取、上传文件。- `% b5 E2 o0 d! k: q
    truffle unbox react官网:
    * q- E* N+ ?) b$ A8 P6 _http://truffleframework.com/boxes/react2 ^5 `' ~  m6 H: I" s4 z; D( ^
  • IPFS与DApp开发实战: r% v- E' G6 h/ B! R
    话不多说,开始进入实战开发' U& O9 U9 ?6 O5 Z% T. s
    7.1 安装Truffle unbox react新建一个空目录"ipfs_dapp",然后执行安装命令# y% L; |) l2 ~; ^
    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",修改后完整代码:" [' ]# I) D0 q. G) B; s
    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"" T5 p( n# V$ A  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"进行智能合约的部署
    1 ?" I- H( R& n7 E+ {/ n& I2 y; a& C5 c% L3 a) r+ D
    5521305-e9cbe2a2b1d0327b.png
    4 P  g( F+ k7 [5 `8 x+ e- |1 S, o2 h! c0 Q6 Q6 a! D8 K) H
    Remix-IDE部署智能合约
    3 y/ I7 k( G- {( Y- F! g! q5 V6 h2 y$ \% w! e
    ' M2 z, a$ I9 I" `) _
    5521305-1c0743601b91144b.png . y! p) Q- K( u$ d3 `

    , [, l& }2 [% w. o& C5 bRemix-IDE部署智能合约-确认: E7 B( b" A* k6 p
      ~+ Z" G5 F9 a4 l& q; `0 @
    然后复制智能合约地址,App.js文件中会用到合约地址为:"0xb177d6cf6916f128c9931e610c63208d9c5a40f3"
    2 O, @$ M4 L$ N* c! H  @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"命令,结果如图:
    7 o) u# @5 m; v$ R' f/ n 5521305-4dba93598490e042.png
    - t/ c0 I1 p; z& h5 A3 o. w
    ( F2 k; }' S* J( R" [3 i2 H+ S/ Tnpm_start
      d" L2 i. N) {) a# _, s3 H9 E
    , V. H. S/ m8 `( {# Q会自动打开网页,然后上传一张本地图片,之后点击"图片哈希写入区块链"按钮& T2 o# C1 s, G

    3 x# ~7 J0 C7 a' ` 5521305-c5e820e466316868.png
      K0 m6 w( x# U: e  e9 ?
    / m1 B  |, o% A- G# [: j运行结果19 R- v7 O  V( C+ I& H

    : `( w) U8 G7 g  ^# q( I9 I9 `8 n最终效果如图:9 r: j2 p( S+ F9 C1 @

    % P1 N# q/ e! ?" d7 C1 |% T; s; A* Q8 q$ T$ N
    5521305-a13f100335acb2e5.png
    ; E' G' U+ F& L: I: e+ N% Z2 D' `. r9 K, c  o7 h( ]
    运行结果: t) @6 ^( y2 Y- o$ W# h7 q! v
    5 S) E+ ^- ~' {: S  c
    访问IPFS网关:
    ) P4 R* P9 Y' U5 r! J( ahttps://ipfs.io/ipfs/QmbHptfJfyuGAZxstFYgAVfz33cytR1seTD3ZabBSDd899
    7 K" Z- j5 @  I; d' l发现图片已经成功写入IPFS,如图:% C- {' }1 D( [

    " h8 I/ C& _1 F: c( @0 i
    ) Q1 X9 N3 u+ @- r  m 5521305-583743843cc663c0.png
    / i  B4 b( B$ @% g# p& }+ k0 m# A3 T% X5 h; |; Y% @/ s0 n2 ?
    运行结果30 x5 i& e* m- z9 [8 E' c

    5 m# g- t7 H" a! D' D备注:本地IPFS网关端口默认为8080,我的电脑上端口冲突了,系统自动修改为8082。
    5 B. s4 M* K  Z0 @搞定,收工。
      E! j) T5 I! N- M, ^$ H2 uPS:刚入坑的小白,很多不懂,还请各位大佬多赐教,谢谢!) P# Q. o1 u( v. ?) X
    - h3 ~) |( ?6 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
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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