|
|
本帖最后由 赤膊医数 于 2021-4-22 23:41 编辑
1 a {7 q5 O* e6 M4 s2 H
i8 S; d+ z" W/ O2 A2018年,最火爆且值得期待的区块链项目莫过于EOS和IPFS。1、IPFS简介- IPFS是什么
4 G# X6 o+ ?" a8 T5 ?" m星际文件系统IPFS(InterPlanetary File System)是一个面向全球的、点对点的分布式版本文件系统,目标是为了补充(甚至是取代)目前统治互联网的超文本传输协议(HTTP),将所有具有相同文件系统的计算设备连接在一起。原理用基于内容的地址替代基于域名的地址,也就是用户寻找的不是某个地址而是储存在某个地方的内容,不需要验证发送者的身份,而只需要验证内容的哈希,通过这样可以让网页的速度更快、更安全、更健壮、更持久。
$ a* t' y0 v" s& {. c以上内容来自巴比特官网介绍
7 t% t; a$ h6 `6 J. pIPFS是基于区块链技术的去中心化存储网络,实现了永久性存储。* ]& [% p1 v" K: e- |; A
- IPFS的火热
7 ^( b7 |$ X& t) CFilecoin ICO是迄今为止涉及金额最大的ICO,仅一小时就募集了接近2亿美元,打破ICO记录,成为2017年最火爆的区块链项目。IPFS项目吸引了世界各地数字货币投资者和互联网从业者的密切关注,2018年比较值得期待的是IPFS主网的上线。然而就在前段时间,官方公布说上线时间延期到年底。
! M$ d0 u" B7 h R. [# U% H: s注:Filecoin是IPFS激励层的加密数字货币(即代币),有点类似于以太坊平台上的以太币。) l, k3 ?# c. V1 w: n3 D
IPFS官网:https://ipfs.io/
5 O6 m# P9 z7 KFilecoin官网:https://filecoin.io/
' Y$ i7 s0 ?/ A6 }. B* H - IPFS的应用案例
$ T9 ~! P+ V$ t7 U7 cGitHub有两款开源项目,且有对应网址,分别是音乐播放器和视频播放器。
' Y% b3 E/ W) N! z
4 c1 c, F( P5 x9 {- IPFS音乐播放器6 t; Z+ r% x5 `2 ]/ X
4 j1 e9 M; J( g0 N. S# C9 `6 k& [+ i$ c- D; `# c
l7 u0 M& r+ v& a. R/ [- p/ H
@& H" b K# \% h+ Z7 ?
IPFS音乐播放器( L4 g- P! L2 e. Z3 C
u7 a( k" d7 G& c$ x: k0 P% iIPFS音乐播放器网址:https://diffuse.sh/
H- A3 X) i% H/ v- tGitHub地址:https://github.com/icidasset/diffuse
- u% n/ O/ ]& g. y& V- W5 o - IPFS视频在线播放器) V" Y4 h( w+ V& V5 X8 x1 n1 R
+ D& ] K' N9 e1 G. j: K
I* F; J' z9 E
8 ^3 V- G0 s% a3 _
' a1 v" _/ |$ KIPFS视频在线播放器首页( F5 N0 |5 s7 N* O2 M
1 ]) M% l/ w: w4 H2 E5 G+ M
5 O& H6 }# r( F0 y, A, J
- Q8 S+ Y& o5 K0 @
. i8 w* c4 P9 w. S, y' h: X* S! {+ |" z0 }6 [9 _1 \+ A
IPFS视频在线播放器播放电影: }. F7 w3 _, S* t7 t7 Z8 d
6 r: }$ I6 V- K7 a6 u号称是国内第一个IPFS应用/ z% E% W. R2 L3 ~" Z/ V
IPFS视频在线播放器网址:http://www.ipfs.guide/
8 @# _" E7 E6 g9 ^( V! V) Z4 IGitHub地址:https://github.com/download13/ipfstube! j; q6 o, U7 |0 J
可用于测试的电影视频Hash(这里只列举两部):
* Y+ E5 h4 r' F2 C! t1 P* N神秘巨星:QmWBbKvLhVnkryKG6F5YdkcnoVahwD7Qi3CeJeZgM6Tq681 a! A& W! t$ t
盗梦空间:QmQATmpxXvSiQgt9c9idz9k3S3gQnh7wYj4DbdMQ9VGyLh
6 I; Q' e! }" c, s+ u; v9 d 2、IPFS的安装既然IPFS这么牛,有必要了解一下IPFS的开发,先从IPFS的安装开始。1 e. |3 J8 @ T! O
- IPFS Desktop
( g" q7 a+ Q/ [0 f5 Z% E6 L0 u' q当然,可以直接安装IPFS节点桌面管理软件来体验一下。该软件可以方便地运行和管理自己的节点,查看IPFS节点资源信息,支持二次开发。该项目是Node.js编写的,已开源。/ L- @6 c- J3 h, m |4 f
' c) C4 y# I. M0 U3 [
3 N; a8 w9 w5 j' m4 ^0 O
" k1 C8 ^0 _! ]" F% T
2 Z' ~: m/ {- X6 ^$ KIPFS节点桌面管理软件
# ?0 G! K U3 \# o
: s; L9 y2 ?1 ? x9 S/ UGitHub地址:1 S) W% s& h2 h3 O
https://github.com/ipfs-shipyard/ipfs-desktop5 F8 D6 E t" G5 X
- Go-IPFS
, x3 G3 h" T; |进入IPFS的官网,找到并切换到"Install"页面,点击"Download IPFS for your platform",会跳转到如下网址(需要翻墙):% |- p% Y4 W g9 I- x7 y3 A. X
https://dist.ipfs.io/#go-ipfs% s% L3 B- q# v& M) E: j$ J6 X! M
d( a9 P" O. S% A% |
+ j- Z3 [4 Z) y$ m6 Q
u# A# X4 v4 L6 P$ e% ~下载Go-IPFS
" R0 S s8 \* p. W- ~2 G. n; W) t8 N7 c5 y
如果打不开,可以试着去Github查看安装方法 T1 A1 ~1 s P3 Y4 q5 `, w+ I
GitHub地址:https://github.com/ipfs/go-ipfs
0 B% C# B( Y J) i2 P# Y+ Q) n6 K( x将网页下载好的文件解压出来,下载的是"go-ipfs_v0.4.13_darwin-amd64.tar.gz",解压出来的是go-ipfs文件夹,0 \# h, I/ u1 N8 J
然后打开终端,进入到go-ipfs文件夹根目录,复制ipfs文件到系统的bin目录,然后可以通过"ipfs version"来检查,操作如下:8 M# E& T! c' q( e5 }! ^+ P# d
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
1 B; i: P/ i' x9 f$ I) ~ 3、IPFS节点的创建、查看和启动以下是安装官网的Go-IPFS步骤下实验的
0 J6 z) `) g |$ g- 创建节点
3 h( H" w& _: R3 E6 r+ v进入到当前用户的根目录,并使用"ipfs init"命令创建节点,可以用"open ./"打开创建节点生成的".ipfs"目录。0 O2 A8 A1 }& I r: C
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 ./
8 B: t/ W2 x& d( l9 Y# d- m7 i! N. K
A- ?. ~3 y- l% ^+ F. A, P6 N
) Z5 ~% \7 w5 }$ e" Q% A. c+ _
) ~) D& S+ t* l j
IPFS节点的创建
1 F2 K' h# t4 N7 m: `$ A& `! Z
5 U' r# L; F, ?3 ~- 查看节点id( l1 T: d$ G8 O9 `
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默认存储空间; h0 X0 A! i$ Y2 l0 g1 c" r# ^2 G
存储节点默认存储大小为10G,如果你想修改存储空间,可以修改config配置文件,找到StorageMax并修改
+ g) X+ r. [% W y: s5 owenzildeiMac:~ wenzil$ export EDITOR=/usr/bin/vimwenzildeiMac:~ wenzil$ ipfs config edit
& L# J8 x* O1 F& I/ D5 a
2 x. J P( O! u: c$ q w" w' R# p! Y# g% N6 t$ w
修改IPFS默认存储空间3 v% j& M: g5 O0 ~3 U) J T9 s
6 p9 D) y3 F- c, ? - 启动和同步节点服务器
) Q2 y, v1 _+ g. X执行"ipfs daemon"命令,可以同步节点数据到IPFS网络。+ C, ^3 d+ I6 L7 H. m
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 ready1 W+ ~! A2 A0 i$ y1 e/ x; h f
4、IPFS运行体验- IPFS查看ReadMe/ Z: t4 G/ ?! N3 ^5 _! Y% H
可以回去查看执行"ipfs init"命令的时候,返回的内容。打开一个新的终端,操作如下:
$ }! Z2 x8 F: d& k( z7 RwenzildeiMac:~ 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管理界面
7 Q# |& ~1 b& Q9 e- tIPFS节点服务器启动后,可以用浏览器访问:http://localhost:5001/webui
8 N! A! j2 f1 P K9 v/ x6 g5 @+ x; x有本地配置、节点连接、本地节点文件等信息,如图:
' P8 \8 P* Y" n K( Z
3 Z+ Y: t/ ^$ d& ^7 C7 a: w( Q7 |$ E. A( Y. e# x! A {0 m
I6 h$ ]- _$ w# t, b7 H5 O
2 O9 A+ [# k# R3 T' P) p
IPFS的Web管理界面
: D# M/ \ D- n
|9 I: J. g2 _! }; x- ^ h: F, o2 N: t! w o: Z4 T
" K- `! g. ^# p- s
5、设置跨域资源共享当我们在前端通过js接口操作ipfs时,会遇到跨域资源访问问题,可以在终端执行以下配置来解决:( @6 i( G3 [% b' M$ i0 y+ E
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节点- 新建文件" ]' P# A) k" v1 L/ ^* M
wenzildeiMac:ifps_test wenzil$ vi test.txtwenzildeiMac:ifps_test wenzil$ cat test.txt IPFS测试文件 - 添加文件到IPFS节点. N/ n. R, G; W. ]' V# j
wenzildeiMac:ifps_test wenzil$ ipfs add test.txt added QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab test.txt添加文件到IPFS节点后,返回了文件的哈希值+ j& n0 `% N. |5 ^' c
- 查看IPFS节点的文件; M4 J a/ G- w: v* ^; ~+ W- g
wenzildeiMac:ifps_test wenzil$ ipfs cat QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbIPFS测试文件注意:此时的文件只是添加到了本地的IPFS节点,读取的是本地数据,可以通过如下网址查看。! X6 T6 k% L, N$ ]1 w% K2 w
http://localhost:8080/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab
$ M2 @) R w; u4 d( ]4 L1 K) \通过"ipfs daemon"命令启动节点服务器,会将本地节点文件同步到外网,同步成功后,这时就可以访问如下网址来查看(如果访问失败,试着翻墙看看)。4 a* ^7 Q& Y, _" W$ n
https://ipfs.io/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab
# b; _& x8 o6 |1 g/ f+ b6 P' P# ?- W' F# [# I+ d `* [0 B0 W; g4 c: @- ^
: Y, |" S/ h4 N: L) T3 a, v0 T: q
* W+ z' T& @1 M: B1 f$ Y" {+ T查看IPFS文件内容- E5 M$ K# B" ^
) C( t) m3 M) R: [& r6 K7 u如果访问成功的话,说明已经存储到IPFS网络中。目前IPFS网络暂未加入代币Filecoin机制,所以存储读取文件免费,速度也比较慢。
3 V/ h# a2 Y9 i' V2 n! t) R1 O0 C - 下载IPFS节点的文件 s4 Q! M$ l' ? _6 Y: H
wenzildeiMac:ifps_test wenzil$ ipfs get QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbSaving file(s) to QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab 25 B / 25 B [========================================================] 100.00% 0s查看当前目录,发现多了一个"QmSV..."的文件"+ A& `7 `) |5 C1 b5 Z
, Y: `/ z! V. r5 i2 s' U4 z; F2 {8 D2 b, p0 | a; s/ `* u) z
: D; e3 X6 G+ K( X
2 x) H# E, ^' I ^( U1 f! o
下载IPFS节点的文件
( B5 g# v5 g* O4 r; x) Y; m9 ^* C a; N( x
* k9 n% k$ M" o) F3 ^8 l+ D. v4 c 6.2 创建文件夹存储文件- ipfs命令新建文件夹
0 O" R+ q0 R; RwenzildeiMac: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 /文件夹名"可以删除文件夹。; c. U. V- J2 k+ n) B0 |
+ e0 d! m+ m* @5 A 6.3 IPFS上传文件夹- ipfs命令添加文件夹
/ y) o/ l* D, I5 F0 p$ g先在本地创建一个文件夹和对应文件,如图:
+ q2 ~7 l6 X. j7 |' ]& D2 F
a, O4 V5 }4 [+ Y, ~ v
7 b& x: V3 z2 N8 f' h
, e* z2 `2 D! }/ m. z) r _
8 y/ n& G% j# Q8 U, K: |; {- a2 |本地创建文件夹及文件( F: T$ V" K5 G" W# b8 a" `
) `# U/ x0 h' Q+ l4 W
然后通过"ipfs add -r 文件夹"命令添加整个文件夹# k8 `6 e0 o* ?6 N2 p
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$ - 查看文件夹的文件内容% e @3 O8 H6 j) a4 v g1 p8 \# N
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对应文件夹$ \& B4 O- t7 D6 S( v
访问文件夹对应的IPFS地址:
& ^5 d% R" ]# H0 Vhttps://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj
$ l, `& ~1 |; o" H第一次访问的时候,需要同步数据到IPFS网络,等待时间有点久,慢到让你以为同步失败了。
- m' y p1 I4 J# l, l3 @$ L1 J2 U P6 L, B- {$ |0 ]
: P( u, r" g) [
+ N0 s$ b0 h7 \+ Z. T* ?
查看IPFS对应文件夹
& [4 n( I2 ^6 G) ~+ Y- ~" W
, Z. p+ y* y* y5 E9 x8 n访问文件夹对应的文件,如看到图片文件,访问ipfs网关:3 J$ J0 H6 G0 A' m# B; t! R
https://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj/portrait.jpeg
2 X' T+ _0 f* q8 V' t1 ~6 {! w2 ^( R. u0 c; P! y: n4 h, [; W
2 N4 W, W2 b1 P3 @ M4 G% t) a
. r$ v. K- H+ n# @5 W查看IPFS文件夹对应文件, b# L$ \" M. V. K( K
( m3 F5 ]* b) T8 @或者通过文件的Hash来访问,如访问txt文件的地址:
2 `; T6 v9 ?" ^+ h: o! Zhttps://ipfs.io/ipfs/QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQvT
( ~/ I5 R& Y0 l! v& x1 A1 F! P, E& u3 Z" @, m9 p2 r6 D
4 q) A0 ?) o6 F/ k* I
7 [, f3 W/ C9 A% K6 ~
通过文件Hash访问查看
% j9 ~0 h# L+ X3 {' E8 h I
0 f. S, I% G7 ~8 @" u7 o7 ]- G5 g% d5 J1 K
6.4 添加简单网页到IPFS节点- 网页效果和项目结构4 A- P3 b& x$ t# r- M
实现一个简单的实时显示系统当前时间的网页,效果如图:3 G W5 N6 @, F& s1 u1 S
6 B4 }) ?" d7 E X6 ?) @% z
0 _5 X6 n* v: U% x8 O0 q# l' u
5 i, j9 w4 @, }: x- s% o6 T' W% S# B$ {% |, w) x4 c
IPFS添加简单网页
/ Y5 k4 L& G; C, c$ C) p( ]
; C7 O4 ?9 J3 {' j; k" j# O4 M2 x: S7 k工程结构如图:" e L7 ^; t! b5 Z
0 o+ {; m5 o5 N- x
) S, Z8 L6 T* }0 @
; T9 N+ l( h1 K C( v# Z
5 ?3 l( e2 {( b' S8 F- p
网页工程结构
& B! K9 ~# x* P- q' J* U! Z2 k( G$ ?$ ?# h; G
5 ]# q2 f7 }2 m2 p! {9 h 实现代码比较简单,这里就不贴代码了。
) I" O0 G' v5 ~. H% O& c4 J- ipfs命令添加文件夹
' W; E" L& M$ t; HwenzildeiMac: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"命令在新的终端窗口打开运行。 b" P: \1 u: [* ]" d4 q
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对应文件
! w8 m, i" a( T9 r浏览器访问ipfs网关:" F: d2 P# t3 b' V8 G& Z
https://ipfs.io/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD/! B4 V' y3 [8 O& i- \ o8 o9 w" _' w
" e6 a! I* X/ A2 x
+ c" D$ a+ J0 M5 G5 S1 P/ r+ ?! g0 q. e/ X" R
查看IPFS对应网页
1 d/ T, Z, k: ?' P8 R: o
7 E! o9 v& A2 ?( T/ o8 V% a& f& t9 x
6.5 IPNS绑定节点名- IPNS绑定节点操作
" E3 `* }& r3 z6 P. h每次修改文件内容后,文件的哈希值就会发生变化。对于网站而言,发布后可能还需要做修改,这时需要IPNS绑定节点名。每次更新网站内容后,重新publish一次更新发布到IPNS即可。
+ P, b7 \+ t* |3 b7 o; ]刚才的html根目录的哈希值是QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD,操作如下:% R, B1 s2 ~, K6 b
wenzildeiMac:study wenzil$ ipfs name publish QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDDPublished to QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz: /ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD - 查看当前节点% d/ A0 ~* Y5 P- n0 f# _
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"5 Z9 |. k/ f Z1 ?& w2 q/ ^9 }. p$ i
- 验证节点5 y& b. k( h" p4 l2 s% k" I( O
命令为:"ipfs name resolve 节点ID“6 g, z/ ~! r, J B# X0 p3 t% @8 b
wenzildeiMac:study wenzil$ ipfs name resolve QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD - 访问IPNS对应文件+ l- N Z& c' ]+ c; F
浏览器访问ipfs网关:
- O1 m w2 @8 [+ S$ u( zhttps://ipfs.io/ipns/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/
1 K9 ] n' C: s* P+ K& ^8 D) \ A$ p3 {
& i+ b0 e6 I' a6 C5 Y! ]. B
1 T. R0 u+ e r/ V0 W
+ ~; F) h/ i) y( L
查看IPNS对应网页
- ^* b- D7 M, P$ y4 \: f
* {8 e% r, q" g& r9 O7、IPFS与以太坊DApp开发实战- IPFS与以太坊DApp结合的好处# \1 w- @2 @% Y$ O+ I3 }
在以太坊平台上,往区块链写入数据需要花费以太币,调用智能合约执行每一行代码的时候,都需要一定量的gas交易费。区块链存储大数据成本很高,而且不合理。
; v& G8 _8 o/ J- b& ~5 x3 _. [可以先将文件存储到IPFS,然后得到文件的Hash存储到以太坊区块链中。读取文件的时候,从以太坊区块链中获取文件的Hash,再通过Hash来读取IPFS网络上的文件。
) j. K7 Y# @$ ^9 h/ N8 x" C使用官方提供的ipfs-api,可以很方便地在代码中操作节点将数据上传到IPFS,或者通过Hash从IPFS读取数据。9 p: Z" r4 V( P: f8 s% T
Truffle框架提供了快速搭建包含以太坊智能合约的React项目,可以通过"truffle unbox react"创建工程,然后安装ipfs-api依赖库。于是,可以在前端方便地调用IPFS的接口来读取、上传文件。- R+ D. g' O1 g
truffle unbox react官网:
3 A. l. D: _- p: V. }# X- bhttp://truffleframework.com/boxes/react
1 Z8 p8 ~5 _8 @/ v - IPFS与DApp开发实战- _& a% ]3 s7 Q* v* v0 E
话不多说,开始进入实战开发。. W0 X, |1 j# E( J
7.1 安装Truffle unbox react新建一个空目录"ipfs_dapp",然后执行安装命令
) z8 i+ x3 c" K# |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",修改后完整代码:
2 V, {! {# B& N: I4 f) {9 S4 f& Mpragma 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"
1 {. c+ `: k* J3 p1 N# Tfunction 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"进行智能合约的部署
+ `$ U A: i' T9 J2 j/ T9 [/ w" v+ I/ G# t0 o& ~! i
' Q1 l* }4 j& A( A( U; K9 d" r
2 n! _) @ f# s6 u1 R n2 lRemix-IDE部署智能合约4 |3 H2 i- O6 l: e: [
. f8 _( U Z3 j: r
$ K8 k; @7 [/ B6 H* k
h% v% [7 {2 l( }
" ]) p* n7 L9 J4 g j" r0 F% J4 kRemix-IDE部署智能合约-确认
' u7 ]+ i- d2 I2 ^3 d- ]+ H! k( a, V( r' H3 H/ l
然后复制智能合约地址,App.js文件中会用到合约地址为:"0xb177d6cf6916f128c9931e610c63208d9c5a40f3"
; }- I6 n, ]( ^5 u9 e( P% I7.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"命令,结果如图:+ y6 s0 t. Q- [/ J9 X
' N. I$ b% T [# w5 |3 M" @0 f/ S0 I3 I
npm_start
* t3 ] I& @# n0 S4 I4 ~$ S& P
# z# {6 V9 m: v4 ^* W会自动打开网页,然后上传一张本地图片,之后点击"图片哈希写入区块链"按钮: T6 R' W8 K6 n) a
4 \4 F* g! n/ g' g) r
2 E8 ~8 g- E% y. B6 {* {% R! T, p& X
运行结果1' I! f3 B, [, l2 K/ a2 X l
5 W/ Y3 ]: x/ u; B最终效果如图:
# P) X' t; k4 M6 u4 ^! G! s( u
* ~* f; M3 T3 n& M4 q! ?( x! {
, R8 C3 C# T2 M+ R4 r
/ i3 n1 P4 h7 ~; Q
. Z+ y: R) y3 y/ R/ H9 B/ `6 x运行结果- c. Y. H% P9 F
; I- R% y9 ~% j' O/ s9 R
访问IPFS网关:
, }/ c: n: s' rhttps://ipfs.io/ipfs/QmbHptfJfyuGAZxstFYgAVfz33cytR1seTD3ZabBSDd899
: p: r+ }7 d' K: {8 R1 |发现图片已经成功写入IPFS,如图:
' [0 P+ ]" B0 e% [# [$ i! z& d( L: L/ M. i* `* X
* m1 S# y# K" y# t
( o! q4 c: f5 ?/ Z$ E3 e. Q* g' w
5 H) A- L! Q+ j# P) H运行结果3' a; y7 R6 E& z0 p/ h7 u
. ~6 f5 \$ u+ Z8 F; V. c
备注:本地IPFS网关端口默认为8080,我的电脑上端口冲突了,系统自动修改为8082。! V9 k* c' S2 i* \1 b" u9 R
搞定,收工。
' y S+ F9 G5 N- iPS:刚入坑的小白,很多不懂,还请各位大佬多赐教,谢谢!
; ?9 T- z, P5 w6 t
) W8 C* R# b6 W7 g; k+ d; ]
|
|