本文我們將通過React這個js前端框架來實現一個簡易的頁面，通過官方提供的js-ipfs-api，我們可以在頁面的文字框中輸入任意文字，然後提交上傳到IPFS節點網路中，再利用hash引數把上傳的文字資料顯示出來。

React簡介及安裝

React是由Facebook和Instagram來開發的一種用來建立使用者介面的JavaScript庫。

首先你要保證電腦上已經安裝了Node.js的最近版本，然後可以根據安裝教程來建立新專案。

npm install -g create-react-app

[email protected]-sily:~$ npm install -g
 
 create-react-app
/home/sily/.nvm/nvm/versions/node/v9.3.0/bin/create-react-app -> /home/sily/.nvm/nvm/versions/node/v9.3.0/lib/node_modules/create-react-app/index.js
+ create-react-app@1.5.2
added 114 packages in 26.067s
[email protected]-sily:~$ create-react-app --version
1.5.2

React專案建立

[email protected]
 
-sily:~$ create-react-app ipfs-demo

Creating a new React app in /home/sily/ipfs-demo.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...


> uglifyjs-webpack-plugin@0.4.6 postinstall /home/sily/ipfs-demo/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.
 
js

+ react-scripts@1.1.1
+ [email protected]16.2.0
+ react-dom@16.2.0
added 1155 packages in 131.72s

Success! Created ipfs-demo at /home/sily/ipfs-demo
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd ipfs-demo
  npm start

Happy hacking!

在專案根目錄輸入npm start命令，檢視專案在瀏覽器的顯示效果：

安裝js-ipfs-api

npm install --save ipfs-api

安裝成功會在專案node_modules目錄下多出ipfs-api資料夾，在package.json下增加依賴包資訊：

新增UI邏輯

修改src/App.js裡面的程式碼，主要是render()中的頁面佈局:

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"
            style=/>
          <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 = 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中。

跨域資源共享CORS配置

跨域資源共享(CORS)配置，依次在終端執行以下程式碼：

$ 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"]'

用正確的埠執行daemon

$ ipfs config Addresses.API
/ip4/127.0.0.1/tcp/5001
$ ipfs config Addresses.API /ip4/127.0.0.1/tcp/5001
$ ipfs daemon

從IPFS讀取資料

ipfs.cat(this.state.strHash).then((stream) => {
    console.log(stream);
    let strContent = Utf8ArrayToStr(stream);
    console.log(strContent);
    this.setState({strContent: strContent});
});

編寫Utf8ArrayToStr()方法將Uint8Array型別的stream變數轉換成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;
}

最終完整的App.js程式碼如下：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const ipfsAPI = require('ipfs-api');
const ipfs = ipfsAPI({host:'localhost', port:'5001', protocal:'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"
          style={{width:200,height:30}}/>
        <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>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

執行效果測試

參考