|
|
本帖最后由 赤膊医数 于 2021-4-22 23:41 编辑
: `# k. C/ ^0 i2 u9 Q, L0 I h5 @; J1 |- Z; r# W
2018年,最火爆且值得期待的区块链项目莫过于EOS和IPFS。1、IPFS简介- IPFS是什么: x/ |7 j3 G8 m7 {* d0 `7 j" _
星际文件系统IPFS(InterPlanetary File System)是一个面向全球的、点对点的分布式版本文件系统,目标是为了补充(甚至是取代)目前统治互联网的超文本传输协议(HTTP),将所有具有相同文件系统的计算设备连接在一起。原理用基于内容的地址替代基于域名的地址,也就是用户寻找的不是某个地址而是储存在某个地方的内容,不需要验证发送者的身份,而只需要验证内容的哈希,通过这样可以让网页的速度更快、更安全、更健壮、更持久。
: A3 Z- h) j8 G" ~以上内容来自巴比特官网介绍2 {6 k& P5 ^' q3 {8 R/ M
IPFS是基于区块链技术的去中心化存储网络,实现了永久性存储。3 o8 ]9 S& \( \ v" t% H
- IPFS的火热
! y5 y7 ^; u e/ }+ s' ~Filecoin ICO是迄今为止涉及金额最大的ICO,仅一小时就募集了接近2亿美元,打破ICO记录,成为2017年最火爆的区块链项目。IPFS项目吸引了世界各地数字货币投资者和互联网从业者的密切关注,2018年比较值得期待的是IPFS主网的上线。然而就在前段时间,官方公布说上线时间延期到年底。
- e! C2 W+ x: Z注:Filecoin是IPFS激励层的加密数字货币(即代币),有点类似于以太坊平台上的以太币。$ L, l) O" u8 v. S8 N) O
IPFS官网:https://ipfs.io/5 p+ X0 Y) c4 W5 j" J* S# X' ~
Filecoin官网:https://filecoin.io/
$ B* A1 m! \2 r/ D: m4 n3 b+ Z l - IPFS的应用案例8 `5 J' P; u/ w( w
GitHub有两款开源项目,且有对应网址,分别是音乐播放器和视频播放器。
) n7 k7 i+ G7 c. L' ` h, [8 U' j: q5 P4 Y
- IPFS音乐播放器; f6 W- ~. u& [, n
/ L7 e. g5 ^ d2 P5 p# s
+ d- v! w1 \* m O$ T
. _, t7 K9 i+ j L) H5 T8 Y
+ \2 r+ {. O& C/ w7 RIPFS音乐播放器
, \* Z) d8 O, i( F$ x0 K, s. G
+ d; p8 z' S0 ^9 C* _IPFS音乐播放器网址:https://diffuse.sh/
) }! ?4 L* D1 z0 E2 DGitHub地址:https://github.com/icidasset/diffuse
5 L6 b& _( K% P - IPFS视频在线播放器
0 ~! Z- c ^* f( K) t. }2 k. q! o$ T n
1 h( N, }* x$ j/ h; V6 `7 O6 E" F
7 {% ]% l" Y2 x& N) D
& I; T5 u4 z* E2 Z7 F
IPFS视频在线播放器首页8 m% V/ a) \4 I: `( i# ?8 e
0 J w3 q$ K0 p) c. e1 ? g) \/ V/ o5 f) H' T. E
0 V5 V' s( s9 T" C( ^% a& R* x
3 C7 G+ L: i* c* L( v3 A
8 R. Z, e9 W7 J9 t9 z) r2 l# v- XIPFS视频在线播放器播放电影 @4 N5 @; J1 n0 C; r, `7 B) h
% I4 y* d3 p' v7 y! R
号称是国内第一个IPFS应用
$ R" ]- D; e9 \$ rIPFS视频在线播放器网址:http://www.ipfs.guide/! P/ S4 ]% C/ B% C2 ^5 ?
GitHub地址:https://github.com/download13/ipfstube
: Y5 O& l. H5 w) S; o可用于测试的电影视频Hash(这里只列举两部):( M( D1 ?2 S3 c3 U
神秘巨星:QmWBbKvLhVnkryKG6F5YdkcnoVahwD7Qi3CeJeZgM6Tq68
2 z) ~' W1 L7 M0 }+ H盗梦空间:QmQATmpxXvSiQgt9c9idz9k3S3gQnh7wYj4DbdMQ9VGyLh' J, l1 z4 i; D
2、IPFS的安装既然IPFS这么牛,有必要了解一下IPFS的开发,先从IPFS的安装开始。8 {, w! \. [0 @
- IPFS Desktop& e* [$ R9 u$ H+ V2 g% H9 Y$ n4 y
当然,可以直接安装IPFS节点桌面管理软件来体验一下。该软件可以方便地运行和管理自己的节点,查看IPFS节点资源信息,支持二次开发。该项目是Node.js编写的,已开源。7 }+ H$ T- y5 X5 I e9 C
/ ?7 q; ]7 Y) l( K6 M3 C4 ?9 j
3 {4 f* \. n, s; L) I/ X2 G7 v5 K
) T+ ]2 A R( C: g' {# K9 T
( W- G5 e8 Q3 N( H! n0 B# t2 y7 y
IPFS节点桌面管理软件" H5 H4 h+ W+ @4 k% y) A2 V, M
3 v$ I; W5 T0 e+ ^4 ~3 YGitHub地址:
) N/ P& t3 F3 `) k/ Z& Shttps://github.com/ipfs-shipyard/ipfs-desktop2 @1 W* j+ e) }3 I
- Go-IPFS
; i. o' u! v" `; j! y进入IPFS的官网,找到并切换到"Install"页面,点击"Download IPFS for your platform",会跳转到如下网址(需要翻墙):
: L8 i0 j0 M2 ]+ }3 Whttps://dist.ipfs.io/#go-ipfs
+ U5 G5 K6 e2 ?8 L8 Q3 [+ ]3 k1 b4 Z1 O8 @" N% j9 s
! ~9 R1 d, `0 x9 w9 j: F- K) p- J3 R% I0 l$ J" H
下载Go-IPFS5 ^3 b$ s3 j9 D+ H9 J, k+ v+ d
/ @% o$ j4 O' v9 ^7 w: S! Z1 W; m, J如果打不开,可以试着去Github查看安装方法3 b6 d5 A9 u0 O$ Z6 F1 e8 w- C4 m
GitHub地址:https://github.com/ipfs/go-ipfs
) ~4 @2 y1 f- D+ X8 @1 u4 E将网页下载好的文件解压出来,下载的是"go-ipfs_v0.4.13_darwin-amd64.tar.gz",解压出来的是go-ipfs文件夹,( ^+ g( j4 Y' r; J& r$ e
然后打开终端,进入到go-ipfs文件夹根目录,复制ipfs文件到系统的bin目录,然后可以通过"ipfs version"来检查,操作如下:6 |6 K* [ t4 Y) X" B
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$ }; ?# h9 Z0 J4 f1 m3 k* @4 X
3、IPFS节点的创建、查看和启动以下是安装官网的Go-IPFS步骤下实验的
- T) w7 Y( \; ~" |1 Y- 创建节点
/ @$ o: q" F, Z进入到当前用户的根目录,并使用"ipfs init"命令创建节点,可以用"open ./"打开创建节点生成的".ipfs"目录。$ r( |$ i1 h0 w' N4 [+ K: \
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 ./
6 f) b: ~' I9 g0 w( I0 B5 u " V, b+ J2 O$ I+ T8 I& r
) i/ c5 k) Z6 m
- Q9 x% ^* F, t% O5 j
IPFS节点的创建
4 z/ H9 Q- j- q% {) d$ L g" o# N
; t+ D1 X/ |& g( O- ]# v+ X- 查看节点id
) H( Z5 u4 n$ FwenzildeiMac:.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默认存储空间
% n3 Y8 X1 T5 c" D存储节点默认存储大小为10G,如果你想修改存储空间,可以修改config配置文件,找到StorageMax并修改
+ w2 q2 {3 k" r, e" ]6 c# E* C* qwenzildeiMac:~ wenzil$ export EDITOR=/usr/bin/vimwenzildeiMac:~ wenzil$ ipfs config edit
0 |0 |8 l2 K0 d$ b$ I* l* Q4 U' y
, E6 U) g( _; n5 d- O$ J6 k1 Y( C' y3 `" A" o5 O: a' e
修改IPFS默认存储空间
+ a6 z7 S' v8 c7 u8 ?2 o5 l' p% ?- V
- 启动和同步节点服务器* h2 S& A' d9 _$ a
执行"ipfs daemon"命令,可以同步节点数据到IPFS网络。0 [% c' }( ]9 T$ ~* K$ 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 ready
' I; @, x# I Z, K# B 4、IPFS运行体验- IPFS查看ReadMe+ |- k R6 _# A) D
可以回去查看执行"ipfs init"命令的时候,返回的内容。打开一个新的终端,操作如下:
/ r& I2 ~9 |: R1 B" y$ I4 |- @$ uwenzildeiMac:~ 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管理界面
) ^$ @& N: H6 l: N; wIPFS节点服务器启动后,可以用浏览器访问:http://localhost:5001/webui0 k7 ~" k4 X, r7 h! l/ g
有本地配置、节点连接、本地节点文件等信息,如图:& I7 O6 p) B$ Z; F* b0 c
# L' s# s) \3 h% i5 E$ W# Y" @2 i9 Z( ^% D* r
: g7 |, D. A S% @( ~, U: b8 B1 J* ?9 r# ^) H/ }
IPFS的Web管理界面 Q4 P5 o, z" J5 ~$ a2 U; C; n. ~
/ e& _( \1 G+ Q# A6 \- A! h
/ M* r5 z4 c( S7 R3 j7 u( k
' }& `# p8 O6 o( E( f, ]' M 5、设置跨域资源共享当我们在前端通过js接口操作ipfs时,会遇到跨域资源访问问题,可以在终端执行以下配置来解决:, l8 S$ f7 n; l: t, Z& }- w3 v+ C
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节点- 新建文件
- |! l. s$ G+ R4 a0 f% |wenzildeiMac:ifps_test wenzil$ vi test.txtwenzildeiMac:ifps_test wenzil$ cat test.txt IPFS测试文件 - 添加文件到IPFS节点
% T% s# o+ w3 p( T+ m1 j& hwenzildeiMac:ifps_test wenzil$ ipfs add test.txt added QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab test.txt添加文件到IPFS节点后,返回了文件的哈希值
3 y7 Q5 u0 }$ y* s$ L* C$ O - 查看IPFS节点的文件+ A( N/ O" H' U& r
wenzildeiMac:ifps_test wenzil$ ipfs cat QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbIPFS测试文件注意:此时的文件只是添加到了本地的IPFS节点,读取的是本地数据,可以通过如下网址查看。
: k; I5 C+ P" n+ h- k4 @http://localhost:8080/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab% t8 S8 f4 F) X z' n2 {
通过"ipfs daemon"命令启动节点服务器,会将本地节点文件同步到外网,同步成功后,这时就可以访问如下网址来查看(如果访问失败,试着翻墙看看)。* o; m1 D' f) N( U7 @/ K7 F0 h% S
https://ipfs.io/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab/ O; A6 `6 m% J; G9 ]* W0 g$ C
- L9 Z+ ]( v5 j, j2 R8 e
$ Q& i$ v$ x( r! Q: q! w4 j8 n! U& w0 q& S$ r: y
查看IPFS文件内容
, s, |/ V7 k# m5 h0 |! Y, G$ ?3 ]. h& {% p5 q" B7 D
如果访问成功的话,说明已经存储到IPFS网络中。目前IPFS网络暂未加入代币Filecoin机制,所以存储读取文件免费,速度也比较慢。
6 F/ O/ _. Z) f+ m% n' c( V! B, ` - 下载IPFS节点的文件
! p: y$ L+ v2 G1 r6 @2 r& JwenzildeiMac:ifps_test wenzil$ ipfs get QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbSaving file(s) to QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab 25 B / 25 B [========================================================] 100.00% 0s查看当前目录,发现多了一个"QmSV..."的文件"
. S$ ~" q5 s! ]5 v( i$ W1 L
% T' k g& c6 A1 x1 N
: k: a; Q+ G1 Z3 O5 D! _8 j ^6 ?
2 ^( w- r, I9 w& E. ~# J
* @/ E8 b8 F6 q* A7 Q下载IPFS节点的文件
! a+ Z9 v" b7 o+ Y! k( v) u5 [ W6 a9 b' Y
- `6 u/ T. ~* d# W- s: Y2 y- b' l
6.2 创建文件夹存储文件- ipfs命令新建文件夹
+ h3 g/ I! I0 `4 q; ZwenzildeiMac: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 /文件夹名"可以删除文件夹。
$ P- S# i/ K, O+ }8 H
, ?3 U3 `+ ~8 L 6.3 IPFS上传文件夹- ipfs命令添加文件夹
% A$ F' g1 \* p! H/ R先在本地创建一个文件夹和对应文件,如图:$ i X1 }. [5 @ E. Y
1 V6 J% M; b7 s* V. X3 x5 r
/ P7 U& b9 N" d' B6 @) j
6 g0 t x9 \0 M W5 F( d5 q& H) U) q+ G( R) V
本地创建文件夹及文件' J) v2 ]8 ~" N2 R! F/ z
; e& P6 F8 P& @9 b1 q2 n$ c
然后通过"ipfs add -r 文件夹"命令添加整个文件夹0 v( \5 e3 U; X
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$ - 查看文件夹的文件内容5 p. a; z5 k( F) r6 b
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对应文件夹
2 j) [, s3 K+ `' {5 v7 u访问文件夹对应的IPFS地址:7 U0 E: _* M5 m$ d; Y' ~
https://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj
3 r8 g2 M$ Y u8 R- N C$ T# @第一次访问的时候,需要同步数据到IPFS网络,等待时间有点久,慢到让你以为同步失败了。3 n( D: @! P9 z2 ~/ E d
' a* K5 q% V! d" V2 b
! t- ^0 E% J( k a5 \+ P+ y2 {9 w
; s( b: ~" M7 h( Y
查看IPFS对应文件夹
3 [% w2 j$ s( L* k; W
C: m% b* R% u9 N4 l+ {" [9 ` T, X访问文件夹对应的文件,如看到图片文件,访问ipfs网关:% i( N) h0 i( Z0 r
https://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj/portrait.jpeg' D# d* ?, b: n1 T
8 ]! t5 v/ t3 ?5 \, F$ {! Y
, I9 I$ I8 H9 B: I1 B$ f# M( z8 t. i) w; s7 U/ p
查看IPFS文件夹对应文件
6 U& J* u% O% E% i4 @; D8 @+ g7 K5 G$ @/ ?2 a6 u' I8 I
或者通过文件的Hash来访问,如访问txt文件的地址:
9 n7 \$ \' Z; K( X0 Yhttps://ipfs.io/ipfs/QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQvT* \) a* Q; M2 ?/ h- C" N, k/ P2 `
9 m, ~: H d( z* l. U* l- q
: z. T/ y/ s6 e; d9 g% x9 s, X
- s8 E$ l' j9 p% A9 D5 _
通过文件Hash访问查看
0 F1 b6 ?$ K; s3 P8 u% W5 {
2 t, D, o. \6 p4 K* H
+ y4 S$ s8 h1 D" J/ r, n 6.4 添加简单网页到IPFS节点- 网页效果和项目结构( t- ~3 n. k9 S
实现一个简单的实时显示系统当前时间的网页,效果如图:
3 [5 Z' ]/ a6 C) P7 I. P; I
- p7 Z) ]( a! e
4 G; {) ^& @ V3 r
0 P; t4 {* S& f
( ? W. p, |* ~5 i2 J4 o) Q& a/ L& u$ GIPFS添加简单网页
# L' ]( {+ H3 I# R- l1 ~* U. Y$ B" M! E, \2 j3 N
工程结构如图:
/ c- G6 c+ d5 k6 y6 { ?# {8 [7 z) F9 R6 a& D* h. z
, T1 x$ x; u' z+ m
1 k, E6 \) O6 V- _' ~
2 h1 q9 C6 S# j5 c6 a W网页工程结构
! `5 g. i$ }7 ]4 b0 r2 q* l! W# A8 @
9 h/ [$ ^: B T/ Y7 I, v( t 实现代码比较简单,这里就不贴代码了。- R- Z F6 F9 R# s' P& ] u
- ipfs命令添加文件夹
4 @8 c* K7 p& Y& q( `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"命令在新的终端窗口打开运行。
I. e# s: ? w7 w4 g* ], 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对应文件; V7 a; x# T, M/ x3 k+ h* Q# D$ e
浏览器访问ipfs网关:
# G1 A+ e5 F& ~: H5 }https://ipfs.io/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD/
5 o$ ~7 S8 H5 e- L: o( L- @" b
' Y( F$ |! d7 C$ o2 o+ j
/ p) U' u2 C2 P4 W
: Y3 H" ]. o' Z: ~3 K8 f i查看IPFS对应网页0 b* n: I ^( y$ _$ D' t
( _. ~6 Z1 e' Q
' T: b' {) f# e
6.5 IPNS绑定节点名- IPNS绑定节点操作2 b7 z1 a7 {3 K5 Y
每次修改文件内容后,文件的哈希值就会发生变化。对于网站而言,发布后可能还需要做修改,这时需要IPNS绑定节点名。每次更新网站内容后,重新publish一次更新发布到IPNS即可。! b7 P: @. o$ t, D4 X4 N
刚才的html根目录的哈希值是QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD,操作如下: ~- H2 M3 N' Q; C, ?0 G# O
wenzildeiMac:study wenzil$ ipfs name publish QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDDPublished to QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz: /ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD - 查看当前节点
1 ~" `$ c7 B& f; RwenzildeiMac: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"
- d5 V5 {+ g: H5 _! }& ^* \5 Z - 验证节点- X8 w. o5 V) `2 R: Q; l
命令为:"ipfs name resolve 节点ID“- g) T2 k r& @2 b
wenzildeiMac:study wenzil$ ipfs name resolve QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD - 访问IPNS对应文件
* L, p; t1 u2 }! z( H' Q* S浏览器访问ipfs网关:
1 l3 K; y; T( ?2 @https://ipfs.io/ipns/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/4 {. T' C2 A# V
}+ z2 W9 S4 ?, c- z1 j8 ?
% W, v7 @+ Q1 @" v: Z
" G x- [9 A/ Q4 z7 Q. W% P) E
7 | d# E9 j6 s6 l+ t. h查看IPNS对应网页- u9 {' o9 k) j
& k, L1 g! @& [5 H
7、IPFS与以太坊DApp开发实战- IPFS与以太坊DApp结合的好处
# m8 ?; w" O9 F$ C9 Q+ Q5 r在以太坊平台上,往区块链写入数据需要花费以太币,调用智能合约执行每一行代码的时候,都需要一定量的gas交易费。区块链存储大数据成本很高,而且不合理。
# k, B2 I) Q0 i2 t) m# j2 R" T3 _可以先将文件存储到IPFS,然后得到文件的Hash存储到以太坊区块链中。读取文件的时候,从以太坊区块链中获取文件的Hash,再通过Hash来读取IPFS网络上的文件。
/ W6 ~, P9 H- {& K. w) X使用官方提供的ipfs-api,可以很方便地在代码中操作节点将数据上传到IPFS,或者通过Hash从IPFS读取数据。
( \4 T1 |7 W% I9 j$ O6 HTruffle框架提供了快速搭建包含以太坊智能合约的React项目,可以通过"truffle unbox react"创建工程,然后安装ipfs-api依赖库。于是,可以在前端方便地调用IPFS的接口来读取、上传文件。
+ [/ R- V- v6 V' Ttruffle unbox react官网:
3 ]& X7 N& F ~) @% [9 Ehttp://truffleframework.com/boxes/react2 E& i# d% [( G% O
- IPFS与DApp开发实战7 l+ N1 {2 y* e, ~! i) s( u4 @
话不多说,开始进入实战开发。
+ o# |7 U( X) h k5 J' Y7.1 安装Truffle unbox react新建一个空目录"ipfs_dapp",然后执行安装命令
6 ?7 c }5 A0 k( m( atruffle 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",修改后完整代码:
) C: p) M E% C% d2 N% K6 [. L. p7 Hpragma 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"
. n* Z4 E; w' Q& j! X: kfunction 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"进行智能合约的部署
- W0 ]; i) Y" O" G' M) `5 s
9 I# u! }+ Z. y8 y
% K% G* w2 d4 P+ L: Z. w
* {1 a t# R1 L* k; _ E$ IRemix-IDE部署智能合约
7 I" C/ d2 t8 |# z* g% |
0 d/ g- R+ c V8 v' `+ j* l
- k' l/ A1 X, M: o) J2 w* _" T! `
) q+ ~# N! [3 [8 |& \( h3 z6 B- P0 F. _1 l u- d& [
Remix-IDE部署智能合约-确认: p1 ^7 M ?2 x8 F* K9 z7 c
" d, W6 K. J, j/ ^; ]; G/ H+ M然后复制智能合约地址,App.js文件中会用到合约地址为:"0xb177d6cf6916f128c9931e610c63208d9c5a40f3"
+ v9 |! p/ _, c9 ?; ]/ g; r7.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/ b# U7 {0 r
. z' P! _& d1 p, q" g' C: c3 ]
- n+ e+ Z( T+ @- @
npm_start
6 Z; X" a, V4 H/ a i8 @+ z- g8 U1 j4 x$ W3 U- P
会自动打开网页,然后上传一张本地图片,之后点击"图片哈希写入区块链"按钮* q7 _" V/ p% }5 c; F- y- m: N; }
; O5 z$ T2 L9 T, T8 f; C0 t
5 Q# i, e' D; T5 `+ {
4 N4 Q0 e) F/ y/ o! e0 [8 z0 e6 u
运行结果19 C( r) {# r) J
! A, I$ `4 i2 F最终效果如图:9 K* Y0 c5 G/ ?/ t& G8 D. A* u
5 v/ ]7 ^0 _3 S9 V6 E# P
/ V( K* [$ \4 \9 q$ ]
$ c P6 _6 A; O2 q c( N
8 k9 D9 K, |9 l/ s2 L1 N$ n
运行结果3 G& v5 r; h$ c. k9 H
- X) g+ ^! Q8 B) V5 j
访问IPFS网关:
# a# Z3 j2 B/ qhttps://ipfs.io/ipfs/QmbHptfJfyuGAZxstFYgAVfz33cytR1seTD3ZabBSDd899+ F( _9 E1 p# k3 j; r% {$ D
发现图片已经成功写入IPFS,如图:
9 x7 i; ]4 A' P1 ?# Q' s3 R+ ]: i c% |6 @% P* V
: E! A% W7 y" X2 Q+ m( f
# R6 G( r9 n- a+ d$ R h5 P) N' v) F( ^+ \% @6 L7 O$ A/ b
运行结果3$ I0 _1 E" v9 v8 s& V
1 w) a) F8 A. y7 U备注:本地IPFS网关端口默认为8080,我的电脑上端口冲突了,系统自动修改为8082。7 `: S8 z* E: ? j. G# y& l
搞定,收工。7 q& Y7 P/ q; w1 x, y. N# Q
PS:刚入坑的小白,很多不懂,还请各位大佬多赐教,谢谢!& q5 W4 s F+ L0 y5 C9 ]/ p
" y- j" I3 N5 W F, k' ]- I
|
|