如何使用Embark框架演示程序运行IPFS

Question

我对区块链很陌生，我从各种来源了解到，我们可以使用embark框架和IPFS来轻松创建一个DApp。

我已经开始运行embark github页面中的所有指令

我运行以下命令来创建所有功能的演示

$ embark demo
$ cd embark_demo

然后运行embark模拟器

$ embark simulator

一切正常，即使localhost页面工作，我能够获取并设置int值。 区块链与登船

但是我无法使用页面的IPFS标签？ 它给出以下错误：“您使用的节点不支持IPFS。请确保为IPFS节点设置CORS。”

但是我已经成功运行了IPFS守护程序

我还从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> 

团结合同：

 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; } } 

输出如下，没有任何按钮工作，请告诉我错误： IPFS选项卡

我也尝试按照其他网站运行以下命令，几乎没有成功

$ 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

解决了它。 运用

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

我不确定哪一个对我有用，因为我在杀死和重新运行embark simulator并embark run之前都做了两个，但运行这两个命令似乎解决了这个问题：

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

此外，我不知道运行*命令是否危险，所以使用风险自负！

Answer 3

不要忘记运行ipfs（在守护进程模式下）$ ipfs守护进程