|
|
本帖最后由 赤膊医数 于 2021-4-22 23:41 编辑
3 c" U: ~: c& v7 t' M2 b0 f9 X
8 c& F8 Q1 c* S0 \' a: l8 |2018年,最火爆且值得期待的区块链项目莫过于EOS和IPFS。1、IPFS简介- IPFS是什么
# i% {! M# H1 p9 p* W星际文件系统IPFS(InterPlanetary File System)是一个面向全球的、点对点的分布式版本文件系统,目标是为了补充(甚至是取代)目前统治互联网的超文本传输协议(HTTP),将所有具有相同文件系统的计算设备连接在一起。原理用基于内容的地址替代基于域名的地址,也就是用户寻找的不是某个地址而是储存在某个地方的内容,不需要验证发送者的身份,而只需要验证内容的哈希,通过这样可以让网页的速度更快、更安全、更健壮、更持久。' L1 C0 G& F v3 {+ E
以上内容来自巴比特官网介绍
5 V& N$ |$ P6 Z7 lIPFS是基于区块链技术的去中心化存储网络,实现了永久性存储。
8 z; E/ r& T! Y2 j- p. l. [ - IPFS的火热+ B$ { @3 |& w9 d* x
Filecoin ICO是迄今为止涉及金额最大的ICO,仅一小时就募集了接近2亿美元,打破ICO记录,成为2017年最火爆的区块链项目。IPFS项目吸引了世界各地数字货币投资者和互联网从业者的密切关注,2018年比较值得期待的是IPFS主网的上线。然而就在前段时间,官方公布说上线时间延期到年底。4 j( a2 d, P/ m2 M' U! k) I6 y6 U
注:Filecoin是IPFS激励层的加密数字货币(即代币),有点类似于以太坊平台上的以太币。
; ]" I$ E' P5 |& \2 _" ]4 M! nIPFS官网:https://ipfs.io/
# l' f) U9 k: V$ _! oFilecoin官网:https://filecoin.io/
9 O, E) k0 f9 h) O7 h - IPFS的应用案例
# l: f) W1 R6 R5 w' A& OGitHub有两款开源项目,且有对应网址,分别是音乐播放器和视频播放器。
. u) f' \ j) R8 c7 O9 q9 Y5 r# Q) A+ E$ W- m- A+ U
- IPFS音乐播放器
( T; j y1 v8 _0 o6 W. @; n& y5 e3 p% [* Z/ T' r4 {1 v h/ V& V4 l
, \# \/ V* c* t+ a8 K) c
" k# g! A! @5 V5 y8 ?' d- C7 v7 l7 ^1 x# u& T; n" D6 e& w
IPFS音乐播放器" r. Q! z4 e7 ?* u8 T9 }
* ?) a0 f/ Z( O0 Q% G' O f7 xIPFS音乐播放器网址:https://diffuse.sh/
+ _9 I/ `6 Z& _. w( l+ OGitHub地址:https://github.com/icidasset/diffuse
& x7 [7 ]* t7 e3 ]% h" N - IPFS视频在线播放器! R" L: z" `% O+ q% c
, g; G6 J* D$ l% f7 |/ G# H7 z$ V! J4 G, T7 a$ ?
6 \: a; [7 k5 I. H- J$ Y+ s
% [: D& Q6 z& ~$ IIPFS视频在线播放器首页% i, N! i0 }2 b% T; p; _5 y
* U2 P8 S$ v6 J1 D4 u( J' j L7 G6 t5 \
, d( S5 L! R, \) |/ @/ m
, |- Y+ [, D8 c6 e8 s
* H- I2 M" X! d8 } oIPFS视频在线播放器播放电影3 i2 `0 [9 A$ i/ Z- D+ Z8 o
# `; y0 r/ E5 l5 W1 s. V
号称是国内第一个IPFS应用
+ L: ?; i; d- j8 S6 _3 oIPFS视频在线播放器网址:http://www.ipfs.guide/- Y3 {/ }: u+ `
GitHub地址:https://github.com/download13/ipfstube* k0 p% X- L$ u, b' B5 m/ h" o5 L( ]
可用于测试的电影视频Hash(这里只列举两部):' X' V1 G( r$ a9 U3 L) e5 q
神秘巨星:QmWBbKvLhVnkryKG6F5YdkcnoVahwD7Qi3CeJeZgM6Tq68
" @0 }" E, c6 k# [1 A盗梦空间:QmQATmpxXvSiQgt9c9idz9k3S3gQnh7wYj4DbdMQ9VGyLh5 l }/ V' l! _; ~
2、IPFS的安装既然IPFS这么牛,有必要了解一下IPFS的开发,先从IPFS的安装开始。
- u8 y, B' N: O( [$ _0 `- IPFS Desktop5 V; X# P/ c" [3 M" N& R# e/ q2 g
当然,可以直接安装IPFS节点桌面管理软件来体验一下。该软件可以方便地运行和管理自己的节点,查看IPFS节点资源信息,支持二次开发。该项目是Node.js编写的,已开源。
; b: _& t! X9 F4 n
/ F! h8 R. i, {; |4 N( Q4 F) k$ w' o4 y3 I# F' h3 @& p d
" z9 h- u8 R; B) k+ K
: i3 b2 y# Q1 ~8 ZIPFS节点桌面管理软件3 [ G, G- M$ l0 V# k8 A
; a1 j |( |6 {$ q: _* w! W2 wGitHub地址: t- {) T( [: M1 |( L* }
https://github.com/ipfs-shipyard/ipfs-desktop
8 Y7 X( u4 G% l. ? S - Go-IPFS
5 b6 ^' B, V) T& _1 c. ~2 Y0 i进入IPFS的官网,找到并切换到"Install"页面,点击"Download IPFS for your platform",会跳转到如下网址(需要翻墙):' t0 _& _7 G0 W" u1 g+ J! n% W& ]
https://dist.ipfs.io/#go-ipfs& I3 [! }1 Q# y- T% i7 G$ `
z/ c) _+ ]! B7 X7 `) R& A
# [: f5 l( J' e2 @' u3 G$ x, c4 H" k7 _- p
下载Go-IPFS! ~% s/ d, R# T
9 y0 w' J- w) l/ p+ V
如果打不开,可以试着去Github查看安装方法
- [4 x) l0 x. ?GitHub地址:https://github.com/ipfs/go-ipfs& t6 t& }# ~) m9 |! K9 S
将网页下载好的文件解压出来,下载的是"go-ipfs_v0.4.13_darwin-amd64.tar.gz",解压出来的是go-ipfs文件夹,
# O- x' I6 W; Z" }* n然后打开终端,进入到go-ipfs文件夹根目录,复制ipfs文件到系统的bin目录,然后可以通过"ipfs version"来检查,操作如下:0 B! @: l! r1 b/ j1 V0 X
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
2 W& p6 U8 l2 p3 t4 h9 B 3、IPFS节点的创建、查看和启动以下是安装官网的Go-IPFS步骤下实验的( F$ U' y6 {0 d9 J. K$ ~8 j) l" b
- 创建节点 c: Z( Z! H( q& d
进入到当前用户的根目录,并使用"ipfs init"命令创建节点,可以用"open ./"打开创建节点生成的".ipfs"目录。
4 D4 R: Q& ~. K0 |8 j: C4 kwenzildeiMac: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 ./
0 U4 P# Z' }4 h) r; k" N1 ^$ ^: Y
& u5 S. _ n2 j8 z
7 g1 W$ {8 [% t
( a+ C6 _+ y6 t( a; }5 QIPFS节点的创建
2 R) E) Q6 ]. |1 v$ G& ^" y" r# X9 W. g* Y( J- f+ J; M
- 查看节点id) m8 M. C' D0 Q c l: i
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默认存储空间5 i d' u/ B! A
存储节点默认存储大小为10G,如果你想修改存储空间,可以修改config配置文件,找到StorageMax并修改: Y# e( D' K3 [5 m2 E) x
wenzildeiMac:~ wenzil$ export EDITOR=/usr/bin/vimwenzildeiMac:~ wenzil$ ipfs config edit 5 ]% Y A( _ W& {: E; U3 v
. r1 g; O5 e; o* t( I5 O2 F/ S4 ~$ G: K6 x4 Z
修改IPFS默认存储空间5 }" O4 m$ s, A( t* l6 T) c/ I' ^, O, c
- S P8 l: t4 e: V' \* c5 ~ - 启动和同步节点服务器
4 j0 s# F* c: w+ b. n执行"ipfs daemon"命令,可以同步节点数据到IPFS网络。- n) P& U$ Y( b7 c- 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 ready7 ?& b3 e6 O* t9 i/ v# F
4、IPFS运行体验- IPFS查看ReadMe- ]2 \9 u! j, h! `) K
可以回去查看执行"ipfs init"命令的时候,返回的内容。打开一个新的终端,操作如下:
% O, m5 n: N) R# W2 jwenzildeiMac:~ 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管理界面; g* Q! Z d4 I
IPFS节点服务器启动后,可以用浏览器访问:http://localhost:5001/webui
6 K b! F) n" {! B0 N2 n% B有本地配置、节点连接、本地节点文件等信息,如图:9 m& j7 ]% L* n1 S& D7 A
* u8 j, ^( M z6 r7 F
* w# v! R/ X* q' @! N
! Z( ~" b& W* t: i
6 c4 x- ?3 @2 |9 O8 d8 bIPFS的Web管理界面. M9 E5 W4 b& y
- n/ T/ F0 x" _4 Z) d/ z6 s6 V9 S/ G% N5 G! s# Q
1 f6 X' V( m$ ` A% N5 j/ A 5、设置跨域资源共享当我们在前端通过js接口操作ipfs时,会遇到跨域资源访问问题,可以在终端执行以下配置来解决:
2 a; r0 J5 [% q8 q* X* T/ `3 Cipfs 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节点- 新建文件, j1 Q. ` @, \5 a( Q5 R0 t; ?7 M
wenzildeiMac:ifps_test wenzil$ vi test.txtwenzildeiMac:ifps_test wenzil$ cat test.txt IPFS测试文件 - 添加文件到IPFS节点
# g* [5 j" \ B1 [. V6 g# z" F$ w: ywenzildeiMac:ifps_test wenzil$ ipfs add test.txt added QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab test.txt添加文件到IPFS节点后,返回了文件的哈希值
0 g) ^7 ^9 P7 p! d' N' V3 \ - 查看IPFS节点的文件, y! J1 B! z+ E6 l
wenzildeiMac:ifps_test wenzil$ ipfs cat QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbIPFS测试文件注意:此时的文件只是添加到了本地的IPFS节点,读取的是本地数据,可以通过如下网址查看。
& W4 @4 i& U% s$ Dhttp://localhost:8080/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab
* s3 R' u: ^0 d% q y/ E- a通过"ipfs daemon"命令启动节点服务器,会将本地节点文件同步到外网,同步成功后,这时就可以访问如下网址来查看(如果访问失败,试着翻墙看看)。
% w( R- J3 |" K- Y4 Shttps://ipfs.io/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab3 Y" ]( l- M5 M7 C
" h' C" f1 a4 q& X& A: `
) o; w8 K/ L) ]% f* b3 f9 L0 `& \1 p4 t- G9 b4 h$ N
查看IPFS文件内容! }0 ~3 v7 n% v/ w% n0 K
# D7 k' w" U) ?$ _
如果访问成功的话,说明已经存储到IPFS网络中。目前IPFS网络暂未加入代币Filecoin机制,所以存储读取文件免费,速度也比较慢。: }) a$ O" W2 A4 p5 c# z+ K) x$ E
- 下载IPFS节点的文件% Y& ?' D3 m: }6 L; p
wenzildeiMac:ifps_test wenzil$ ipfs get QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbSaving file(s) to QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab 25 B / 25 B [========================================================] 100.00% 0s查看当前目录,发现多了一个"QmSV..."的文件"
I7 x8 }' L. \1 c% H% c9 [5 Q. O6 N
4 |6 X: ], U" Z9 U! G, h
W# t: G: a9 u1 C4 ]" l H ~
+ I8 k! F$ S* s
下载IPFS节点的文件 M5 B+ o0 T# c1 }. q6 B) r
5 z% L3 I9 N. p0 b/ R+ f8 w) g8 U# P& E) b% q2 y
6.2 创建文件夹存储文件- ipfs命令新建文件夹. h+ A5 ^2 z/ @: |: b _
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 /文件夹名"可以删除文件夹。
, k; |3 I2 V S: b9 U) ?# O) K; W6 R. ]: m5 V2 [4 Z
6.3 IPFS上传文件夹- ipfs命令添加文件夹
& X4 S2 A% {( v) I8 t先在本地创建一个文件夹和对应文件,如图:
& S: k) q2 k* m6 Q, A
' o; b, h- n0 K0 Z7 t1 K
+ S, [3 r( A4 z
9 D+ z) X% C4 d4 F2 D8 Y/ V3 k
5 \+ z* N _- X; n, Z0 S本地创建文件夹及文件
' {# p5 R, Y4 d$ u! l1 ~% L; `" n/ @% E. V2 h& g. _* T
然后通过"ipfs add -r 文件夹"命令添加整个文件夹
. ^. S! n' f1 U/ b) }/ 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$ - 查看文件夹的文件内容0 b6 B$ Q; Q) o( ` T! [# M
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对应文件夹
& g0 _ T7 R3 y访问文件夹对应的IPFS地址:8 y3 g( K! F3 f- ~0 r* y, G% B
https://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj' z6 K1 ~2 {1 X2 M+ k1 {) {% f5 y) ^! A
第一次访问的时候,需要同步数据到IPFS网络,等待时间有点久,慢到让你以为同步失败了。
1 x; D* ?* `" E. O. C5 I- s
3 L0 Z* k* s1 j! N; v4 S& Y
; U2 K0 n1 \9 N6 E4 v0 y9 a4 H J$ H$ p$ O. x; I
查看IPFS对应文件夹
! j) T( G7 [0 z
% L2 D1 S8 W8 Q2 `访问文件夹对应的文件,如看到图片文件,访问ipfs网关:
! X. x- e; H1 n% M8 I( nhttps://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj/portrait.jpeg
) j4 C( ^5 _2 x/ T4 d
1 \* Z9 W5 F( U7 ^+ T E
A% I$ L( p# e1 K& }8 N d; _9 F* }, T# O% _' `4 X$ N/ A
查看IPFS文件夹对应文件# \' ?, h0 U7 g! c7 J3 D% s& c7 O' |
5 ?; g n7 a* h; ^: p7 ]9 k" r6 O7 T
或者通过文件的Hash来访问,如访问txt文件的地址:
, a" D" U* m+ n a* I1 Ihttps://ipfs.io/ipfs/QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQvT+ l7 T; N) t5 W0 M* m" q
8 y* I0 {' s) `1 r0 t) K! P! R
& A, y6 ] [0 V& I3 i; z4 O+ U) S+ _4 U- ~( f
通过文件Hash访问查看: G9 @5 |0 w. c
! t5 B' X; ?4 G/ n. [
R0 V6 K/ K6 L. y
6.4 添加简单网页到IPFS节点- 网页效果和项目结构
2 ~$ [/ }+ d, s1 L3 x实现一个简单的实时显示系统当前时间的网页,效果如图:" {8 e* a W! q! B' g! P
7 B( S. r: _- S6 R0 {+ S$ I( n! ^& ?( c! U y* g! v
- W: z Z: |% T! Z
# V0 ]* C: t1 k; s1 x- p! K% JIPFS添加简单网页: h5 a+ q- I- V7 k
1 K( }. E/ o4 m
工程结构如图:6 l2 |3 n J- H. d, H
& k( p. i8 O. H. l3 y
4 B' c, E% b. F7 j$ L! u
7 {% d) }* d q) Q! I4 {2 i- M. {& y) ~' X1 m0 S; B; `
网页工程结构
0 t+ t& k5 W2 L, b! d- G, S
* x) G( y( \" Y* F! k% U5 C# |
. P1 o5 |; t' {$ N3 A# T, o 实现代码比较简单,这里就不贴代码了。
, E1 Y2 ~) I8 P( P9 I- ipfs命令添加文件夹
( h% ?$ o2 a- ]* W! @2 B! z6 _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"命令在新的终端窗口打开运行。
. h- ?8 Q4 A! ^$ |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对应文件
4 ?& X1 ]8 b! q V3 M J" ~浏览器访问ipfs网关:. t9 S B! S3 D" @6 m- S, W
https://ipfs.io/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD/
, n/ W( E( A: q
6 B( [9 Y G9 C2 ^$ H" f! {9 |
5 Y: E# r1 `/ A# k
/ I& l9 p3 w* R查看IPFS对应网页; e2 t4 A( t2 ]
. z" v5 l) v3 p t* M2 d4 H9 }
" W- i' V+ U& `1 F7 S
6.5 IPNS绑定节点名- IPNS绑定节点操作! p7 [) B. [1 ^$ X. t7 o2 z
每次修改文件内容后,文件的哈希值就会发生变化。对于网站而言,发布后可能还需要做修改,这时需要IPNS绑定节点名。每次更新网站内容后,重新publish一次更新发布到IPNS即可。
$ e6 f4 Y) E8 o. S, P2 G0 N刚才的html根目录的哈希值是QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD,操作如下:7 B. v2 }9 i2 Q5 S7 A8 J
wenzildeiMac:study wenzil$ ipfs name publish QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDDPublished to QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz: /ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD - 查看当前节点- Q& {. A7 I3 W0 W
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 @9 h" v* f% i - 验证节点" ^; C) T8 A* f8 v- Q- R; j' k% U
命令为:"ipfs name resolve 节点ID“$ Q# Z$ {( |+ }/ j5 k+ B* b
wenzildeiMac:study wenzil$ ipfs name resolve QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD - 访问IPNS对应文件
) I: C& p* ]& P, P! }6 y" P m浏览器访问ipfs网关:
$ n( f' l8 ~( Y1 ?4 w6 J: i1 Uhttps://ipfs.io/ipns/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/* ]! b2 w# C9 `# f2 {4 x
, j3 ?5 T: u4 Q! ]# J
& K8 @- y* M( T* U2 _1 P d, H
5 ?- r [0 p8 J, @+ r+ N% H3 q" U! Q6 s/ ^* ~
查看IPNS对应网页
* W5 \& D0 i- ?8 |
" g) Y1 L" L2 h' z0 |. J7、IPFS与以太坊DApp开发实战- IPFS与以太坊DApp结合的好处. G, U1 [+ U2 c
在以太坊平台上,往区块链写入数据需要花费以太币,调用智能合约执行每一行代码的时候,都需要一定量的gas交易费。区块链存储大数据成本很高,而且不合理。* p' B3 U# _. G
可以先将文件存储到IPFS,然后得到文件的Hash存储到以太坊区块链中。读取文件的时候,从以太坊区块链中获取文件的Hash,再通过Hash来读取IPFS网络上的文件。4 V; V: q! K5 o3 G/ V. \( |6 a3 z* e8 U
使用官方提供的ipfs-api,可以很方便地在代码中操作节点将数据上传到IPFS,或者通过Hash从IPFS读取数据。
5 F5 }/ {- k# @; p5 j, L& }Truffle框架提供了快速搭建包含以太坊智能合约的React项目,可以通过"truffle unbox react"创建工程,然后安装ipfs-api依赖库。于是,可以在前端方便地调用IPFS的接口来读取、上传文件。. z$ P1 E" j# y; T' l( J
truffle unbox react官网:. D& t5 @9 ~. i
http://truffleframework.com/boxes/react, B2 U, o) h6 P4 {6 o( Q+ s ]/ H; A
- IPFS与DApp开发实战' n+ o. j' E. b! T# F' f: G9 k; {0 ~
话不多说,开始进入实战开发。
& J; \7 r. B; R, V7.1 安装Truffle unbox react新建一个空目录"ipfs_dapp",然后执行安装命令
' q5 \2 P; z( S+ l8 jtruffle 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",修改后完整代码:
+ j1 Z; ~& }( j3 m! P, w5 Ypragma 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"
% _7 r% b- ]+ C( ufunction 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"进行智能合约的部署, e' G& j1 L( |& L3 d8 O8 m
: o0 G [/ [: A: o- X
& n$ B+ ]( @- ^ w9 J, I
2 P5 h c% G7 W A6 z) z( @5 W
Remix-IDE部署智能合约
. }, K5 c6 J; M. y3 j
2 L. A, F/ E! O; @4 O* v9 f
* y5 Y- c& E. |, K- ~, K
# U+ F @" l; ]" ~ W, P; T1 T" X, q5 g+ [ q, Q6 I
Remix-IDE部署智能合约-确认& y6 S4 n- p" G& \* W8 N& v4 n" R
& ~' Q$ R) B1 K6 I, o$ p$ q" [, I9 ^* @
然后复制智能合约地址,App.js文件中会用到合约地址为:"0xb177d6cf6916f128c9931e610c63208d9c5a40f3"% m: I' m7 [0 l1 ?$ J( d) J
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"命令,结果如图:3 a& U' X- G- j- t9 A+ W' ^9 @% n! r5 N9 h5 x
! y5 h* h, D' I5 ^% S$ d
0 v p6 x- m6 X, U7 Y
npm_start
; a/ U$ ]; b9 z4 w7 c1 V# m
4 F/ H5 b( M/ X' R: f会自动打开网页,然后上传一张本地图片,之后点击"图片哈希写入区块链"按钮
: a8 x& I0 y- n' A/ h. r
+ ] x5 ?1 o2 p3 u% Z8 J
+ v5 B6 P( {. ?0 W
; C9 r3 R( \4 u
运行结果1- V! d H9 f$ Q3 k* u3 a# x3 d
, N0 L) Y6 R* d" v8 C最终效果如图:+ T5 v) r0 q# Z
1 E2 f) @5 E' B1 b6 y5 k5 h
5 Q& J1 J9 R$ j( V) E! n2 W
. O( f7 S2 _6 Z6 [" q3 M& c: y* v
7 k1 b6 { @0 ~. U/ Z运行结果
" p4 k9 R f6 I/ T
9 x1 \5 o; n# G1 w6 f7 [访问IPFS网关:
$ D8 }5 _; n' I5 g- Z5 ]https://ipfs.io/ipfs/QmbHptfJfyuGAZxstFYgAVfz33cytR1seTD3ZabBSDd899
- X8 k0 ~% H+ K+ C- W u# v发现图片已经成功写入IPFS,如图:: e. X7 O5 ?) B& b) v( Z8 u9 G5 L( [
z& g% H3 [1 k# ^ X0 S
6 e: J& E5 \6 O( s# G* Z" W
8 _4 q5 d) e$ o) F- H6 d# z3 [$ p& N
运行结果3' t5 r* M; f# \) D) B7 f7 V9 b
, b: \& l$ m0 ]$ L+ U备注:本地IPFS网关端口默认为8080,我的电脑上端口冲突了,系统自动修改为8082。
+ ~/ ^5 a: _/ l# M. E7 T% a1 U, f搞定,收工。# n$ w2 V2 ^+ @# D4 T0 Z" ?
PS:刚入坑的小白,很多不懂,还请各位大佬多赐教,谢谢!/ ^1 q. n& |. Q0 ?* C u+ P8 c1 ]: r
( _1 ]4 z" L+ f& |- [
|
|