IPFS星际文件系统 (2)

也就是说,我们将内容this is a demo添加到本地仓库后,得到哈希值
QmfQS4vm9YZTAyGZEkDqm81xripwsK3NgqfNkbCdoeEw5i。现在可以使用cat子命令来查看这个哈希值对应的内容:

D:\test-ipfs-api> ipfs cat QmfQS4vm9YZTAyGZEkDqm81xripwsK3NgqfNkbCdoeEw5i

控制台会输出我们之前上传的内容:

this is a demo

ipfs进入监听状态后,提供了一个http网关,让我们可以使用浏览器来访问ipfs上的内容。网关默认在本机(127.0.0.1)的8080端口监听,因此使用你的浏览器访问这个URL:

:8080/ipfs/QmfQS4vm9YZTAyGZEkDqm81xripwsK3NgqfNkbCdoeEw5i

同样可以看到我们之前上传的内容。
注意:需要首先启动监听器(ipfs daemon)并且你的浏览器和ipfs节点在同一台计算机。
?

三、在浏览器中访问ipfs

ipfs-api也支持在browser使用。最简单的方法是使用专门针对浏览器的封装库,在html中引用即可:

<script src="http://unpkg.com/ipfs-api/dist/index.js"></script>

这个特别封装的库会创建一个全局对象ipfsAPI,我们在浏览器脚本中可以直接使用,例如:

var ipfs = window.IpfsApi('localhost', '5001')

这种方法比较简单,因此下文不再描述。接下来我们将使用更加工程化的方法,
采用webpack来直接在前端脚本中使用ipfs-api的nodejs包。

3.1 HTML页面

在D:\test-ipfs-api目录下创建index.html:

<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <textarea>THIS IS ANOTHER DEMO</textarea> <button>Upload</button> <script src="http://www.likecs.com/bundle.js"></script> </body> </html>

我们的目标是,当点击按钮时,我们将文本框的内容上传到ipfs

3.2前端脚本

在D:\test-ipfs-api目录下编写脚本app.js:

import ipfsAPI from 'ipfs-api' const ipfs = ipfsAPI('localhost', '5001', {protocol: 'http'}) window.addEventListener('load', function() { let btn = document.querySelector('#upload') let txt = document.querySelector('#content') btn.addEventListener('click',()=>{ let buffer = Buffer.from(txt.value, 'utf-8'); ipfs.add(buffer) .then( rsp => console.log(rsp[0].hash)) .catch(err => console.error(err)) }) }) 3.3 webpack配置

在D:\test-ipfs-api目录下编写配置文件webpack.config.js:

const webpack = require('webpack'); const path = require('path'); const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { entry: './app.js', output: { path: path.resolve(__dirname), filename: 'bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['es2015'], plugins: ['transform-runtime'] } } ] } } 3.4前端脚本打包

执行webpack打包:

D:\test-ipfs-api> webpack 3.5 配置ipfs的CORS策略

由于需要从网页中访问ipfs节点,这就引入了跨域安全问题,因此我们需要配置ipfs节点使其允许跨域请求:

D:\>ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["*"]' 3.6 配置ipfs的API监听地址

由于ipfs节点默认在本机(127.0.0.1)的5001端口监听API请求,因此如果你的浏览器和ipfs节点不在同一台机器上,需要让ipfs节点监听公开地址:

D:\> ipfs config --json Addresses.API '"/ip4/0.0.0.0/tcp/5001"'

当然,如果你的浏览器和ipfs节点在同一台机器上,就不需要进行这个配置了。

3.7配置ipfs的网关的监听地址

由于ipfs节点旳http网关默认在本机(127.0.0.1)的8080端口监听http请求,因此如果你的浏览器和ipfs节点不在同一台机器上,就需要让ipfs网关监听公开地址:

D:\> ipfs config --json Addresses.Gateway '"/ip4/0.0.0.0/tcp/8080"' 3.8测试网页

首先启动ipfs监听:

D:\>ipfs daemon

然后在测试目录下启动web服务器,这里使用python内置的简单服务器,当然你可以使用任何熟悉的web服务器:

D:\test-ipfs-api> python –m SimpleHTTPServer Serving HTTP on 0.0.0.0 port 8000 ...

现在打开你的浏览器,访问:8000/,一切顺利的话,你可以看到一个文本框和一个按钮,点击按钮,即可将文本框的内容上传到ipfs节点。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfgzj.html