|
|
本帖最后由 赤膊医数 于 2021-4-22 23:41 编辑 $ |8 d6 l' ^# k8 L' i1 V
. t% S$ t2 r8 Y" G+ u* |2018年,最火爆且值得期待的区块链项目莫过于EOS和IPFS。1、IPFS简介- IPFS是什么
2 M9 `# `; M5 y h: D0 V星际文件系统IPFS(InterPlanetary File System)是一个面向全球的、点对点的分布式版本文件系统,目标是为了补充(甚至是取代)目前统治互联网的超文本传输协议(HTTP),将所有具有相同文件系统的计算设备连接在一起。原理用基于内容的地址替代基于域名的地址,也就是用户寻找的不是某个地址而是储存在某个地方的内容,不需要验证发送者的身份,而只需要验证内容的哈希,通过这样可以让网页的速度更快、更安全、更健壮、更持久。
% B% h/ G/ w( G2 t% {7 \以上内容来自巴比特官网介绍
- k! s4 ?9 V' c2 BIPFS是基于区块链技术的去中心化存储网络,实现了永久性存储。: k+ A U( J( C
- IPFS的火热+ p6 k5 ?8 c! m( p; H! r' b
Filecoin ICO是迄今为止涉及金额最大的ICO,仅一小时就募集了接近2亿美元,打破ICO记录,成为2017年最火爆的区块链项目。IPFS项目吸引了世界各地数字货币投资者和互联网从业者的密切关注,2018年比较值得期待的是IPFS主网的上线。然而就在前段时间,官方公布说上线时间延期到年底。) U: N+ [: u/ i4 ^! @8 \
注:Filecoin是IPFS激励层的加密数字货币(即代币),有点类似于以太坊平台上的以太币。7 B* P5 G8 {3 k6 P& a
IPFS官网:https://ipfs.io/
( W6 p6 E- ?' Q3 F- pFilecoin官网:https://filecoin.io/
, `8 }# x( \, q: R - IPFS的应用案例
/ S% h0 Y/ _" oGitHub有两款开源项目,且有对应网址,分别是音乐播放器和视频播放器。
& s% n, k: V/ `! L2 o5 k/ M& Y5 C3 T3 t9 J3 l
- IPFS音乐播放器
7 M/ X, }( G* C: h7 x9 i# a* r* T
/ m$ m+ O- o# o3 d' v5 Q9 [5 T9 O7 |1 v
1 h- V0 E5 s5 q) G U% h( B$ l! o3 I+ z( V0 j+ {% `8 `1 W. H
IPFS音乐播放器% D& [/ w4 E" h3 ?- k# L
- i% ]% j t6 V' E, QIPFS音乐播放器网址:https://diffuse.sh/
1 `; O) h, C6 \- G- x8 ^GitHub地址:https://github.com/icidasset/diffuse
+ a* h7 k) [/ Y3 j - IPFS视频在线播放器5 m3 F/ m. t* n- @6 j
# B. \8 J7 x, i: `" E# l1 ~" h6 z* c$ ~& \
+ ]" e) e/ r6 }+ N, k1 W# |$ j
3 Y T# w2 u7 _3 G6 ~IPFS视频在线播放器首页
2 }2 k9 P9 |8 ^$ I L4 u5 U" r0 K) R' x+ W0 s/ R
7 @; A9 {( G( G" W8 m* Y* ^
1 g3 H4 R! Y; ^' e: B( z9 ?
" P1 c8 j3 q+ [4 B9 b. k: J1 l: w
: t1 F: U8 d- m9 M& U4 gIPFS视频在线播放器播放电影
& }" ^: ?7 @6 ]% [- j- v8 M9 y
3 u) n% Y$ S* s9 `7 E& I; g号称是国内第一个IPFS应用* a5 ^; }: t# N. Q0 \. l5 e
IPFS视频在线播放器网址:http://www.ipfs.guide/% M+ |" D' K T0 F4 {
GitHub地址:https://github.com/download13/ipfstube7 T: G" x( R: E b) { o. ^/ Y
可用于测试的电影视频Hash(这里只列举两部):4 ?, b9 s# `! u- E6 o O t# _
神秘巨星:QmWBbKvLhVnkryKG6F5YdkcnoVahwD7Qi3CeJeZgM6Tq68
' _' g: r* {9 w' s+ o' T6 u盗梦空间:QmQATmpxXvSiQgt9c9idz9k3S3gQnh7wYj4DbdMQ9VGyLh0 ]" j9 i% h/ a& @ {
2、IPFS的安装既然IPFS这么牛,有必要了解一下IPFS的开发,先从IPFS的安装开始。
. |2 ^4 E- P0 Q6 v( R) g6 r- IPFS Desktop0 F% b9 n/ d+ k- }4 M- S8 ?. j6 i
当然,可以直接安装IPFS节点桌面管理软件来体验一下。该软件可以方便地运行和管理自己的节点,查看IPFS节点资源信息,支持二次开发。该项目是Node.js编写的,已开源。9 R; E& F% w+ k0 q. t
7 I! _6 D2 `; M5 N- q9 d; c$ }
9 R: ^, ?% o6 }2 B; I. v
7 q# g# g, D/ B
- L6 l6 N: m& X8 PIPFS节点桌面管理软件
1 J" j" B3 G$ Y& }& M1 ~4 j
" J4 n! E( x0 g5 [2 s* Q4 cGitHub地址:
" O$ ^# m i( Y3 b) S% shttps://github.com/ipfs-shipyard/ipfs-desktop
2 G9 q3 w1 A4 w% ^, I - Go-IPFS j( t* X1 n2 K) |
进入IPFS的官网,找到并切换到"Install"页面,点击"Download IPFS for your platform",会跳转到如下网址(需要翻墙):/ E0 Y0 O9 Y, M, A& v' e
https://dist.ipfs.io/#go-ipfs: n& r+ h2 p8 \6 t+ o
4 @& ?6 {# C% s& P8 v7 h1 y, C
; A7 @/ X% \3 Y" s4 T
: D" B- X- F# m7 ^7 t( z6 x下载Go-IPFS2 G7 ?' L$ F- _3 k/ s1 P
d* M; P, B- s/ E( a如果打不开,可以试着去Github查看安装方法
- c7 r+ U$ k) {( {/ e; v- fGitHub地址:https://github.com/ipfs/go-ipfs7 u. d& t$ ^6 ?; m: l2 R7 X( v
将网页下载好的文件解压出来,下载的是"go-ipfs_v0.4.13_darwin-amd64.tar.gz",解压出来的是go-ipfs文件夹,
Z( k( t8 `/ p, H0 |然后打开终端,进入到go-ipfs文件夹根目录,复制ipfs文件到系统的bin目录,然后可以通过"ipfs version"来检查,操作如下:
3 s; @& d% R' H8 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
) e# q3 r7 v1 z& s# p 3、IPFS节点的创建、查看和启动以下是安装官网的Go-IPFS步骤下实验的$ ?9 h% S, z0 D& @& Q; B$ A
- 创建节点
* Q! o( t# s" M进入到当前用户的根目录,并使用"ipfs init"命令创建节点,可以用"open ./"打开创建节点生成的".ipfs"目录。
* q7 }1 r' I+ z4 y& U+ T# n V2 lwenzildeiMac: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 ./
. [# R' E( v/ D; B3 d6 T3 ~ . M- p3 A5 B* w4 X Y3 U6 q
* n, e3 M P" A& E! g; a
) M! G+ s6 g7 g3 V3 m* c
IPFS节点的创建
1 n2 Y1 j# X: H% z5 n. z3 ~# `7 w' k+ z) _2 g6 N
- 查看节点id
3 \$ Z$ a. d- T/ T- ^1 r: twenzildeiMac:.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默认存储空间
" V0 Q1 n+ O! T! k3 W存储节点默认存储大小为10G,如果你想修改存储空间,可以修改config配置文件,找到StorageMax并修改6 z Y7 k! d3 u9 f
wenzildeiMac:~ wenzil$ export EDITOR=/usr/bin/vimwenzildeiMac:~ wenzil$ ipfs config edit
( q+ g! c6 s- A; n0 p1 Y* P
; I7 _* ]9 h8 S1 a6 K
* G& a# ?2 o7 a; [" D2 M
修改IPFS默认存储空间( F8 Q: U2 [/ H, n( a$ v5 N9 A
, e. T, v# { c. G; I) M - 启动和同步节点服务器
2 h! j8 l! h ]7 \; q3 n) W执行"ipfs daemon"命令,可以同步节点数据到IPFS网络。
# T1 Q; x$ l3 E1 s1 ywenzildeiMac:.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: X. {3 w$ }% @7 ?( R m
4、IPFS运行体验- IPFS查看ReadMe6 j6 k$ X- a$ o8 b" ~
可以回去查看执行"ipfs init"命令的时候,返回的内容。打开一个新的终端,操作如下:
7 }! z5 j" m9 @/ I; T ewenzildeiMac:~ wenzil$ ipfs cat /ipfs/QmYwAPJzv5CZsnA625s3Xf2nemtYgPpHdWEz79ojWnPbdG/readmeHello and Welcome to IPFS!██╗██████╗ ███████╗███████╗██║██╔══██╗██╔════╝██╔════╝██║██████╔╝█████╗ ███████╗██║██╔═══╝ ██╔══╝ ╚════██║██║██║ ██║ ███████║╚═╝╚═╝ ╚═╝ ╚══════╝If you're seeing this, you have successfully installedIPFS and are now interfacing with the ipfs merkledag! -------------------------------------------------------| Warning: || This is alpha software. Use at your own discretion! || Much is missing or lacking polish. There are bugs. || Not yet secure. Read the security notes for more. | -------------------------------------------------------Check out some of the other files in this directory: ./about ./help ./quick-start <-- usage examples ./readme <-- this file ./security-notes - Web管理界面
9 k1 R, b5 p* T: Q5 qIPFS节点服务器启动后,可以用浏览器访问:http://localhost:5001/webui
+ u' C8 U! c; r/ l# R3 d* M4 B, y' _有本地配置、节点连接、本地节点文件等信息,如图:
- I9 @5 s" y, L% }, y! w) D/ \( I) ?7 ]
8 x8 [; u. Z' s6 h I2 `: i5 d7 N
8 F1 |3 U( X8 C3 Z- _8 y$ ~: e7 V+ P7 e+ g" Y- H" W2 B6 B3 m- N: X' J
IPFS的Web管理界面* D, ]) k) |" g9 X/ z
" L$ J$ j$ E B9 d2 }) Q) K+ @
, C% K9 V& ^5 }4 k- L/ K9 A& Z# s3 t* Z1 t0 M
5、设置跨域资源共享当我们在前端通过js接口操作ipfs时,会遇到跨域资源访问问题,可以在终端执行以下配置来解决:
" e- t, j9 T y" `; L7 m, x1 o; Lipfs 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节点- 新建文件5 \/ N6 Q, Z! U. F: p) t, W$ X8 G
wenzildeiMac:ifps_test wenzil$ vi test.txtwenzildeiMac:ifps_test wenzil$ cat test.txt IPFS测试文件 - 添加文件到IPFS节点: E | o6 `$ `8 `
wenzildeiMac:ifps_test wenzil$ ipfs add test.txt added QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab test.txt添加文件到IPFS节点后,返回了文件的哈希值# x, P' Y( n0 A% w& W" ^. R: q
- 查看IPFS节点的文件
: m9 r& D) j1 b/ ~- _wenzildeiMac:ifps_test wenzil$ ipfs cat QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbIPFS测试文件注意:此时的文件只是添加到了本地的IPFS节点,读取的是本地数据,可以通过如下网址查看。( D/ a" ]3 I I. e1 P0 J, D
http://localhost:8080/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab! J! j3 A! x5 ~6 I
通过"ipfs daemon"命令启动节点服务器,会将本地节点文件同步到外网,同步成功后,这时就可以访问如下网址来查看(如果访问失败,试着翻墙看看)。
$ N+ q5 I: j/ }https://ipfs.io/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab
, ^: _5 [) ^# a g" x- T. s) \/ g" O) X# U
Q5 h9 t( \; Z* \, V. f7 c4 t0 K: g; J
4 Y/ d" X6 g! E" Z: N2 H) C查看IPFS文件内容2 L' i/ W1 a, g( G6 y$ E3 y
: t+ B/ g+ y5 I O/ M如果访问成功的话,说明已经存储到IPFS网络中。目前IPFS网络暂未加入代币Filecoin机制,所以存储读取文件免费,速度也比较慢。0 N8 ]' ]! ^# K8 b, n
- 下载IPFS节点的文件
^, C* m, Y2 V6 e, D& ]0 R- QwenzildeiMac:ifps_test wenzil$ ipfs get QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbSaving file(s) to QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab 25 B / 25 B [========================================================] 100.00% 0s查看当前目录,发现多了一个"QmSV..."的文件": X' Y: L8 U$ {' H$ ^% J$ F
V, y |9 T8 w$ d* f& y/ w, v' f# e; |
8 _% r8 O6 Y+ X' {8 `0 A- J8 j
O. ?: e) {2 T1 f4 O
下载IPFS节点的文件 X& R7 b9 R0 W* L6 I
6 u) A# T+ F7 L0 m3 c
; q6 m3 O4 ?& G r6 b
6.2 创建文件夹存储文件- ipfs命令新建文件夹
6 m% o" V0 |0 {3 v1 J5 O: T1 \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 /文件夹名"可以删除文件夹。
. d" H" t6 d% D
- {. @2 H! s' H4 h& c' U 6.3 IPFS上传文件夹- ipfs命令添加文件夹" {: m* p- I& Z9 z: y4 \
先在本地创建一个文件夹和对应文件,如图:
% z$ Z6 _ K4 w3 t; w! m+ m: G! J: w, u. x0 y9 F
: D, f6 W; r7 ]- o" M' _: \9 j
" C" c( p) p1 ?$ n. n( P5 i( }; l5 c- j% S3 {
本地创建文件夹及文件* T d N. ^5 n1 D
9 `& w) M" t2 `
然后通过"ipfs add -r 文件夹"命令添加整个文件夹. Z" o2 z8 E/ Q$ P+ l' c3 B
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$ - 查看文件夹的文件内容% M! d. C* Q. h- S9 [* |: ~
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对应文件夹
; {' r* U8 `/ i! ?4 V% g2 m5 }访问文件夹对应的IPFS地址:) O9 X) H% k2 z5 L& ` ~# J
https://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj6 S5 O. q( s4 J4 z! _: d0 j
第一次访问的时候,需要同步数据到IPFS网络,等待时间有点久,慢到让你以为同步失败了。
2 `) @+ N: K9 w X
z; R @/ N' A4 h3 L- O( |
- g% T8 a- D/ V: N- b
: Y2 y ]/ s$ r9 g6 a1 p查看IPFS对应文件夹. O( I+ P' j0 o; C( D* V4 r
7 R- B% s/ {1 m4 Z: Z3 p; v: a访问文件夹对应的文件,如看到图片文件,访问ipfs网关:
' }! \" G2 O% u, Y4 R; t7 ohttps://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj/portrait.jpeg
# w: f& X5 e5 `, ?7 j0 S; _) W
1 `9 E" c6 V5 m9 g; w; }0 a3 z1 T; b
9 U: e& g w6 w/ ?3 x
' V/ b+ q& a ?0 r查看IPFS文件夹对应文件. A8 V* _% V; R/ {
0 N' l( `; _& h
或者通过文件的Hash来访问,如访问txt文件的地址:
1 Z$ E0 u/ _0 ]/ M! thttps://ipfs.io/ipfs/QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQvT
" z# t+ w% z; A( w- N' {
1 W+ G4 z7 _: U9 X" O
3 w' y" }) s% t. X/ C# o
( I0 R- _6 @( i' Z通过文件Hash访问查看+ G" t! q6 ]% G1 S: T* H, m
8 l& N$ f# D# N6 i) G
9 m4 q5 u, y$ m* w+ q. Z" m8 m 6.4 添加简单网页到IPFS节点- 网页效果和项目结构
' w6 {5 {8 T# L z. E实现一个简单的实时显示系统当前时间的网页,效果如图:& G6 [- V1 Y- I3 W
% n* x7 J/ L7 l3 f- m* X" ?$ ]* E+ F9 S5 T: r0 |
) |. `. h$ n3 [9 k# a2 `2 a: r
0 E G7 Z2 p+ Z8 UIPFS添加简单网页& @ v1 }# k: `, _3 n" i
- n2 Y h) _0 f& a# c, d1 k" a工程结构如图:
3 ^5 v4 k# U: I. t! ]$ R2 T$ L4 [! H+ a& s0 `) z
* e8 l8 ^ b* r- n, b7 J7 U* k
3 T" b; D8 ^9 D, x
3 p/ l7 a2 Y) v* U网页工程结构( q" X" z; |4 C, Z
) b/ \4 c( S5 W" ~7 W
6 l' q0 P% i( Z! e" e- M 实现代码比较简单,这里就不贴代码了。" g( H2 @& R) z Y2 }7 M# H
- ipfs命令添加文件夹: q8 d4 C# i6 ^2 D
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"命令在新的终端窗口打开运行。! b& s$ p# p( x$ o1 e
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对应文件
, a( g* V4 b, M' V% y浏览器访问ipfs网关:
6 \1 L Z8 H' c0 S" m; } ahttps://ipfs.io/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD/
1 H) [! Z/ C. r' ^, n! i1 x1 F
& k5 S V: `5 v1 m* I2 I! y# M
. [& g3 W, l$ u0 S6 p. T D
5 \7 N& q. @, x0 ^) h4 _查看IPFS对应网页
7 c9 m- O2 c5 W# \. M
9 q: e6 h& t5 e7 N
2 d z) m# Q0 W6 P* t: B 6.5 IPNS绑定节点名- IPNS绑定节点操作( @! T4 ^/ ~8 h: ~7 l- Z8 Q
每次修改文件内容后,文件的哈希值就会发生变化。对于网站而言,发布后可能还需要做修改,这时需要IPNS绑定节点名。每次更新网站内容后,重新publish一次更新发布到IPNS即可。
, e5 o! i! V& `刚才的html根目录的哈希值是QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD,操作如下:
U- |9 F; p2 P* }: T: YwenzildeiMac:study wenzil$ ipfs name publish QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDDPublished to QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz: /ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD - 查看当前节点. h$ {5 U; R1 W! Z
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"
# c- r8 ^, `6 m - 验证节点
; z: r1 V: j, q1 s/ \命令为:"ipfs name resolve 节点ID“
) n6 J" ?% W7 @" hwenzildeiMac:study wenzil$ ipfs name resolve QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD - 访问IPNS对应文件
4 Q2 W5 t9 @, \; _/ I$ G- J浏览器访问ipfs网关:
, G0 n8 c5 t, chttps://ipfs.io/ipns/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/
4 V' S1 c4 m8 L% r) T7 z% q, f! r. W0 S2 l" ]! F6 ?' k+ B
% k9 Z2 E+ ?4 m( g4 ~# L& B
- i! P4 P0 C0 z
6 g: O5 d5 C8 g8 J
查看IPNS对应网页0 {+ C2 y5 V( V' ~! D: e) |$ I
, \" k4 Y* m0 h" d* v3 R( k9 d, c
7、IPFS与以太坊DApp开发实战- IPFS与以太坊DApp结合的好处
9 f/ M+ b8 Q1 v" J$ y在以太坊平台上,往区块链写入数据需要花费以太币,调用智能合约执行每一行代码的时候,都需要一定量的gas交易费。区块链存储大数据成本很高,而且不合理。
( D3 `- {8 W: Z" k$ V3 Y可以先将文件存储到IPFS,然后得到文件的Hash存储到以太坊区块链中。读取文件的时候,从以太坊区块链中获取文件的Hash,再通过Hash来读取IPFS网络上的文件。
1 Q9 i; K3 M' H8 A ^使用官方提供的ipfs-api,可以很方便地在代码中操作节点将数据上传到IPFS,或者通过Hash从IPFS读取数据。; `$ w+ y( ~) k
Truffle框架提供了快速搭建包含以太坊智能合约的React项目,可以通过"truffle unbox react"创建工程,然后安装ipfs-api依赖库。于是,可以在前端方便地调用IPFS的接口来读取、上传文件。1 ]& _6 `" O' [* V* d
truffle unbox react官网:& A* e C; w6 J5 ^
http://truffleframework.com/boxes/react
2 ^% C6 Z$ j! [ u& _ - IPFS与DApp开发实战" C! X% v5 V, ~' z: a1 F1 M
话不多说,开始进入实战开发。
4 _/ r+ I! K$ e7 x+ H5 l5 \7.1 安装Truffle unbox react新建一个空目录"ipfs_dapp",然后执行安装命令
L }/ g% j: D4 c% Ftruffle 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",修改后完整代码:
' N) h" o. C3 f7 Dpragma 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"
2 z: M5 _0 F. }; k B8 p. dfunction 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"进行智能合约的部署; U2 q2 D$ [/ h3 Q7 u: _! y
+ T. Z* H9 L" r( N* i( V5 Z8 N v) K
' g, {! t, M- G( P4 ?+ u8 t9 M
( n: A% e& l5 A8 V4 r' k2 S" rRemix-IDE部署智能合约
- w. t2 U& `4 u/ [( K0 W/ R# ^! z9 G9 Z& H' k4 ?9 k
0 n9 u# ?( u6 ^% _$ a4 O) ]( K
4 N+ t; T7 S, y! h( R( z& z# o# v2 }
9 U) E# |9 X1 X
Remix-IDE部署智能合约-确认! R: J. m& U9 w9 c' y
5 u7 a' n1 E* {然后复制智能合约地址,App.js文件中会用到合约地址为:"0xb177d6cf6916f128c9931e610c63208d9c5a40f3"
. M* M X: h. ^7 d7.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"命令,结果如图:* B( X4 l' C; g7 q1 s! h/ x9 n+ g% y
& P [+ C% b8 C# w$ G# [2 _% w2 Y3 t* A: q! ~% A% F
npm_start5 H1 J% b3 L' v& S" i
% j. b8 p+ e' r5 ^2 L; {会自动打开网页,然后上传一张本地图片,之后点击"图片哈希写入区块链"按钮/ M* G' o! i2 D) R; j" O! s6 p" l
3 Y5 |6 e) w! A
$ m3 \: i+ g0 i8 e
3 v, a- F$ m$ C3 }4 Z) Y0 f
运行结果1& E+ w0 y/ I# J) J f0 [; Y- s) g
5 ]! ?2 d1 U5 }6 a5 ~
最终效果如图:
% l# Q/ Q/ h# u( M; y9 ^+ D) k* W2 h" {$ v
; J1 T2 l: t+ j Z
7 K' b) ~0 c( e4 r: J
3 t S% p4 p, ]( A运行结果
% r% p& ?/ t' A2 u9 G+ L! t2 l7 B5 P7 c8 f
访问IPFS网关:
t/ E8 p ]4 Ihttps://ipfs.io/ipfs/QmbHptfJfyuGAZxstFYgAVfz33cytR1seTD3ZabBSDd899
5 @6 l1 d+ v. O, O; z' H发现图片已经成功写入IPFS,如图:
& `! q7 v6 B0 ]7 G; C% a# S' I }; t
1 c' G( @* c. `- Y: k" I& ^
3 q$ M, M5 m; v+ z/ ]9 r$ t; B3 z
5 X$ c$ ~8 T; K- |1 S; j# U! ^/ H
运行结果3
1 @' h1 i% J& o8 F( d6 `, e% c5 q8 a9 I, J; }( ]9 Y* Q
备注:本地IPFS网关端口默认为8080,我的电脑上端口冲突了,系统自动修改为8082。% W, l1 m1 |( o& Q% \, c4 R
搞定,收工。
" j; k6 N8 {' U& f& G# u9 [6 gPS:刚入坑的小白,很多不懂,还请各位大佬多赐教,谢谢!, [' K5 s7 l7 g& u' }5 `: S
+ r' K& c/ f1 Y i' i @+ Z3 w: Z
|
|