|
|
本帖最后由 赤膊医数 于 2021-4-22 23:41 编辑 4 K+ }# F, W; x- g/ u
- ~ z7 E7 b/ Q$ v
2018年,最火爆且值得期待的区块链项目莫过于EOS和IPFS。1、IPFS简介- IPFS是什么
- w+ Q% c. {2 @: n+ g0 h星际文件系统IPFS(InterPlanetary File System)是一个面向全球的、点对点的分布式版本文件系统,目标是为了补充(甚至是取代)目前统治互联网的超文本传输协议(HTTP),将所有具有相同文件系统的计算设备连接在一起。原理用基于内容的地址替代基于域名的地址,也就是用户寻找的不是某个地址而是储存在某个地方的内容,不需要验证发送者的身份,而只需要验证内容的哈希,通过这样可以让网页的速度更快、更安全、更健壮、更持久。: _& V! F2 b) p1 q H: |- G9 S% T; O
以上内容来自巴比特官网介绍4 n& F7 U. z1 d1 `& M* q8 @
IPFS是基于区块链技术的去中心化存储网络,实现了永久性存储。$ P2 D! O1 z/ g! ]! \
- IPFS的火热
. n' e6 R$ X& S, ^2 DFilecoin ICO是迄今为止涉及金额最大的ICO,仅一小时就募集了接近2亿美元,打破ICO记录,成为2017年最火爆的区块链项目。IPFS项目吸引了世界各地数字货币投资者和互联网从业者的密切关注,2018年比较值得期待的是IPFS主网的上线。然而就在前段时间,官方公布说上线时间延期到年底。
$ U1 G7 C7 X) _5 J; {注:Filecoin是IPFS激励层的加密数字货币(即代币),有点类似于以太坊平台上的以太币。 w5 W6 V% ?+ P
IPFS官网:https://ipfs.io/
$ n; i z. x; e4 bFilecoin官网:https://filecoin.io/
7 t' S$ ~$ m1 r3 Q; V - IPFS的应用案例4 v% l. W6 W- T/ E
GitHub有两款开源项目,且有对应网址,分别是音乐播放器和视频播放器。1 c: O7 V1 J5 z) i" p! o
9 [4 [% y4 |( a3 f" j2 H, v
- IPFS音乐播放器
7 D; Z" C; ]- a! C% w4 n+ R/ |9 y$ M. L0 ?1 f' ~
1 F+ `8 |8 V) i$ W N* d
/ q0 S+ J7 ^- t6 i
: \! J' {; v! K/ tIPFS音乐播放器. u% J9 x, K# u/ h7 W, b. h! k
, @; w9 R: C6 V2 Q; q) N* [
IPFS音乐播放器网址:https://diffuse.sh/
8 p. i5 y+ h8 f9 G6 y; mGitHub地址:https://github.com/icidasset/diffuse9 u9 k4 e9 {' x8 Y+ G
- IPFS视频在线播放器
; E2 E# ^5 Y) B% K9 u7 F8 y
0 m/ C- \: C6 g9 r
J0 T& _3 G, @- D, ~
# w5 ~. C- K0 A* I0 o( S/ V
# c ~1 A0 w6 Q3 c3 u0 L7 A
IPFS视频在线播放器首页
9 D# i! r1 y# @/ m
0 E( r) T0 `" ~) X
+ d8 V* H: d. P $ M& @9 z% y i; U& M
" L6 M$ |) E+ R. i0 |
* Y/ j$ r1 Q, F5 `& ~7 Y. ?; qIPFS视频在线播放器播放电影. Q$ ?5 L2 b, F7 w& B$ E/ ?0 ~5 Z
' w- b0 t9 ]8 T0 g! }+ `号称是国内第一个IPFS应用( B: n- z+ I/ j3 s4 [6 ?
IPFS视频在线播放器网址:http://www.ipfs.guide/: u/ _0 d# M8 M8 A; z+ |8 N/ n8 g
GitHub地址:https://github.com/download13/ipfstube
( J2 p$ }. Y6 L6 }; q& d/ ~' e可用于测试的电影视频Hash(这里只列举两部):; k' {- R$ E9 e- N( E/ ]7 e$ ?
神秘巨星:QmWBbKvLhVnkryKG6F5YdkcnoVahwD7Qi3CeJeZgM6Tq68. N% L5 C# G) C, o0 p( R3 Q8 {
盗梦空间:QmQATmpxXvSiQgt9c9idz9k3S3gQnh7wYj4DbdMQ9VGyLh
' |# f- Z; S1 ~ z' X 2、IPFS的安装既然IPFS这么牛,有必要了解一下IPFS的开发,先从IPFS的安装开始。* |" z1 M) b( X, g
- IPFS Desktop
1 z/ ~' w* Z; E2 a0 n& @当然,可以直接安装IPFS节点桌面管理软件来体验一下。该软件可以方便地运行和管理自己的节点,查看IPFS节点资源信息,支持二次开发。该项目是Node.js编写的,已开源。
, x: M1 S! p9 N; I+ l9 N7 w" K9 |2 h }- |* M5 {9 C
; h( w- r+ u- D5 t( V" `
8 c9 O6 z1 E. F0 R6 N, N. ]
* K- k6 Q0 ?% F3 { t6 g3 ^9 s5 vIPFS节点桌面管理软件
. T5 [+ I& d3 l7 a
* J, Q' d4 v8 {6 ?1 Y4 O- C: lGitHub地址:
/ {; U: }5 J# A# Uhttps://github.com/ipfs-shipyard/ipfs-desktop% s6 {$ ^+ W1 J
- Go-IPFS5 S2 B5 a$ q% @6 d& _; J
进入IPFS的官网,找到并切换到"Install"页面,点击"Download IPFS for your platform",会跳转到如下网址(需要翻墙):( \. D! _0 Z: U9 ^& Q1 B/ E$ _
https://dist.ipfs.io/#go-ipfs
8 Y4 \7 H5 C: {) a* P: C: \$ x* p$ R- B1 D5 U
! F- ^5 Q2 L7 N- d5 c! I4 o. p
* E/ B2 |1 N: ?3 A# L' W下载Go-IPFS8 G# _+ X- H1 l; q: f6 j7 U& ^( q) J
2 f! ?8 T# u$ ~# o" u如果打不开,可以试着去Github查看安装方法( M5 {5 O6 x5 O! C8 v- {0 P
GitHub地址:https://github.com/ipfs/go-ipfs B2 }# I3 P1 w
将网页下载好的文件解压出来,下载的是"go-ipfs_v0.4.13_darwin-amd64.tar.gz",解压出来的是go-ipfs文件夹,
Y+ p3 I. y- N5 m然后打开终端,进入到go-ipfs文件夹根目录,复制ipfs文件到系统的bin目录,然后可以通过"ipfs version"来检查,操作如下:
( O' E% u; f% [0 F3 IwenzildeiMac: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.138 o6 B e5 m, N: D0 N/ B/ _/ ~+ p
3、IPFS节点的创建、查看和启动以下是安装官网的Go-IPFS步骤下实验的
/ _( T) A* l' Y! }- 创建节点 Q5 J- ?" V, a$ w8 B8 c/ y
进入到当前用户的根目录,并使用"ipfs init"命令创建节点,可以用"open ./"打开创建节点生成的".ipfs"目录。
8 x. A7 K! e# X, UwenzildeiMac: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 ./% G9 T4 P# O0 ^4 E2 b1 u, f" q" N
1 G7 ~! W- R c5 d- U7 r
% t5 ^2 w0 n/ E+ c" B0 |
0 \& \2 T6 S ?7 m6 o7 H2 xIPFS节点的创建, V h1 b2 I2 _+ [# D6 q
1 U4 K! |! b3 i# f; M; D- 查看节点id/ F6 x$ u p' U u
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 G( H- [6 b* x9 N) e5 j存储节点默认存储大小为10G,如果你想修改存储空间,可以修改config配置文件,找到StorageMax并修改
, }: p# S; z7 S+ d) s. q$ k3 A6 uwenzildeiMac:~ wenzil$ export EDITOR=/usr/bin/vimwenzildeiMac:~ wenzil$ ipfs config edit
* ?* ~* Z8 W% T+ \* X4 E$ E
3 V) E/ C6 l5 y4 n; V; ?5 L5 K% u
" l" o+ Z' u ^
修改IPFS默认存储空间: _( f+ w' H$ k! b
; b! W0 P+ Z t& n& |1 A- P: ^
- 启动和同步节点服务器
5 _/ E- R1 p$ d) M6 b: r执行"ipfs daemon"命令,可以同步节点数据到IPFS网络。& b& U; h; _1 _$ z$ o) N7 I* h
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$ f" q- N% U% q0 O
4、IPFS运行体验- IPFS查看ReadMe0 h" j, `; q- X( V. Y! [1 ]
可以回去查看执行"ipfs init"命令的时候,返回的内容。打开一个新的终端,操作如下:9 F; r$ X7 f+ a+ a# N
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管理界面! b* a! q7 ^7 o" h e
IPFS节点服务器启动后,可以用浏览器访问:http://localhost:5001/webui. O4 C; T+ L# j9 U$ O) L' A! _
有本地配置、节点连接、本地节点文件等信息,如图:
) B) I5 I3 @7 p# `! p) i6 f' n9 y5 `6 M) T
$ \7 |% v1 d$ ?! I ~+ m5 e
5 y" j9 }! n0 e- x) U: V0 g7 [5 ~
9 l2 R9 R% G8 O7 j
IPFS的Web管理界面& c' ^7 \0 Y/ @$ k
$ O0 r) b8 K0 S- b3 m4 s6 E% @
5 W6 J& f0 ~: K! I
8 `# O6 G6 w# ]) P# {) D J. A; e 5、设置跨域资源共享当我们在前端通过js接口操作ipfs时,会遇到跨域资源访问问题,可以在终端执行以下配置来解决:
9 B2 S8 C, c1 B" ]' h9 K% h9 X5 F" Nipfs 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节点- 新建文件
0 v1 _' s. `- S# @/ L8 {2 [wenzildeiMac:ifps_test wenzil$ vi test.txtwenzildeiMac:ifps_test wenzil$ cat test.txt IPFS测试文件 - 添加文件到IPFS节点
# h1 s, Q! _1 l2 n' S5 }+ t8 BwenzildeiMac:ifps_test wenzil$ ipfs add test.txt added QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab test.txt添加文件到IPFS节点后,返回了文件的哈希值6 g1 ~+ q3 A2 ^* @& [: g
- 查看IPFS节点的文件& Y# a6 Y; ]! K2 j) R0 T4 W
wenzildeiMac:ifps_test wenzil$ ipfs cat QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbIPFS测试文件注意:此时的文件只是添加到了本地的IPFS节点,读取的是本地数据,可以通过如下网址查看。
: n0 W/ ]0 c1 g, }. Whttp://localhost:8080/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab
9 O8 E, y. X3 l' {. x# A通过"ipfs daemon"命令启动节点服务器,会将本地节点文件同步到外网,同步成功后,这时就可以访问如下网址来查看(如果访问失败,试着翻墙看看)。& R' [* R* j% B9 a% q1 D' c7 t. G
https://ipfs.io/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab. f1 ?# D4 j2 ~# @3 p& o) S
1 s4 h! @. i; ` O
- B7 l% A& R; N. j. a# g+ @
2 \7 S! d( n; L# D6 E" K查看IPFS文件内容
& U5 _. S/ I o6 m) [, J1 \0 u
( M) V8 k' ?1 j3 o* m! m/ q如果访问成功的话,说明已经存储到IPFS网络中。目前IPFS网络暂未加入代币Filecoin机制,所以存储读取文件免费,速度也比较慢。
/ N0 f. v5 Q- a1 {; s - 下载IPFS节点的文件
) `; ?6 B' q0 k6 [: `6 L8 VwenzildeiMac:ifps_test wenzil$ ipfs get QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbSaving file(s) to QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab 25 B / 25 B [========================================================] 100.00% 0s查看当前目录,发现多了一个"QmSV..."的文件"+ d6 q9 h5 h# M. H
, o" U4 ^8 l$ R& ^. t# X5 ?$ e, a* l6 y
( G. m1 o' U# f4 J
: p' M* P" j Y5 K3 i4 Y+ c0 e/ K7 W' u# _ j4 k& g$ S$ S$ U
下载IPFS节点的文件
8 u( t6 _: T# C5 E4 u1 }
5 {% N: @8 H: Y& Y6 J! y9 K" B7 I0 C6 D$ s
6.2 创建文件夹存储文件- ipfs命令新建文件夹' V5 |6 q5 G! G' 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 /文件夹名"可以删除文件夹。
9 F" x# p6 c& I$ u6 z V o Q- C
: t4 z X$ c( V$ c+ A 6.3 IPFS上传文件夹- ipfs命令添加文件夹6 h$ Z$ \( A3 W; j/ ?2 [8 v
先在本地创建一个文件夹和对应文件,如图:8 J! U. I/ ` s4 I
# d& f( T, A% |- D3 x7 K/ H- w0 L3 V+ h4 v! y( x) E/ m1 `
& v8 x! v3 q: O; @: h7 R3 h& Y' h" j
) M6 v( m" V' n4 e本地创建文件夹及文件
! Z1 n* u/ ?7 }% i: _ c
% K0 a$ L8 ~& h: Z然后通过"ipfs add -r 文件夹"命令添加整个文件夹( R0 t, d! a' O- n G
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$ - 查看文件夹的文件内容' m9 G9 p% p# A; F& N+ N9 s
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对应文件夹
$ ^' a/ n6 D1 s! k: s% Z访问文件夹对应的IPFS地址:
( I( y9 s) c0 i7 Z5 I$ Thttps://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj
/ K& J& d3 d5 O第一次访问的时候,需要同步数据到IPFS网络,等待时间有点久,慢到让你以为同步失败了。
: M2 F1 e) w1 z$ {( o4 q2 J, X* z9 q/ K# b3 B
4 g7 M1 n! P1 }$ f
+ A3 D* g2 E* s4 m
查看IPFS对应文件夹; i+ W$ b1 Z+ q' W4 Q3 n; ~
5 ^. q5 A$ k6 a9 [! V2 a2 m
访问文件夹对应的文件,如看到图片文件,访问ipfs网关:
@7 f; f$ X) ?; g% I) Ghttps://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj/portrait.jpeg |- U0 E% @3 p
9 Q5 o F8 F( r, O2 I
! @) G6 v# @ B5 _9 U! t; b5 G7 [. P) J* E
查看IPFS文件夹对应文件
5 B, q: u4 F2 E9 f( ~
+ `4 x! U' M" p. o或者通过文件的Hash来访问,如访问txt文件的地址:
! Z! P' \+ ^; k# M$ W2 I% b: Shttps://ipfs.io/ipfs/QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQvT
8 l7 z; c( M: M: c% K2 |/ ^: V4 A* I
: q8 P0 N) Y, p
7 y4 q0 \# _5 c通过文件Hash访问查看
$ H9 O* w7 G' V8 ]) j3 ^; u% _# b4 @+ k! C
* n& w1 `8 ?2 `$ D
6.4 添加简单网页到IPFS节点- 网页效果和项目结构. |+ y3 n7 c) P' [( n6 R& e
实现一个简单的实时显示系统当前时间的网页,效果如图:( c" q: Y! s$ V5 k$ S3 V
+ ?5 n1 c% `' W H8 E* T2 d
$ j* S5 i! `! O# | `' a
' g/ J1 g8 c6 W& O6 r- R6 h) h, }4 }& n% c' M
IPFS添加简单网页5 {6 ?4 [7 b- ^: `2 H9 T
- {! i; i- u+ l$ o* t# t工程结构如图:$ I& J! P6 ^$ C& F+ Z
6 X2 w0 S* a! m1 }2 S: @, a0 K$ @3 A: ^, {: W j& V
5 J! B8 g% T2 ?! g. o2 o8 ~ s4 P% q: o6 X! b% N) b
网页工程结构
: q5 |4 O* o1 |8 B1 c1 {- j/ I. R3 o5 r( o- O
9 a& f( X* \. F5 g. n 实现代码比较简单,这里就不贴代码了。/ ^( {* c' y. t8 e. j/ V: @
- ipfs命令添加文件夹
* q( m) B( w* awenzildeiMac: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"命令在新的终端窗口打开运行。
+ w: o' ]% I# l) g' P3 L; hwenzildeiMac:~ 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对应文件3 y( P2 F$ |; R( b& i( E
浏览器访问ipfs网关:
% T5 Q1 D- `" Z. f0 J3 E( q Ehttps://ipfs.io/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD/
$ \! s+ r+ u" L7 \ \5 d' c% \) I" d; ?4 E
% p. L9 `4 r. K- f3 J
. u' r/ t9 L |0 Q& {6 \; R7 O查看IPFS对应网页
. F: U/ O9 O5 y5 G- o- K. Q; k8 C2 _, Y$ |
$ H) n: m6 [5 i9 m% P; q 6.5 IPNS绑定节点名- IPNS绑定节点操作% G s- d" e, {: d o
每次修改文件内容后,文件的哈希值就会发生变化。对于网站而言,发布后可能还需要做修改,这时需要IPNS绑定节点名。每次更新网站内容后,重新publish一次更新发布到IPNS即可。
; ]( |- b* ~. X/ }: \% P" X刚才的html根目录的哈希值是QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD,操作如下:
- @7 v. b) r9 D3 @' c' A6 U+ SwenzildeiMac:study wenzil$ ipfs name publish QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDDPublished to QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz: /ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD - 查看当前节点# U9 @7 j" W8 j7 ~8 @/ A& C! P- k
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"
$ N# r; D4 c% Z - 验证节点
! b' m% X$ c7 C& A命令为:"ipfs name resolve 节点ID“
! ~; \) ~# ~6 ~" X' VwenzildeiMac:study wenzil$ ipfs name resolve QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD - 访问IPNS对应文件
' w7 j2 R+ ?" v5 B- B+ }浏览器访问ipfs网关:" Z/ O7 H8 f5 y @1 [
https://ipfs.io/ipns/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/
/ l( F! l+ _# p9 x y4 ~' t: G2 S l" M+ d
9 C: P) x& d/ Q" T6 w
6 l1 m0 _. k7 |& c5 T: R* v. X1 p4 C
查看IPNS对应网页8 }$ A2 R M6 k
: Z; M, l: \' b) k
7、IPFS与以太坊DApp开发实战- IPFS与以太坊DApp结合的好处9 K, D6 I5 [9 f% ^) l
在以太坊平台上,往区块链写入数据需要花费以太币,调用智能合约执行每一行代码的时候,都需要一定量的gas交易费。区块链存储大数据成本很高,而且不合理。
: ]" ]* A7 Z [9 v" l5 w可以先将文件存储到IPFS,然后得到文件的Hash存储到以太坊区块链中。读取文件的时候,从以太坊区块链中获取文件的Hash,再通过Hash来读取IPFS网络上的文件。
& k/ ~) H) a5 f* u2 X# k; J% h* K使用官方提供的ipfs-api,可以很方便地在代码中操作节点将数据上传到IPFS,或者通过Hash从IPFS读取数据。) {4 L W% n- m+ n$ G
Truffle框架提供了快速搭建包含以太坊智能合约的React项目,可以通过"truffle unbox react"创建工程,然后安装ipfs-api依赖库。于是,可以在前端方便地调用IPFS的接口来读取、上传文件。8 k; p! S' C5 i/ x) E
truffle unbox react官网:
+ N* z8 w1 K M- `; a! @) F9 ahttp://truffleframework.com/boxes/react& k( L* r" ^1 K& y/ E7 e1 b% B; ^' P
- IPFS与DApp开发实战( f" g* `/ r; T7 R5 H F$ T
话不多说,开始进入实战开发。
* k' V) |& d' q5 N% J$ m7.1 安装Truffle unbox react新建一个空目录"ipfs_dapp",然后执行安装命令
/ p# J" K4 C9 Ttruffle 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",修改后完整代码:% _) K6 p$ k! y+ @& ?3 x0 `+ \
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"
3 \) Z4 x; ]0 E! m( h. Q/ F+ |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"进行智能合约的部署
* F: l5 b, [+ ^- i. v8 p: h4 r9 `. ?) e3 m, _( c
* t* A7 w$ B- ~! l2 k5 T
( r: T# b! A+ z! ?Remix-IDE部署智能合约) [" x, c$ t" v H; l Y
+ W* y1 }3 U$ C7 y1 ]
l, X- }5 E( n5 O5 G& B# ~! I, v
5 p' Q% I" j+ F
) _: H7 V3 y2 @8 b2 nRemix-IDE部署智能合约-确认 V4 q2 N: u6 Y& X. T( p; f( v1 B
' n3 I% z; ^6 q
然后复制智能合约地址,App.js文件中会用到合约地址为:"0xb177d6cf6916f128c9931e610c63208d9c5a40f3"
j( \9 G/ S- l, }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"命令,结果如图:9 {: D- J1 d: f, f' c
- N9 |+ H6 i& L: t
4 _. _3 u- c1 k, X; Wnpm_start
8 I6 M1 r4 L9 {3 Y/ U1 K
4 D, U6 B- n, W. A6 F9 {* o7 b会自动打开网页,然后上传一张本地图片,之后点击"图片哈希写入区块链"按钮* W* d7 ~9 } k$ g, f! S
) J X5 X$ j8 u M( {
- _' u: _+ t: ^ o u; ?: D7 c. g7 U# D; d
运行结果1$ Q0 n$ f+ m9 S
3 f' b7 R; P; Q! R$ h
最终效果如图:
: c5 \5 k- ]/ G b2 t* J/ `% o5 Q5 i1 H9 U+ L. d6 N% [
+ y4 F8 \' d( Y2 V) Q q1 ?" i
- d* T9 }; h$ F
8 b( W9 I) E( f. { c) m
运行结果
9 F* V# O% w" I5 g/ \, v0 u( J3 g) f: S
访问IPFS网关:6 P$ h9 E& T9 S
https://ipfs.io/ipfs/QmbHptfJfyuGAZxstFYgAVfz33cytR1seTD3ZabBSDd899
% v/ i6 } n1 H4 Z9 u3 J发现图片已经成功写入IPFS,如图:+ h. @* ]: `8 R* ]' D' |
( j3 [3 W5 q3 J2 u9 |5 I8 G& v" N7 }* l
' n" a9 [) F1 S0 U6 ?
\2 E6 j0 w B' @1 x$ K运行结果3
8 y! t8 w$ v/ l2 F: n% w
+ l% e* F& y6 k. k# O备注:本地IPFS网关端口默认为8080,我的电脑上端口冲突了,系统自动修改为8082。
8 g$ ~, i! f9 c3 N. }搞定,收工。7 x* @$ W. |* k$ W. D1 l1 X
PS:刚入坑的小白,很多不懂,还请各位大佬多赐教,谢谢!) E0 X3 b# K8 D
! x: T9 W4 ]+ x6 q! c, G
|
|