|
|
本帖最后由 赤膊医数 于 2021-4-22 23:41 编辑 4 d! I4 t; O0 _/ O7 F0 F7 l' r1 q8 U
( s6 x5 X. v' [) v2 l, @2 a; x2018年,最火爆且值得期待的区块链项目莫过于EOS和IPFS。1、IPFS简介- IPFS是什么& B; B8 J4 m& }
星际文件系统IPFS(InterPlanetary File System)是一个面向全球的、点对点的分布式版本文件系统,目标是为了补充(甚至是取代)目前统治互联网的超文本传输协议(HTTP),将所有具有相同文件系统的计算设备连接在一起。原理用基于内容的地址替代基于域名的地址,也就是用户寻找的不是某个地址而是储存在某个地方的内容,不需要验证发送者的身份,而只需要验证内容的哈希,通过这样可以让网页的速度更快、更安全、更健壮、更持久。& W; x! g* v+ j7 o, O6 X( A
以上内容来自巴比特官网介绍( x3 Y& j' r1 P# I" l
IPFS是基于区块链技术的去中心化存储网络,实现了永久性存储。. T; @1 c. \- M, Q5 d& ~# f3 t
- IPFS的火热
" h5 s" o6 G$ L5 S* n kFilecoin ICO是迄今为止涉及金额最大的ICO,仅一小时就募集了接近2亿美元,打破ICO记录,成为2017年最火爆的区块链项目。IPFS项目吸引了世界各地数字货币投资者和互联网从业者的密切关注,2018年比较值得期待的是IPFS主网的上线。然而就在前段时间,官方公布说上线时间延期到年底。
( _, m/ [4 K- v+ _% B0 a3 f注:Filecoin是IPFS激励层的加密数字货币(即代币),有点类似于以太坊平台上的以太币。( A c$ K4 k2 _! }& v
IPFS官网:https://ipfs.io/
+ @* l+ E; c7 J, F6 QFilecoin官网:https://filecoin.io/, J8 T: G* Q( B: s
- IPFS的应用案例
! i$ \4 V \1 B1 }- D9 H6 YGitHub有两款开源项目,且有对应网址,分别是音乐播放器和视频播放器。& a/ u+ p3 z% g' B0 M( P, _+ \
1 n1 }5 O+ w. t9 p- o- IPFS音乐播放器) ~& Q! J! \* Y, K
/ X$ q) E9 m1 O* n& j8 {9 T; m
3 A1 ^/ ~9 W- [) h D
$ t2 u6 S# _5 v! e6 [( r3 F3 x [6 N) G+ t& J* h$ ], R
IPFS音乐播放器
' _6 X6 b$ a8 n* |7 x4 w+ B: Q- L6 e7 \5 J
IPFS音乐播放器网址:https://diffuse.sh/, v# b. [4 a u: X% l
GitHub地址:https://github.com/icidasset/diffuse) {! Q! G; \. a# V
- IPFS视频在线播放器7 ~6 A( j- J' F# f' r2 b. A+ t2 ?" b
* j% l; j1 y8 L2 A# D, e1 F
. a+ r: l3 j) u! c. X7 i) m0 q
^2 v ~, p1 s: R2 L$ ?- B& B T1 e& R& w! t. O
IPFS视频在线播放器首页" v# L$ h$ V- S- ]$ V7 ?. D% O+ f
8 v T/ |% a9 [# B* K7 A% z2 t+ B0 V, Y& x. K2 `8 O& a+ j
. H' D; ?% e1 ~; L2 b
8 J4 n5 k3 L" D! o Z
/ K7 O' D& s9 a/ ~6 ^2 w% FIPFS视频在线播放器播放电影
$ ^! Z/ ^3 q# y c! ?$ O) e2 M: @/ C( F: O! \9 [- [5 I2 z
号称是国内第一个IPFS应用
+ p0 e, N8 e9 H" ^4 v. @IPFS视频在线播放器网址:http://www.ipfs.guide/
3 E3 |' P/ ~* kGitHub地址:https://github.com/download13/ipfstube
1 R2 ~* u2 P$ ]3 c: h. V可用于测试的电影视频Hash(这里只列举两部):" w; y' Q- ~* ]7 q0 ^
神秘巨星:QmWBbKvLhVnkryKG6F5YdkcnoVahwD7Qi3CeJeZgM6Tq68% Y8 E( t( m ^( q% ^2 Y
盗梦空间:QmQATmpxXvSiQgt9c9idz9k3S3gQnh7wYj4DbdMQ9VGyLh( |1 ]3 W- E2 K/ o
2、IPFS的安装既然IPFS这么牛,有必要了解一下IPFS的开发,先从IPFS的安装开始。, F. L9 m/ w6 r: Q6 `0 n; b
- IPFS Desktop
9 |( w9 O4 J9 j当然,可以直接安装IPFS节点桌面管理软件来体验一下。该软件可以方便地运行和管理自己的节点,查看IPFS节点资源信息,支持二次开发。该项目是Node.js编写的,已开源。
/ B' f) g9 S7 M$ L: I2 L0 `# U/ o. ?1 k1 X$ F0 c, I) n
4 p* s7 ?$ O7 H k U c! L
* s' ]& A, V+ B* n8 d5 n
& v1 W2 v% v! a3 b* SIPFS节点桌面管理软件
& A7 ~5 ?. b2 g
8 L4 G: i4 C }; j9 T# j! _9 KGitHub地址:
: f4 z# M3 W$ Ahttps://github.com/ipfs-shipyard/ipfs-desktop
/ b1 i8 k0 ^" Y; _. [1 w - Go-IPFS
; {4 X: H9 F# @; U. {+ d进入IPFS的官网,找到并切换到"Install"页面,点击"Download IPFS for your platform",会跳转到如下网址(需要翻墙):5 `2 W' V+ `9 R. E) r; W
https://dist.ipfs.io/#go-ipfs8 v8 Z. b4 Z4 j0 C ^- c* i
! _* q8 m& |8 m9 A; o
) u/ z; S' g# T" g; Y$ X1 @
3 j# o' B8 ?% v, O) k' ^( {
下载Go-IPFS
" [2 o0 r( L/ s5 Z' o
: ^5 ], O- C$ I9 j5 Y+ l% V; O: J如果打不开,可以试着去Github查看安装方法9 D3 W/ q( b, I3 D* K) q- ]
GitHub地址:https://github.com/ipfs/go-ipfs* ]+ v& S$ |$ S# Q: U
将网页下载好的文件解压出来,下载的是"go-ipfs_v0.4.13_darwin-amd64.tar.gz",解压出来的是go-ipfs文件夹,$ R* D1 R# m- e$ i B; V
然后打开终端,进入到go-ipfs文件夹根目录,复制ipfs文件到系统的bin目录,然后可以通过"ipfs version"来检查,操作如下:
7 A2 ?5 h% \8 B |, J1 Q; |* bwenzildeiMac: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
& L4 d* }( A" E G% { 3、IPFS节点的创建、查看和启动以下是安装官网的Go-IPFS步骤下实验的 a/ K2 u7 |$ y
- 创建节点: n& K7 k% K P
进入到当前用户的根目录,并使用"ipfs init"命令创建节点,可以用"open ./"打开创建节点生成的".ipfs"目录。
' {- {: X! i0 z8 e0 _; iwenzildeiMac: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 ./
2 j: \2 C6 W- E& P* Z2 p/ @' x a: G* N 3 ]( H: ^' D4 k- f1 ]
2 T3 X! V, Q% P' B, @
1 t7 W) C" F! M6 O& h
IPFS节点的创建 {. {# w, B" @# M3 q) x
2 C. i* Q( r$ l" r3 N) m; W/ |$ i- 查看节点id
; ~( l! w# u ~& qwenzildeiMac:.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 P- T' A- G9 ]2 p2 z# m) u存储节点默认存储大小为10G,如果你想修改存储空间,可以修改config配置文件,找到StorageMax并修改( d! N. p! K# A- Z2 q; E" `7 U! G! ?
wenzildeiMac:~ wenzil$ export EDITOR=/usr/bin/vimwenzildeiMac:~ wenzil$ ipfs config edit : x1 a9 q; I" A$ k k N
: d; d- K, A, D0 o2 W, t3 [' i) {# U
8 _ s: E0 E0 O% R
修改IPFS默认存储空间2 |# A }% r0 e: ^* j3 x1 B
5 M# E. l+ l$ W0 d( O' h& E0 f c+ s - 启动和同步节点服务器
" D- Y {3 I" f+ X执行"ipfs daemon"命令,可以同步节点数据到IPFS网络。
( {0 l5 |8 R5 p/ i# IwenzildeiMac:.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- ], t3 q4 {5 S# w- g9 R3 A
4、IPFS运行体验- IPFS查看ReadMe) D( t8 j* M0 n
可以回去查看执行"ipfs init"命令的时候,返回的内容。打开一个新的终端,操作如下:
$ ?; F) ~' y5 P' fwenzildeiMac:~ 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管理界面
- C- W4 {& E# P1 ]9 |IPFS节点服务器启动后,可以用浏览器访问:http://localhost:5001/webui
7 k$ I* F) p9 v( ]有本地配置、节点连接、本地节点文件等信息,如图:& p* _+ G0 J' l
6 A( o) J! L2 b6 V- q) q8 v7 J, \% [
* |& k. b% m8 Y1 _
- X& C6 g7 k" K' Q2 S3 ?; F. I" v4 X2 [2 g
IPFS的Web管理界面8 a. p9 j5 G B
I6 }% I3 ? L& J X2 ^- U) |4 e- ^ S; ~& @
" y9 R7 Q8 X- Z K
5、设置跨域资源共享当我们在前端通过js接口操作ipfs时,会遇到跨域资源访问问题,可以在终端执行以下配置来解决:
1 W f6 z1 v0 C1 kipfs 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 I, M0 A" t$ f0 J: |5 ~' U
wenzildeiMac:ifps_test wenzil$ vi test.txtwenzildeiMac:ifps_test wenzil$ cat test.txt IPFS测试文件 - 添加文件到IPFS节点7 J( ]$ j) C( J) X9 o! ]8 g
wenzildeiMac:ifps_test wenzil$ ipfs add test.txt added QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab test.txt添加文件到IPFS节点后,返回了文件的哈希值( _" U" I/ g( U2 V
- 查看IPFS节点的文件! u: J+ J) x7 _% O! i
wenzildeiMac:ifps_test wenzil$ ipfs cat QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbIPFS测试文件注意:此时的文件只是添加到了本地的IPFS节点,读取的是本地数据,可以通过如下网址查看。2 ~4 c E# x$ {2 r- h
http://localhost:8080/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab* u% i& X6 J2 A) r4 v
通过"ipfs daemon"命令启动节点服务器,会将本地节点文件同步到外网,同步成功后,这时就可以访问如下网址来查看(如果访问失败,试着翻墙看看)。
( l: f& I! ?: g z- H; A% khttps://ipfs.io/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab1 H8 g6 l6 n8 Y
& ]- U6 O5 V* a5 @- ]; l. O$ d
4 J! i+ ^( z5 u/ ]$ l9 Q% R3 g k( b( S& x+ j3 z$ Q4 K" D" X
查看IPFS文件内容$ R2 P6 O( M a# A0 a$ X8 ]0 a
$ Y6 j) M/ f* ]
如果访问成功的话,说明已经存储到IPFS网络中。目前IPFS网络暂未加入代币Filecoin机制,所以存储读取文件免费,速度也比较慢。
1 z E2 ~1 ~: y - 下载IPFS节点的文件4 G- N, S u! W5 G0 z& ~3 A3 f
wenzildeiMac:ifps_test wenzil$ ipfs get QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbSaving file(s) to QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab 25 B / 25 B [========================================================] 100.00% 0s查看当前目录,发现多了一个"QmSV..."的文件"
, Z1 l: D% O& Y4 P) I7 [9 O3 Y, H5 C* s1 m) u* x2 z
7 t/ ~5 b: A2 K% R% B$ j! p
* ^9 m/ b1 h! T) c1 h" c# Q. |- X' ~9 R' ?4 i
下载IPFS节点的文件 V# Y! ^% _' ?- ~& t" s2 s; s
$ N) l# G, ~* ^; q+ t
; {: H8 N5 z. s3 N' E3 H9 u; Y9 j
6.2 创建文件夹存储文件- ipfs命令新建文件夹
5 b. m7 a, p/ H; f, XwenzildeiMac: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 /文件夹名"可以删除文件夹。
U7 l Z) g# F1 g5 S. W7 M( b/ Q- M5 R* h" R+ O5 s$ K, |0 h
6.3 IPFS上传文件夹- ipfs命令添加文件夹1 v4 Z2 a( b6 p$ q
先在本地创建一个文件夹和对应文件,如图:: U! y! ?" H5 ]* r( ~4 o# P! n1 K8 x
% M" C# a+ b" R7 f" g
?5 L4 o- A6 ?
+ q; W; Q! s. f8 ?$ g c
. J% W2 J) d3 c
本地创建文件夹及文件
$ K% X: b5 Z1 r# V& P9 Q! R) S3 v! W, p# B$ x" Q
然后通过"ipfs add -r 文件夹"命令添加整个文件夹4 l0 Q' A4 _! }: K! W
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$ - 查看文件夹的文件内容& R$ t0 E% B$ G9 L7 d
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对应文件夹/ C# R; D) G: \4 t9 z7 v7 ?, V' T* F
访问文件夹对应的IPFS地址:
) R2 D) V' ~8 n% f& J+ p: t: M [/ Nhttps://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj0 t% A2 `% S) B
第一次访问的时候,需要同步数据到IPFS网络,等待时间有点久,慢到让你以为同步失败了。
" K5 N/ V- {7 q2 E+ }, t. C+ m6 ^3 B B9 E9 T) H$ K* C( }
) ~+ R; p& K1 G) d
* b. w7 u- g6 T4 }7 j% N, c查看IPFS对应文件夹# x( E1 ~, y7 w2 h4 R) p5 ^
/ y7 O4 g5 a i3 d( \3 d3 o访问文件夹对应的文件,如看到图片文件,访问ipfs网关:2 w! c1 @7 Y8 ~: a& X8 Z, c+ P# M
https://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj/portrait.jpeg
' X2 N8 x5 c- T) O/ _& K6 }' v5 {; g6 |7 D$ w
7 h. q' ^& e9 a" b( t% b" l k C6 Q5 p' ~6 ~6 X3 S9 h+ K$ x
查看IPFS文件夹对应文件
% [& a9 P+ b4 \
0 c7 S3 T6 ^- u+ C% Q6 d或者通过文件的Hash来访问,如访问txt文件的地址:
, A1 S) _& Q) d1 Y* U) R) U2 ehttps://ipfs.io/ipfs/QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQvT$ a4 w( K* W- _% @' [3 Z
0 I; Z O) B1 }( T
0 |8 q1 I4 ?$ i& n/ E2 A8 i& o0 L( V; \/ J! f. G Z7 |
通过文件Hash访问查看6 q+ d( q' f+ z6 W7 K8 s* j
/ e7 U3 B4 K3 U7 ?( h$ E5 E! v. v
9 i3 k9 r5 l8 K4 X' o 6.4 添加简单网页到IPFS节点- 网页效果和项目结构6 m# I) X+ \7 c/ H# o0 M) ^
实现一个简单的实时显示系统当前时间的网页,效果如图: W* {/ G3 N; E/ ^$ c) \8 W
2 i/ q% G+ [8 q5 n! _" s
, a5 u3 m# C: G. e. q
1 W2 L1 H( y- i1 k& [, Q( F8 F
, @9 \+ @5 m. j: u$ y7 M8 wIPFS添加简单网页
& ~8 a8 T, B( w, |/ v3 F- |/ f3 s: C3 ~+ i' e' {
工程结构如图:6 C/ M6 Y. U" ~8 f1 }* I3 H
N6 O7 R; D7 Q9 t9 {$ L& z; |4 V7 m7 Y0 \' \" r* R' Z
& ?$ E/ s. B+ _, o% D2 K
) ^5 B G9 W, L网页工程结构
5 k* y. `' _- w& }" V0 G
% B3 V" G# h6 W" k2 u/ \ q
Y0 D9 U) n- a: c' G, W4 }. a! q0 W 实现代码比较简单,这里就不贴代码了。" R+ |. g) p. C% S4 W8 s! P
- ipfs命令添加文件夹
$ u1 H2 L M+ v6 D8 nwenzildeiMac: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"命令在新的终端窗口打开运行。
) v a' W9 k1 c; w6 BwenzildeiMac:~ 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对应文件
* X# n# D8 f6 v( T% N+ ~6 D浏览器访问ipfs网关:+ A/ L$ _" \" n( B( R% X- y6 m) Q
https://ipfs.io/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD/
8 ~5 E0 P+ `) q0 X8 e: ^- s- t
; V0 J9 Q5 n) w# Z9 G/ C7 ~
% s5 i* S2 W- K3 U# a, H5 i; ]2 F- n( W8 k; o. @
查看IPFS对应网页8 \8 X( m8 A+ t5 b0 J | _
/ |$ ] W# z* _# \6 h" Q# S p$ [
( I! ^8 j# ] k6 I4 P. [
6.5 IPNS绑定节点名- IPNS绑定节点操作3 A5 I- f/ n, Y9 L" |+ A; |4 ?
每次修改文件内容后,文件的哈希值就会发生变化。对于网站而言,发布后可能还需要做修改,这时需要IPNS绑定节点名。每次更新网站内容后,重新publish一次更新发布到IPNS即可。* I- E( g, k9 j: q N1 n
刚才的html根目录的哈希值是QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD,操作如下:
) n5 y# J" Y! B3 X1 Y0 KwenzildeiMac:study wenzil$ ipfs name publish QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDDPublished to QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz: /ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD - 查看当前节点: k/ s% B1 [; R6 d- X5 K! D
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"' _6 v9 o' E" f$ O; G# {3 M
- 验证节点5 U% d# t# F( @3 [5 _, P
命令为:"ipfs name resolve 节点ID“
4 }( H! l4 ], Q) f6 }' J. nwenzildeiMac:study wenzil$ ipfs name resolve QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD - 访问IPNS对应文件
5 b N) O( u, J1 n4 S' a* F8 P* d0 D浏览器访问ipfs网关:
4 q5 j( c* o# q. K' ?4 ]& @https://ipfs.io/ipns/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/- [% h0 ^) d% ^" ^5 h' M+ h
* t; g3 D( a$ k8 ~4 d. a
- E! p( s+ @) \
6 M r+ W! J' F1 L
+ @- w( [" U0 ^( n W: X6 u; Z9 @! M查看IPNS对应网页% K E$ b- O3 p; ~" B6 ]
2 }* U- z9 s% F7、IPFS与以太坊DApp开发实战- IPFS与以太坊DApp结合的好处
5 q9 m1 [* f3 c( t在以太坊平台上,往区块链写入数据需要花费以太币,调用智能合约执行每一行代码的时候,都需要一定量的gas交易费。区块链存储大数据成本很高,而且不合理。& f$ D. O. X9 E6 P1 A
可以先将文件存储到IPFS,然后得到文件的Hash存储到以太坊区块链中。读取文件的时候,从以太坊区块链中获取文件的Hash,再通过Hash来读取IPFS网络上的文件。2 i6 [1 \( M: T2 K$ o' P
使用官方提供的ipfs-api,可以很方便地在代码中操作节点将数据上传到IPFS,或者通过Hash从IPFS读取数据。
% u- J# ?3 J4 W2 @' c5 ~Truffle框架提供了快速搭建包含以太坊智能合约的React项目,可以通过"truffle unbox react"创建工程,然后安装ipfs-api依赖库。于是,可以在前端方便地调用IPFS的接口来读取、上传文件。/ z2 T) e+ L, j% o+ E
truffle unbox react官网:% m0 q- ?8 R6 y
http://truffleframework.com/boxes/react
- e# v1 C: y6 {% m w. ^ - IPFS与DApp开发实战4 [" l- E4 {* f( [0 w( p' `) N
话不多说,开始进入实战开发。
: P. r+ _3 A6 W( o7 c% f/ ^7.1 安装Truffle unbox react新建一个空目录"ipfs_dapp",然后执行安装命令; K" y0 H( F. N' b# Y4 Z+ y
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",修改后完整代码:
4 [7 F" c: V2 e4 c8 `8 Wpragma 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"
, Y. a9 G6 S: rfunction 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+ T1 M# H: |1 ]7 e/ ^8 S
) X3 l& b M) G# h) c, r+ u
! t2 {. v& F5 c' h* w6 j$ T8 X& \
Remix-IDE部署智能合约
2 u( M) j3 C9 o/ o5 {
" M5 t- h# w9 t0 Q7 v7 x+ ~% q9 l8 y# J% x) C: E+ i- S# r
# a4 y& ]1 Y4 {. U, C9 \) R. w' R! s. m, ^* O& w3 t* r6 D8 n. q
Remix-IDE部署智能合约-确认3 ~* c' o$ d% R- M: y' S
" `1 O* l( A& Y6 w& F: }
然后复制智能合约地址,App.js文件中会用到合约地址为:"0xb177d6cf6916f128c9931e610c63208d9c5a40f3"- j' ?/ N5 K& E5 G3 Z F( n
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"命令,结果如图:
6 b8 n: x* j4 A- \: c
1 h& z0 J- l1 [# z: I1 a* W+ K& t* ]% i
npm_start' u7 T! q- \7 v, k4 W* l S
' p( j% h% l7 G" G会自动打开网页,然后上传一张本地图片,之后点击"图片哈希写入区块链"按钮8 U; Z3 H6 k* F- U; x! E
$ O. G7 Z7 p4 G6 C6 z4 O: i
: _/ N; D6 c) R; L( }" [
3 [* c0 d% v) l, U: \* }
运行结果19 X1 u- Y4 O! s, n
* r F* a. ~; R& Y+ k! F3 S最终效果如图:
; I$ u3 j0 ~# [% g1 g+ \# a- l6 w n* u. ^: k
! \% y' w, {; [. ~$ p
+ t3 @- ~* T9 Z/ ^/ [; y5 ~: f' L+ |1 ~
运行结果0 Q; W7 G5 V0 f0 i0 T
4 E/ b1 Y) ?6 N2 r2 M$ }1 q3 |
访问IPFS网关:9 V) g' D5 Z0 u# {- h) O% \) a
https://ipfs.io/ipfs/QmbHptfJfyuGAZxstFYgAVfz33cytR1seTD3ZabBSDd899
8 L2 c* Y- [& W% ? M. c发现图片已经成功写入IPFS,如图:, |, r8 [" y# j E
" {) m+ d( ?8 ~2 H/ `4 i
! r; d' b- u d. G+ Z
& }+ x# Z6 C/ |1 P! m4 g; k* u3 j1 E" S% J3 b- S' ]
运行结果3
( b/ W7 D* g& E1 b8 Z, b7 U5 w a3 i- n E
备注:本地IPFS网关端口默认为8080,我的电脑上端口冲突了,系统自动修改为8082。
& Y/ ~) J/ q" w$ I' i3 R B& U搞定,收工。0 U/ ]' U8 V- Y2 C v
PS:刚入坑的小白,很多不懂,还请各位大佬多赐教,谢谢!
. X0 Q, O7 c* m0 h% Q$ e3 v1 R3 O# F! z8 a% ^3 `* P
|
|