7-1、2、3 IPFS介绍使用及浏览器交互(react+区块链实战)

avatar
作者
猴君
阅读量:0

7-1、2、3 IPFS介绍使用及浏览器交互(react+区块链实战)

7-1 ipfs介绍

IPFS区块链上的文件系统

https://ipfs.io/

这个网站本身是需要科学上网的

Ipfs是点对点的分布式系统

无限大的全球分布式的百度云盘

在这里储存我们的图片和视频

Ipfs上传文件后,会保留此文件的哈希值,整个文件会被打散
全球分布在各个地方

不会丢失

可以看其官网
在这里插入图片描述

Ipfs整个系统在github开源的

Ipfs的理想是取代http

一行访问未来是ipfs://

有了ipfs网络后,会将文件存储到本地挂载的一个节点
在这里插入图片描述

在github开源了

Js-ipfs是ipfs的nodejs实现

在这里插入图片描述

直接安装到全局(ipfs 的nodejs实现)
npm install ipfs -g

在这里插入图片描述

安装完后
启动jsipfs

在这里插入图片描述

Ipfs项目主目录中的js-ipfs

新建一个learn-ipfs目录,再建个html
在这里插入图片描述

内容如上

Jsipfs init
Jsipfs add index.html

完成后在
使用ipfs将html加入

在这里插入图片描述

added QmbFMke1KXqnYyBBWxB74N4c5SBnJMVAiMNRcGu6x1AwQH index.html
中间的值是哈希值

全球有N个ipfs的节点,每个节点都有ipfs的小碎片,本地获取的哈希值,来获取内容

Jsipfs add

如何查看(后面跟着哈希即可)
jsipfs cat QmPAaKh7zNeYyGbVfvP9QqbRXh2a5Jz6vz57RSLuVQ3zEg
在这里插入图片描述

就从ipfs网络上将其读取

我们也可以尝试着在公网上找我们的文件
格式如下(只有记住哈希值文件就永远不会丢)
https://ipfs.io/ipfs/QmPAaKh7zNeYyGbVfvP9QqbRXh2a5Jz6vz57RSLuVQ3zEg

现在是访问不到的,因为添加完后没有进行同步

需要执行同步到公网的操作
jsipfs daemon
如下本地网络同步完成

在这里插入图片描述

https://blog.csdn.net/weixin_30852451/article/details/96953573
关于IPFS官网ipfs.io无法访问的解决办法
https://ipfsdrop.com/practice/cloudflare-goes-interplanetary-introducing-cloudflares-ipfs-gateway/
IPFS快速入门 | 通过Cloudflare直接从浏览器访问IPFS文件
如何访问ipfs的官网
https://blog.csdn.net/weixin_30852451/article/details/96953573
209.94.90.1 ipfs.io
有时ip不是上需要查询https://www.ipaddress.com/
更改hosts文件
注意不关机重启的话要刷新DNS在cmd下
ipconfig /flushdns

上方的步骤完全可行的,访问能成功

下方的示例在7-5成功执行

https://ipfs.io/ipfs/QmYkMuFZj7tyHFJRVe7ucqMNYGEiSXrjKdudm2mu7UD7er
在这里插入图片描述

7-2 IPFS-desktop使用

将之前的上传的一个图片打开
https://ipfs.io/ipfs/QmSM1YwAo77Gt64ca16pBxQBXZ5V7Q4cfxQEvBBJXDv8hC
在这里插入图片描述

视频中的浏览器可以访问,可能是需要翻墙才能看到

文件存到哪里了,谁在存,有什么激励机制
发展过程后

现在是存储免费的,后续可能类似比特币的奖励机制,或者贡献部分硬盘带宽来进行

这是命令行的操作

若觉得操作繁琐
可以在github使用ipfs-desktop

桌面

此ipfs-desktop和之前的命令行是一一对应的,此处是以可视化的形式展现的

解决github下载缓慢的问题如下
https://www.jianshu.com/p/0493dcc15d6f

140.82.113.3 github.com
199.232.69.194 github.global.ssl.fastly.net

安装ipfsdesk之后如下
在这里插入图片描述

既然已经进入了ipfs就需要有存储和共享文件的责任
在这里插入图片描述

我们可以直接上传文件使用界面化的ipfs

节点与自己通信的节点
在这里插入图片描述

任何文件都是存在全球的CDN之上,可以加速访问节点内容

在文件可以上传本地文件

Js调用配置文件
在这里插入图片描述

这里是手动拖上去上传文件的

下面如何在js中手动拖拽上传文件

7-3 react+ipfs-api浏览器和ipfs交互

Ipfs在命令行的上传同步文件等

可以发网站,文件夹静态文件管理

此节课堂主要任务就是浏览器和ipfs的交互

Js-ipfs-api(github上,官方提供)进行上传内容,使用react搭建简单网络
在这里插入图片描述

能上传一个小文件到ipfs之上,拿到其哈希值,并通过哈希获取文件内容

Npm install -g create-react-app
之前已经安装过了就不用了

直接执行创建一个react项目
create-react-app ipfs-demo

创建完成

在这里插入图片描述

Cd ipfs-demo

Npm start 启动此react项目

主要在其App.js更改代码
在这里插入图片描述

http://localhost:3000/

在浏览器可以看到

将ipfs-api安装在创建的react项目下,而不是全局变量
npm install ipfs-api --save

在这里插入图片描述

在这里插入图片描述

在react就可以直接使用此内容了


在这里插入图片描述
在这里插入图片描述

上方有错误App.css应该导入

代码不够全,如下

import React,{Component} from 'react'; import './App.css';  class App extends Component {  	constructor(props){ 		super(propos) 			//状态,上传内容,上传后的哈希 		this.state = { 			content:'' 			hash:'' 		} 		//绑定按钮(否则会this穿透) 		this.handleClick = this.handleClick.bind(this) 		//this.handleReadClick = this.handleReadClick.bind(this) 若不想绑定可以使用下方的箭头函数,两种方式 	} 	 	handleClick(){ 	 	}  	handleReadClick(){ 	 	}   	render(){ 		return( 			<div className='App'> 				<input type="text"/> 				<button onClick={this.handleClick}>提交数据到ipfs</button> 				<hr/> 				<p> 					{this.state.hash} 				</p> 				<button onClick={()=>this.handleReadClick()}>从ipfs读取数据</button> 				<p> 					{this.state.content} 				</p> 			</div> 		); 	 	} } export default App 

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!