ipfs-api訪問IPFS(星際文件系統)

時間 2019-12-05

標籤 ipfs api 訪問星際文件系統简体版

原文原文鏈接

經過node.js和ipfs-api咱們能夠訪問IPFS(星際文件系統)。html

2、ipfs-api安裝與使用

星際文件系統Ipfs節點提供和REST API接口，可供咱們在程序代碼中操做節點進行文件的上傳等操做。不過大多數狀況下，咱們並不須要直接操做這個REST開發接口，而是使用通過封裝的更友好的ipfs-api，一個nodejs包。前端

2.1安裝nodejs

到官網下載nodejs安裝包：32位，64位。下載後雙擊進行安裝便可。node

開一個控制檯窗口，測試：python

C:\Users\hubwiz> node -v
V8.11.1

2.2安裝ipfs-api

Ipfs-api的安裝須要git命令行，所以咱們先安裝git。從官網下載git安裝包：32位，64位。下載後雙擊安裝便可。linux

執行git命令測試：webpack

D:\test-ipfs-api> git version
git version 2.16.2.windows.1

ipfs-api須要編譯原生node模塊，所以須要安裝VisualStudio 2015和python27。git

官網下載VisualStudio 2015社區版，雙擊安裝便可。官網下載Python27安裝包，雙擊安裝並設置PATH環境變量使python可用。github

從新開一個控制檯，使環境變量生效。如今安裝ipfs-api：web

D:\test-ipfs-api> npm install ipfs-api
+ ipfs-api@20.0.1
added 1 package, updated 1 package and moved 1 package in 22.138s

2.3測試代碼 – nodejs

在D:\test-ipfs-api目錄下建立一個測試腳本test.js：npm

const ipfsAPI = require('ipfs-api')
const ipfs = ipfsAPI('localhost', '5001', {protocol: 'http'})
const buffer = Buffer.from('this is a demo')
ipfs.add(buffer)
    .then( rsp => console.log(rsp[0].hash))
.catch(err => console.error(err))

執行這個腳本：

D:\test-ipfs-api> node test.js
QmfQS4vm9YZTAyGZEkDqm81xripwsK3NgqfNkbCdoeEw5i

也就是說，咱們將內容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：

http://127.0.0.1:8080/ipfs/QmfQS4vm9YZTAyGZEkDqm81xripwsK3NgqfNkbCdoeEw5i

一樣能夠看到咱們以前上傳的內容。注意：須要首先啓動監聽器（ipfs daemon）而且你的瀏覽器和ipfs節點在同一臺計算機。 ?

3、在瀏覽器中訪問ipfs

ipfs-api也支持在browser使用。最簡單的方法是使用專門針對瀏覽器的封裝庫，在html中引用便可：

<script src="https://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 id="content">THIS IS ANOTHER DEMO</textarea>
  <button id="upload">Upload</button>
  <script src="./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 ...

如今打開你的瀏覽器，訪問http://127.0.0.1:8000/，一切順利的話，你能夠看到一個文本框和一個按鈕，點擊按鈕，便可將文本框的內容上傳到ipfs節點。

推薦兩個以太坊相關的實戰教程：

區塊鏈初學者：以太坊 DApp 實戰開發入門
區塊鏈開發進階：去中心化以太坊 DApp 電商平臺實戰開發

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。