我对区块链很陌生,我从各种渠道了解到,我们可以使用embark框架和IPFS轻松创建DApp。
我已经开始运行embark github页面中的所有说明
我运行以下命令来创建所有功能的演示
$ embark demo
$ cd embark_demo
然后运行启动模拟器
$ embark simulator
一切正常,即使是localhost页面也能正常工作,而且我能够获取并设置int值。 Blockchains with Embark
但是我无法使用页面的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 + "'})");
});
});
&#13;
的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>
&#13;
团结合同:
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;
}
}
&#13;
输出如下,没有任何按钮有效,请告诉我错误: IPFS tab
我还尝试按照其他网站运行以下命令,但几乎没有成功
$ 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\"]"
答案 0 :(得分:2)
解决了它。使用
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 '["*"]'
答案 1 :(得分:0)
我不确定哪一个对我有用,因为我在杀死并重新运行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\"]"
此外,我不知道运行*命令是否危险,所以请自行承担使用风险!
答案 2 :(得分:0)
不要忘记运行ipfs(在守护进程模式下) $ ipfs守护进程