|
|
本帖最后由 赤膊医数 于 2021-4-22 23:41 编辑 9 E! F1 H1 p5 k3 ^7 H
/ ^ u+ D" m5 p: @
2018年,最火爆且值得期待的区块链项目莫过于EOS和IPFS。1、IPFS简介- IPFS是什么
. l$ o) J- N! o, n+ W+ Z星际文件系统IPFS(InterPlanetary File System)是一个面向全球的、点对点的分布式版本文件系统,目标是为了补充(甚至是取代)目前统治互联网的超文本传输协议(HTTP),将所有具有相同文件系统的计算设备连接在一起。原理用基于内容的地址替代基于域名的地址,也就是用户寻找的不是某个地址而是储存在某个地方的内容,不需要验证发送者的身份,而只需要验证内容的哈希,通过这样可以让网页的速度更快、更安全、更健壮、更持久。
) ]8 h( s' C0 Q! ?7 q以上内容来自巴比特官网介绍. j2 l2 e3 |7 y" ~9 e- ]3 }
IPFS是基于区块链技术的去中心化存储网络,实现了永久性存储。, n7 V7 w. V" F& J x! C- U
- IPFS的火热
* S g: T0 Q4 l" Y7 y' BFilecoin ICO是迄今为止涉及金额最大的ICO,仅一小时就募集了接近2亿美元,打破ICO记录,成为2017年最火爆的区块链项目。IPFS项目吸引了世界各地数字货币投资者和互联网从业者的密切关注,2018年比较值得期待的是IPFS主网的上线。然而就在前段时间,官方公布说上线时间延期到年底。" b7 L2 m. j* d% D' O% J5 q- s) [/ T
注:Filecoin是IPFS激励层的加密数字货币(即代币),有点类似于以太坊平台上的以太币。5 N7 `3 l6 h$ {; _7 g, A4 f
IPFS官网:https://ipfs.io/5 |0 N) n; q9 Z3 H4 {0 \
Filecoin官网:https://filecoin.io/
' Z0 k- h" N" V6 j- g - IPFS的应用案例2 X3 X6 X( `- h$ j; l: a
GitHub有两款开源项目,且有对应网址,分别是音乐播放器和视频播放器。
2 p. ]' w1 h" U: p1 F0 l( n1 g$ m3 H2 H6 E
- IPFS音乐播放器4 B8 c& w {" ~3 P) C8 \3 z* ~1 V
$ Y* g& D0 i T* \) V4 y
) o( v5 i$ ~* |' a# N# y
% \: L$ ^9 I+ U6 T3 C' [' B
- G8 }, u1 \+ a+ ?9 m9 i( F: {
IPFS音乐播放器( j9 I0 X9 ^& [
. t& L1 l2 N+ ^5 x9 t+ v. R# B
IPFS音乐播放器网址:https://diffuse.sh/" \- s) k, _8 e4 j
GitHub地址:https://github.com/icidasset/diffuse
6 O0 a* }* _0 P& {7 X/ d, B - IPFS视频在线播放器
" F. D# {* h7 F* y/ o
0 P- Q+ l: X) T) z2 W/ \& M. g# }8 L$ u
% Q, W* G! d5 b P4 Z0 u2 x) G6 n# {" Y. m# ^* \
IPFS视频在线播放器首页
1 e$ Y' h! O( W0 i5 N8 k* V
. A# W; e: C$ i% b& J3 ?: U
$ H7 ~0 o3 b" C! K6 B' ?% F% s4 ?' z
$ e+ U1 Z1 g; g& H' p* n7 z
! Y: R" p0 I+ A/ ?* T7 w% c; ~5 ?4 W; \" r, M8 O
IPFS视频在线播放器播放电影
1 w; }( o$ O! O5 C, J, e2 b& ~8 E
5 ^" B" U+ }4 h/ X3 P @& o& P号称是国内第一个IPFS应用( Z- n9 m, W- h8 w9 r5 x
IPFS视频在线播放器网址:http://www.ipfs.guide/
1 v) l& l# ^5 _; j; qGitHub地址:https://github.com/download13/ipfstube8 @9 G3 S: |/ |
可用于测试的电影视频Hash(这里只列举两部):
5 A, ~. n9 M: H神秘巨星:QmWBbKvLhVnkryKG6F5YdkcnoVahwD7Qi3CeJeZgM6Tq68 Y! Z- x+ ?3 q3 y. E0 Z
盗梦空间:QmQATmpxXvSiQgt9c9idz9k3S3gQnh7wYj4DbdMQ9VGyLh# \2 n' h5 P+ K; v$ z4 C
2、IPFS的安装既然IPFS这么牛,有必要了解一下IPFS的开发,先从IPFS的安装开始。/ B: y$ j6 {- Q
- IPFS Desktop7 p. J6 X% s9 p+ q# b$ c
当然,可以直接安装IPFS节点桌面管理软件来体验一下。该软件可以方便地运行和管理自己的节点,查看IPFS节点资源信息,支持二次开发。该项目是Node.js编写的,已开源。
2 C t7 |" X4 z; r2 w
" v" G1 z8 F+ ]6 g
: b: c' R1 ^: r' d; K6 N/ j+ @- H
7 S$ ^+ e$ I {* p6 _4 ^
, J. s1 b g4 `. @1 O
IPFS节点桌面管理软件1 u$ p3 h# h& l& F$ C
/ p( S3 G+ j# t8 d7 _. D
GitHub地址:- u5 I1 d' |/ R% T3 m
https://github.com/ipfs-shipyard/ipfs-desktop
; b! J% h6 g3 u) ?* O) N6 Y - Go-IPFS# N4 K& N. v |
进入IPFS的官网,找到并切换到"Install"页面,点击"Download IPFS for your platform",会跳转到如下网址(需要翻墙):
# O9 t& q: @* ?4 {4 n8 ~! _. Hhttps://dist.ipfs.io/#go-ipfs
7 _/ R4 v) L' ]/ b, T* }5 s2 x
' i3 I7 j0 y5 I) q2 |8 x* B2 L
8 D) L& |" q& a- u s
$ @; r0 R- d% l0 l下载Go-IPFS
) ]# ^* S' A/ G9 h) v
0 C7 ]6 Y# P/ Z' _" v# \/ [如果打不开,可以试着去Github查看安装方法' q+ M k Y0 ]. Q4 b
GitHub地址:https://github.com/ipfs/go-ipfs g6 A6 K+ q# `0 q7 w/ o
将网页下载好的文件解压出来,下载的是"go-ipfs_v0.4.13_darwin-amd64.tar.gz",解压出来的是go-ipfs文件夹,
4 j* |- \- r! e2 `然后打开终端,进入到go-ipfs文件夹根目录,复制ipfs文件到系统的bin目录,然后可以通过"ipfs version"来检查,操作如下:
, f0 D( {6 M: O. YwenzildeiMac: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.137 L7 p: B7 z3 C$ y6 s
3、IPFS节点的创建、查看和启动以下是安装官网的Go-IPFS步骤下实验的
4 {+ r( i+ c* k6 z0 i- 创建节点9 ]% z3 x3 H! W0 s8 z7 P0 K
进入到当前用户的根目录,并使用"ipfs init"命令创建节点,可以用"open ./"打开创建节点生成的".ipfs"目录。! e* {4 a' P# ~: H$ P0 ^
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 ./
" H2 s' w1 x0 j ) D7 u0 p3 N z" k# T: \- b3 p& P: L
Z2 C1 [0 }/ c- Z1 r) J4 U- U1 ?# a& {3 \0 b& r
IPFS节点的创建% f' y1 B* ^4 D4 a
$ A: `* a! d0 V7 S- 查看节点id! v) ?% k" g+ K3 k
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默认存储空间2 X2 t5 U5 ^0 z8 o" [$ N J$ r4 c
存储节点默认存储大小为10G,如果你想修改存储空间,可以修改config配置文件,找到StorageMax并修改
7 Q, m# v4 |6 V4 R# `/ q$ IwenzildeiMac:~ wenzil$ export EDITOR=/usr/bin/vimwenzildeiMac:~ wenzil$ ipfs config edit 8 O% D: s: z: c9 U+ R
5 C; G. ~' @' M( V) _) c
8 z7 v3 F- L+ p, Q+ @. z" e2 S6 Q( q" P修改IPFS默认存储空间+ N- {. C8 d* O' I
, s4 y+ B* t3 u" K. t& j - 启动和同步节点服务器
9 D) x4 R" y' d' ?# ~执行"ipfs daemon"命令,可以同步节点数据到IPFS网络。, l0 L4 B; f7 K1 b: g3 D6 q. A
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' c# T7 m8 }- v
4、IPFS运行体验- IPFS查看ReadMe: v2 `' S; c" j+ `) z) R& {
可以回去查看执行"ipfs init"命令的时候,返回的内容。打开一个新的终端,操作如下:
0 t. z7 O8 z5 s* O1 CwenzildeiMac:~ 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管理界面# J {8 \1 S3 A7 h( M
IPFS节点服务器启动后,可以用浏览器访问:http://localhost:5001/webui
2 Q9 x9 W4 [. d( l* q0 V有本地配置、节点连接、本地节点文件等信息,如图:
' v' s- s, m- |: U1 y& e3 J4 G
+ G/ u! ?* @& A% D+ V1 Y' |2 k: U9 j
* n$ w# D3 ]$ Q9 I/ X1 _% E5 R( v0 @* _3 ^6 b( y" R
IPFS的Web管理界面
# i1 ]5 u7 a( Q2 h5 z+ u ^. h2 e! t5 [+ [+ k6 H) a+ N
9 O1 `' _$ y" p" D+ M7 V; n9 q& g' u/ R8 `$ X4 T3 _( t
5、设置跨域资源共享当我们在前端通过js接口操作ipfs时,会遇到跨域资源访问问题,可以在终端执行以下配置来解决:
. U; A3 b- E1 R; qipfs 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 b' T( ]/ n( G. c; [) FwenzildeiMac:ifps_test wenzil$ vi test.txtwenzildeiMac:ifps_test wenzil$ cat test.txt IPFS测试文件 - 添加文件到IPFS节点5 z1 \4 F# |! x* t8 r) e. B- L
wenzildeiMac:ifps_test wenzil$ ipfs add test.txt added QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab test.txt添加文件到IPFS节点后,返回了文件的哈希值2 A* O1 Y# w u1 D& |. [; n
- 查看IPFS节点的文件
# i" ~1 T& I% d$ U( {" ywenzildeiMac:ifps_test wenzil$ ipfs cat QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbIPFS测试文件注意:此时的文件只是添加到了本地的IPFS节点,读取的是本地数据,可以通过如下网址查看。
: o: N' {8 A% M# M+ y7 x/ Mhttp://localhost:8080/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab# o. J7 A3 s( P, m
通过"ipfs daemon"命令启动节点服务器,会将本地节点文件同步到外网,同步成功后,这时就可以访问如下网址来查看(如果访问失败,试着翻墙看看)。
- f/ E" x4 i% ihttps://ipfs.io/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab/ Y+ [: q% A+ a
0 w7 R: k5 {1 c! A6 O4 U9 h9 O& X
) Z8 z1 L- N! s7 \1 i9 ^7 N p$ S b- w0 b
查看IPFS文件内容- t: d6 x% x: a5 m: E) }
4 m* @4 [* |7 ~2 N6 `! y0 o, |如果访问成功的话,说明已经存储到IPFS网络中。目前IPFS网络暂未加入代币Filecoin机制,所以存储读取文件免费,速度也比较慢。" V" E- Z; I* M6 j8 G* w
- 下载IPFS节点的文件
7 `' ^/ \0 ?: g! }wenzildeiMac:ifps_test wenzil$ ipfs get QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbSaving file(s) to QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab 25 B / 25 B [========================================================] 100.00% 0s查看当前目录,发现多了一个"QmSV..."的文件": X. Z: s" D9 k7 f- w, ?7 D
1 d( E. ?: U/ O* T) l9 O0 p1 V0 T+ `
" }: ?! U8 U# m/ D9 o3 U' C, o X
; Q8 j+ J: f- }% S/ s y* \: D
; |0 h% N' j. v7 J, \! y下载IPFS节点的文件
, U: k/ H+ h& s/ q# K4 a$ j( g
" h6 Q% E4 m7 x3 U$ w/ I: O
7 d j8 f) C) d 6.2 创建文件夹存储文件- ipfs命令新建文件夹
* w N8 S' U( l4 TwenzildeiMac: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 /文件夹名"可以删除文件夹。) `1 b: l3 [; C3 K Z
& s" U% m; u$ M; a+ {: F6 T 6.3 IPFS上传文件夹- ipfs命令添加文件夹
2 k- A+ x' p9 v) e3 i/ h先在本地创建一个文件夹和对应文件,如图:
) K* k- J/ T% _3 Y; f9 J7 E1 W8 K" |: q" X( g0 o) L9 y
& G$ b$ A) w0 `0 e8 I
: @$ |$ F5 W- R0 R" S% l
g- ~- i9 ?' a9 U0 ]! M. g. @
本地创建文件夹及文件
0 [% O+ S0 o, F5 S7 v i) x5 U/ J$ v% I4 G7 U" X
然后通过"ipfs add -r 文件夹"命令添加整个文件夹
/ d! I' ]2 W) n2 {+ e 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$ - 查看文件夹的文件内容+ o4 [# P/ K1 K+ F. f
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对应文件夹. g) h, u" W; w4 N8 R
访问文件夹对应的IPFS地址:
- n! c" Y( [; y/ [" [2 t Yhttps://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj# O6 S b# J9 s% _9 O
第一次访问的时候,需要同步数据到IPFS网络,等待时间有点久,慢到让你以为同步失败了。
! Y, u. d) X% ]+ {
. k# t/ D% G6 G6 p/ |3 r4 X
/ u) v- x7 V2 x3 m6 P1 W2 c' \
* a$ \- H5 x9 ]9 {) \4 P9 J- e1 g3 }
查看IPFS对应文件夹3 p- `& b7 s8 ~' X8 u
4 X$ b8 ]9 T* v8 X$ M% W! k访问文件夹对应的文件,如看到图片文件,访问ipfs网关:
6 c) M9 z6 D5 j( S2 D# Uhttps://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj/portrait.jpeg9 g% Z0 D% J0 C" ^4 z
- q+ g6 V' G/ u7 l* N& {: p+ B
6 _+ j @$ d6 B {' D8 N4 }
+ a/ T7 T' K6 w查看IPFS文件夹对应文件3 c+ W j& ~& b0 T O$ q% ]
! |- l' O/ q: g* Q% J* L# s/ G
或者通过文件的Hash来访问,如访问txt文件的地址:
; y; j, G* a, }2 h% Uhttps://ipfs.io/ipfs/QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQvT. o9 M" t# L+ @/ ]
: E6 X( g1 t: V6 V! o
, r7 b% }2 e- k8 ]2 b6 w; a8 V- m
}* F7 m! x" L# w: \. Q7 _
通过文件Hash访问查看
; s. M) a2 H# K0 y. M0 e
" D! X F" i( L) A0 q8 I
p# S' @; n" c8 A* _ H 6.4 添加简单网页到IPFS节点- 网页效果和项目结构
2 ]- r; \2 K$ A% m- a3 M( U实现一个简单的实时显示系统当前时间的网页,效果如图:' F$ Q. a' I: `) X3 n% h: a$ F+ ~2 {
B j5 ?5 p. g/ b' r, G' {
& J; c) T$ | i+ J. h& E& q% |! }- v
" c8 x& B( [: ]3 f# E8 X/ W/ ]
1 e7 B5 {7 [8 ~IPFS添加简单网页
* D- O9 v6 W1 h1 S! N b
0 ]/ U0 j6 ?0 j' W2 ?# a# v2 j工程结构如图:. y2 r5 {, N" ] H- ~- ]( @
- G& l) r% K1 m" ^6 ^- P, K9 n# |5 B! S+ J
6 G2 A, F9 Q8 j+ S
4 I; j9 C, ?/ K6 {6 A% k# i! V. p
网页工程结构
. L/ I( f( t; b# u1 l0 c& c: C% u/ T4 a2 z: t4 Y* E1 L4 R
" T9 Q0 v6 p4 M1 u" r
实现代码比较简单,这里就不贴代码了。2 X8 I. n$ g. F6 Z. I
- ipfs命令添加文件夹8 L# P; g7 Y# D5 S l1 x j
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( a# A7 a: C% ^7 lwenzildeiMac:~ 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: F+ K; [* w3 n
浏览器访问ipfs网关:1 [& S. s/ ^' [
https://ipfs.io/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD/
% D6 C1 q7 F; e; U- a& j( k3 \- ]. U# q g0 y8 K
, S+ ~% z, d4 G$ v4 M
1 r, ?; N/ @5 j( K F. B+ ~查看IPFS对应网页
6 y! ^- f8 d+ b& b: ~, N# D& f
5 N( j- w4 b, W9 t; k6 p0 s6 k1 g" a, a3 n, }8 M6 x6 n
6.5 IPNS绑定节点名- IPNS绑定节点操作
( d" W% N8 o2 J: j" \% Z每次修改文件内容后,文件的哈希值就会发生变化。对于网站而言,发布后可能还需要做修改,这时需要IPNS绑定节点名。每次更新网站内容后,重新publish一次更新发布到IPNS即可。
* b& B- {& y. K刚才的html根目录的哈希值是QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD,操作如下:. j8 q4 f/ S$ Q0 w) u9 @
wenzildeiMac:study wenzil$ ipfs name publish QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDDPublished to QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz: /ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD - 查看当前节点
9 M' P( G) t& ^3 hwenzildeiMac: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"( _8 l7 ]6 m8 \! J( h
- 验证节点: R7 `5 O S+ k4 w2 W6 Y
命令为:"ipfs name resolve 节点ID“
7 T& r& s; V' A8 t! F% o* [wenzildeiMac:study wenzil$ ipfs name resolve QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD - 访问IPNS对应文件* U4 A3 ]$ E% K. m% t
浏览器访问ipfs网关:+ c9 Q; t- W9 t# h# R
https://ipfs.io/ipns/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/
( b9 ~9 c: |6 g0 j& J7 f
6 J! L. s% [* G: F8 W
" B2 a0 o3 o# R. k# k# V+ M
$ q4 w/ |0 k: K! A
P- w7 I& C$ M* x9 J' |# q查看IPNS对应网页 e$ d. E* O; e* ~& [5 T. n
( X3 O- N; R* [& E) R
7、IPFS与以太坊DApp开发实战- IPFS与以太坊DApp结合的好处
4 F& w# ~ a3 E/ P9 K在以太坊平台上,往区块链写入数据需要花费以太币,调用智能合约执行每一行代码的时候,都需要一定量的gas交易费。区块链存储大数据成本很高,而且不合理。
; j6 Q/ X$ P% ]0 M" f% U6 [9 L; d可以先将文件存储到IPFS,然后得到文件的Hash存储到以太坊区块链中。读取文件的时候,从以太坊区块链中获取文件的Hash,再通过Hash来读取IPFS网络上的文件。
% S- Z/ W0 \0 D7 [使用官方提供的ipfs-api,可以很方便地在代码中操作节点将数据上传到IPFS,或者通过Hash从IPFS读取数据。4 r z0 I" w3 v3 e& d' T4 ~) x
Truffle框架提供了快速搭建包含以太坊智能合约的React项目,可以通过"truffle unbox react"创建工程,然后安装ipfs-api依赖库。于是,可以在前端方便地调用IPFS的接口来读取、上传文件。
+ H0 T$ d) b6 s. ` x, C2 vtruffle unbox react官网:
0 F5 `$ q; I$ x6 }- I1 C1 L- fhttp://truffleframework.com/boxes/react
3 a. A4 V9 X; F4 u2 m0 S. o - IPFS与DApp开发实战
- N0 u- k* E. c9 ]" P话不多说,开始进入实战开发。7 T* ]* L3 o3 P) L
7.1 安装Truffle unbox react新建一个空目录"ipfs_dapp",然后执行安装命令4 Q6 A+ h0 C: g: |: e
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",修改后完整代码:: x: J/ C; S' f* y$ ^
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"
6 s3 q2 n2 S* m+ 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"进行智能合约的部署
$ ~2 L( F! v! j% v. k. M8 H# G) w, s0 B
7 o) b2 {% r- b0 l9 Q
7 b b U& @ ]$ P# ^: q2 nRemix-IDE部署智能合约3 t9 b3 i1 a3 c# t# N
" c5 c5 [4 g, D: _5 \, ^, E
& e2 Z1 P& R- C/ A2 U# l; S
; B, \, [: C9 U
0 B" |- n" l5 g& D$ HRemix-IDE部署智能合约-确认. l) P* C. F$ S/ d( z5 j+ e
: a8 s0 w2 F: O3 }! S3 F! @! I
然后复制智能合约地址,App.js文件中会用到合约地址为:"0xb177d6cf6916f128c9931e610c63208d9c5a40f3"+ D& m# b8 M% {( v" d! _
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"命令,结果如图:- r; h" B7 e$ X3 u3 |- l# K
5 p$ r$ G- m6 C9 X! T C
+ X) T- S' L$ J' x; Lnpm_start
+ @ X* l* T$ |7 y4 m O7 O& d. U& ^( P- [
会自动打开网页,然后上传一张本地图片,之后点击"图片哈希写入区块链"按钮
; W2 S. x1 j1 d: m3 p
$ Y0 U9 G# S4 A5 T! l5 F
9 R$ g/ j2 ^. E( a1 H/ V7 x6 g9 t. w+ U) Q8 W
运行结果1
9 }- E6 z" D6 m$ o p% D. k% W- N+ ]4 i! I* f! U- w: @
最终效果如图:4 I: x& m+ M8 T C
5 y! ~6 m! m- e" M6 B" ^
* W7 f3 p+ h+ h. D7 g: p, y
! c; k; q4 s5 N
! D' F. c) \+ Q o) y; s运行结果
" \$ b y4 o( R! Q; I
* u# t/ z; O8 _访问IPFS网关:
0 x0 t+ a/ `0 Y! |4 Y$ zhttps://ipfs.io/ipfs/QmbHptfJfyuGAZxstFYgAVfz33cytR1seTD3ZabBSDd8997 [! ]' c+ M7 u) b4 ?* X! c
发现图片已经成功写入IPFS,如图:
4 y. l+ k3 J. h: T( q/ ~2 }
9 @/ u4 a1 q- y6 k* _( q3 x6 ~& \7 U
9 y7 T# O' k5 A* f) F0 P* A4 j! E) O g1 R
运行结果37 S/ }- N# D0 O! d L c; R
( i, L7 d( U7 {0 p( P: [$ G9 o
备注:本地IPFS网关端口默认为8080,我的电脑上端口冲突了,系统自动修改为8082。1 @" m- p9 H3 E- C) l( P; P6 E
搞定,收工。. H1 w6 X% K3 y5 b! U# ]; Y
PS:刚入坑的小白,很多不懂,还请各位大佬多赐教,谢谢!
" { r" A2 m# o$ ^2 n s1 @1 a# \1 Y2 L
|
|