javascript - Cómo ejecutar IPFS con el programa de demostración Embark framework

cors

Question

Soy bastante nuevo en blockchains, he aprendido de varias fuentes que podemos usar el framework embark junto con IPFS para crear un DApp.

Empecé ejecutando todas las instrucciones de la página embarcar github

Ejecuté el siguiente comando para crear la demostración de toda la funcionalidad

$ embark demo
$ cd embark_demo

luego ejecutando el simulador embark

$ embark simulator

todo funciona bien, incluso la página localhost funciona, y puedo obtener y establecer valores int. Blockchains con Embark

Sin embargo, no puedo usar la pestaña IPFS de la página? Da el siguiente error: "El nodo que está utilizando no es compatible con IPFS. Asegúrese de que CORS esté configurado para el nodo IPFS".

Sin embargo, he ejecutado correctamente el Daemon IPFS correctamente

También he descomentado esta línea del archivo index.js

EmbarkJS.Storage.setProvider(''ipfs'',{server: ''localhost'', port: ''5001''})

Index.js

/*globals $, SimpleStorage, document*/

var addToLog = function(id, txt) {
  $(id + " .logs").append("<br>" + txt);
};

// ===========================
// Blockchain example
// ===========================
$(document).ready(function() {

  $("#blockchain button.set").click(function() {
    var value = parseInt($("#blockchain input.text").val(), 10);
    SimpleStorage.set(value);
    addToLog("#blockchain", "SimpleStorage.set(" + value + ")");
  });

  $("#blockchain button.get").click(function() {
    SimpleStorage.get().then(function(value) {
      $("#blockchain .value").html(value.toNumber());
    });
    addToLog("#blockchain", "SimpleStorage.get()");
  });

});

// ===========================
// Storage (IPFS) example
// ===========================
$(document).ready(function() {
  //var ipfs = window.IpfsApi(''localhost'', ''5001'');
  var ipfs = ipfsAPI({
    host: ''localhost'',
    port: ''5001'',
    protocol: ''http''
  });
  // automatic set if config/storage.json has "enabled": true and "provider": "ipfs"
  EmbarkJS.Storage.setProvider(''ipfs'', {
    server: ''localhost'',
    port: ''5001''
  })

  $("#storage .error").hide();
  EmbarkJS.Storage.ipfsConnection.ping()
    .then(function() {
      $("#status-storage").addClass(''status-online'');
      $("#storage-controls").show();
    })
    .catch(function(err) {
      if (err) {
        console.log("IPFS Connection Error => " + err.message);
        $("#storage .error").show();
        $("#status-storage").addClass(''status-offline'');
        $("#storage-controls").hide();
      }
    });

  $("#storage button.setIpfsText").click(function() {
    var value = $("#storage input.ipfsText").val();
    EmbarkJS.Storage.saveText(value).then(function(hash) {
      $("span.textHash").html(hash);
      $("input.textHash").val(hash);
    });
    addToLog("#storage", "EmbarkJS.Storage.saveText(''" + value + "'').then(function(hash) { })");
  });

  $("#storage button.loadIpfsHash").click(function() {
    var value = $("#storage input.textHash").val();
    EmbarkJS.Storage.get(value).then(function(content) {
      $("span.ipfsText").html(content);
    });
    addToLog("#storage", "EmbarkJS.Storage.get(''" + value + "'').then(function(content) { })");
  });

  $("#storage button.uploadFile").click(function() {
    var input = $("#storage input[type=file]");
    EmbarkJS.Storage.uploadFile(input).then(function(hash) {
      $("span.fileIpfsHash").html(hash);
      $("input.fileIpfsHash").val(hash);
    });
    addToLog("#storage", "EmbarkJS.Storage.uploadFile($(''input[type=file]'')).then(function(hash) { })");
  });

  $("#storage button.loadIpfsFile").click(function() {
    var hash = $("#storage input.fileIpfsHash").val();
    var url = EmbarkJS.Storage.getUrl(hash);
    var link = ''<a href="'' + url + ''" target="_blank">'' + url + ''</a>'';
    $("span.ipfsFileUrl").html(link);
    $(".ipfsImage").attr(''src'', url);
    addToLog("#storage", "EmbarkJS.Storage.getUrl(''" + hash + "'')");
  });

});

// ===========================
// Communication (Whisper) example
// ===========================
$(document).ready(function() {

  $("#communication .error").hide();
  web3.version.getWhisper(function(err, res) {
    if (err) {
      $("#communication .error").show();
      $("#communication-controls").hide(); +
      $("#status-communication").addClass(''status-offline'');
    } else {
      EmbarkJS.Messages.setProvider(''whisper'');
      $("#status-communication").addClass(''status-online'');
    }
  });

  $("#communication button.listenToChannel").click(function() {
    var channel = $("#communication .listen input.channel").val();
    $("#communication #subscribeList").append("<br> subscribed to " + channel + " now try sending a message");
    EmbarkJS.Messages.listenTo({
      topic: [channel]
    }).then(function(message) {
      $("#communication #messagesList").append("<br> channel: " + channel + " message: " + message);
    });
    addToLog("#communication", "EmbarkJS.Messages.listenTo({topic: [''" + channel + "'']}).then(function(message) {})");
  });

  $("#communication button.sendMessage").click(function() {
    var channel = $("#communication .send input.channel").val();
    var message = $("#communication .send input.message").val();
    EmbarkJS.Messages.sendMessage({
      topic: channel,
      data: message
    });
    addToLog("#communication", "EmbarkJS.Messages.sendMessage({topic: ''" + channel + "'', data: ''" + message + "''})");
  });

});

