title: ipfs使用
date: "2019-09-26 10:17:16"
tags: ipfs
categories: 技术驿站
1.mac安装ipfs——使用npm工具
sudo npm install ipfs --global
2.本地上传文件并同步网络
touch index.htmlvim index.html初始化过程，生成本地节点
ipfs init
- 保存在本地ipfs
ipfs add index.html
- 同步到网络中
ipfs daemon
3.ipfs项目
- ipfs-desktop
https://github.com/ipfs-shipyard/ipfs-desktop
4. ipfs后台界面
5.与浏览器交互
npm install -g create-react-appcreate-react-app ipfs-demo进入ipfs-demo文件夹，安装ipfsjs模块
npm install ipfs-api --saveipfs-api改名字了，改成ipfs-http-client了会发现package.json文件依赖会多出ipfs-api
- 解决跨域，端口不一致问题
ipfs 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"]'
使用ipfs config show就会看到config配置多出了API配置：
运行react项目
npm start修改App.js文件内容——（react必学）
import React, { Component } from 'react';
import './App.css'; class App extends Component { constructor(props) {
super(props);
this.state = {
strHash: null,
strContent: null
}
} render() {
return (
<div className="App">
<input
ref="ipfsContent"
/>
<button onClick={() => {
let ipfsContent = this.refs.ipfsContent.value;
console.log(ipfsContent);
}}>提交到IPFS</button> <p>{this.state.strHash}</p> <button onClick={() => {
console.log('从ipfs读取数据。')
}}>读取数据</button>
<h1>{this.state.strContent}</h1>
</div>
);
}
} export default App;
当我们在输入框中输入一个字符串时，点击
提交到IPFS按钮，将文本框中的内容取出来打印，之后我们将这个数据上传到IPFS。点击读取数据按钮，我们也只是随便打印了一个字符串，后面需要从IPFS读取数据，然后将读取的数据存储到状态机变量strContent中并且展示出来。导入ipfs模块并使用
const ipfsAPI = require('ipfs-api');
const ipfs = ipfsAPI({host: 'localhost', port: '5001', protocol: 'http'});
编写上传大文本字符串到IPFS的Promise函数
saveTextBlobOnIpfs = (blob) => {
return new Promise(function(resolve, reject) {
const descBuffer = Buffer.from(blob, 'utf-8');
ipfs.add(descBuffer).then((response) => {
console.log(response)
resolve(response[0].hash);
}).catch((err) => {
console.error(err)
reject(err);
})
})
}
response[0].hash返回的是数据上传到IPFS后返回的HASH字符串。上传数据到IPFS
this.saveTextBlobOnIpfs(ipfsContent).then((hash) => {
console.log(hash);
this.setState({strHash: hash});
});
ipfsContent是从文本框中取到的数据，调用this.saveTextBlobOnIpfs方法将数据上传后，会返回字符串hash，并且将hash存储到状态机变量strHash中。提交数据的完整代码
import React, {Component} from 'react';
import './App.css'; const ipfsAPI = require('ipfs-api');
const ipfs = ipfsAPI({host: 'localhost', port: '5001', protocol: 'http'}); class App extends Component { constructor(props) {
super(props);
this.state = {
strHash: null,
strContent: null
}
} saveTextBlobOnIpfs = (blob) => {
return new Promise(function(resolve, reject) {
const descBuffer = Buffer.from(blob, 'utf-8');
ipfs.add(descBuffer).then((response) => {
console.log(response)
resolve(response[0].hash);
}).catch((err) => {
console.error(err)
reject(err);
})
})
} render() {
return (<div className="App">
<input ref="ipfsContent" />
<button onClick={() => {
let ipfsContent = this.refs.ipfsContent.value;
console.log(ipfsContent);
this.saveTextBlobOnIpfs(ipfsContent).then((hash) => {
console.log(hash);
this.setState({strHash: hash});
});
}}>提交到IPFS</button> <p>{this.state.strHash}</p> <button onClick={() => {
console.log('从ipfs读取数据。')
}}>读取数据</button>
<h1>{this.state.strContent}</h1>
</div>);
}
} export default App;
刷新网页看后台数据
从ipfs读取数据
ipfs.cat(this.state.strHash).then((stream) => {
console.log(stream);
let strContent = Utf8ArrayToStr(stream);
console.log(strContent);
this.setState({strContent: strContent});
});
stream为Uint8Array类型的数据，下面的方法是将Uint8Array转换为string字符串。
function Utf8ArrayToStr(array) {
var out, i, len, c;
var char2, char3;
out = "";
len = array.length;
i = 0;
while(i < len) {
c = array[i++];
switch(c >> 4)
{
case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
// 0xxxxxxx
out += String.fromCharCode(c);
break;
case 12: case 13:
// 110x xxxx 10xx xxxx
char2 = array[i++];
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
char2 = array[i++];
char3 = array[i++];
out += String.fromCharCode(((c & 0x0F) << 12) |
((char2 & 0x3F) << 6) |
((char3 & 0x3F) << 0));
break;
default:
break;
}
}
return out;
}
- 完整源码
import React, {Component} from 'react';
import './App.css';
const ipfsAPI = require('ipfs-api');
const ipfs = ipfsAPI({host: 'localhost', port: '5001', protocol: 'http'});
function Utf8ArrayToStr(array) {
var out,
I,
len,
c;
var char2,
char3;
out = "";
len = array.length;
i = 0;
while (i < len) {
c = array[i++];
switch (c >> 4) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
// 0xxxxxxx
out += String.fromCharCode(c);
break;
case 12:
case 13:
// 110x xxxx 10xx xxxx
char2 = array[i++];
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
char2 = array[i++];
char3 = array[i++];
out += String.fromCharCode(((c & 0x0F) << 12) | ((char2 & 0x3F) << 6) | ((char3 & 0x3F) << 0));
break;
default:
break;
}
}
return out;
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
strHash: null,
strContent: null
}
}
saveTextBlobOnIpfs = (blob) => {
return new Promise(function(resolve, reject) {
const descBuffer = Buffer.from(blob, 'utf-8');
ipfs.add(descBuffer).then((response) => {
console.log(response)
resolve(response[0].hash);
}).catch((err) => {
console.error(err)
reject(err);
})
})
}
render() {
return (<div className="App">
<input ref="ipfsContent" />
<button onClick={() => {
let ipfsContent = this.refs.ipfsContent.value;
console.log(ipfsContent);
this.saveTextBlobOnIpfs(ipfsContent).then((hash) => {
console.log(hash);
this.setState({strHash: hash});
});
}}>提交到IPFS</button>
<p>{this.state.strHash}</p>
<button onClick={() => {
console.log('从ipfs读取数据。')
ipfs.cat(this.state.strHash).then((stream) => {
console.log(stream);
let strContent = Utf8ArrayToStr(stream);
console.log(strContent);
this.setState({strContent: strContent});
});
}}>读取数据</button>
<h1>{this.state.strContent}</h1>
</div>);
}
}
export default App;
- 预览结果