Index.HTML

<html>

<head>
  <title>Embark - SimpleStorage Demo</title>
  <link rel="stylesheet" href="css/app.css">
  <script src="js/app.js"></script>
</head>

<body class="container">
  <h3>Embark - Usage Example</h3>

  <ul class="nav nav-tabs" role="tablist" id="myTabs">
    <li role="presentation" class="active"><a href="#blockchain" aria-controls="blockchain" role="tab" data-toggle="tab">Blockchain</a></li>
    <li role="presentation"><a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">Decentralized Storage (IPFS)<span class="pull-right" id="status-storage"></a></li>
    <li role="presentation"><a href="#communication" aria-controls="communication" role="tab" data-toggle="tab">P2P communication (Whisper/Orbit)<span class="pull-right" id="status-communication"></span></a></li>
  </ul>

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="blockchain">
      <h3> 1. Set the value in the blockchain</h3>
      <div class="form-group form-inline">
        <input type="text" class="text form-control" value="10">
        <button class="set btn btn-primary">Set Value</button>
        <p>Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.</p>
      </div>

      <h3> 2. Get the current value</h3>
      <div class="form-group">
        <div>
          current value is <span class="value"></span>
        </div>
        <button class="get btn btn-primary">Get Value</button>
        <p>Click the button to get the current value. The initial value is 100.</p>
      </div>

      <h3> 3. Contract Calls </h3>
      <p>Javascript calls being made: </p>
      <div class="logs">
      </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="storage">
      <div class="error alert alert-danger" role="alert">The node you are using does not support IPFS. Please ensure <a href="https://github.com/ipfs/js-ipfs-api#cors" target="_blank">CORS</a> is setup for the IPFS node.</div>
      <div id="storage-controls">

        <h3>Save text to IPFS</h3>
        <div class="form-group form-inline">
          <input type="text" class="ipfsText text form-control" value="hello world!">
          <button class="setIpfsText btn btn-primary">Save</button>
          <p>generated Hash: <span class="textHash"></span></p>
        </div>

        <h3>Load text from IPFS given an hash</h3>
        <div class="form-group form-inline">
          <input type="text" class="textHash text form-control" size="60">
          <button class="loadIpfsHash set btn btn-primary">Load</button>
          <p>result: <span class="ipfsText"></span></p>
        </div>

        <h3>upload file to ipfs</h3>
        <div class="form-group form-inline">
          <input type="file" class="form-control">
          <button class="uploadFile set btn btn-primary">upload</button>
          <p>generated hash: <span class="fileIpfsHash"></span></p>
        </div>

        <h3>Get file or image from ipfs</h3>
        <div class="form-group form-inline">
          <input type="text" class="fileIpfsHash form-control" size="60">
          <button class="loadIpfsFile set btn btn-primary">Load</button>
          <p>file available at: <span class="ipfsFileUrl"></span></p>
          <p><img class="ipfsImage" src=""></p>
        </div>

        <p>Javascript calls being made: </p>
        <div class="logs">
          <br> EmbarkJS.Storage.setProvider(''ipfs'',{server: ''localhost'', port: ''5001''})
        </div>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="communication">
      <div class="error alert alert-danger" role="alert">The node you are using does not support Whisper</div>
      <div id="communication-controls">
        <h3>Listen To channel</h3>
        <div class="form-group form-inline listen">
          <input type="text" class="channel text form-control" placeholder="channel">
          <button class="listenToChannel set btn btn-primary">Start Listening</button>
          <div id="subscribeList"></div>
          <p>messages received:
            <p>
              <div id="messagesList"></div>
        </div>

        <h3>Send Message</h3>
        <div class="form-group form-inline send">
          <input type="text" class="channel text form-control" placeholder="channel">
          <input type="text" class="message text form-control" placeholder="message">
          <button class="sendMessage set btn btn-primary">Send Message</button>
        </div>

        <p>Javascript calls being made: </p>
        <div class="logs">
          <br> EmbarkJS.Messages.setProvider(''whisper'')
        </div>
      </div>
    </div>
  </div>

</body>

</html>

El contrato en solidaridad:

pragma solidity ^ 0.4 .7;
contract SimpleStorage {
  uint public storedData;

  function SimpleStorage(uint initialValue) {
    storedData = initialValue;
  }

  function set(uint x) {
    storedData = x;
  }

  function get() constant returns(uint retVal) {
    return storedData;
  }

}

La salida es la siguiente y ninguno de los botones funciona, por favor dime qué pasa: pestaña IPFS

También he intentado ejecutar los siguientes comandos según otros sitios web con poco o ningún éxito

$ 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-Methods "[/"PUT/", /"POST/", /"GET/"]"

Answer 1

Resuelto. Utilizando

ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials ''["true"]''
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods ''["PUT", "POST", "GET"]''
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Headers ''["Authorization"]''
ipfs config --json API.HTTPHeaders.Access-Control-Expose-Headers ''["Location"]''
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin ''["*"]''

Answer 2

No estoy seguro de cuál funcionó para mí, ya que hice las dos cosas antes de matar y volver a ejecutar embark simulator y embark run , sin embargo, ejecutar estos dos comandos pareció solucionar el problema:

ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin "[/"*/"]"
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin "[/"http://localhost:8000/"]"

Además, no tengo idea de si ejecutar ese comando * es peligroso, ¡así que utilícelo bajo su propio riesgo!

Answer 3

No te olvides de ejecutar ipfs (en modo daemon) $ ipfs daemon