如何使用 Embark 框架演示程序 运行 IPFS
How to run IPFS with Embark framework demo program
我对区块链还很陌生，我从各种来源了解到我们可以使用 embark 框架和 IPFS 来轻松创建 DApp。
我从 运行开始 github 页面
中的所有说明开始
我运行以下命令创建所有功能的演示
$ embark demo
$ cd embark_demo
然后 运行启用登船模拟器
$ embark simulator
一切正常，甚至 localhost 页面也正常，而且我能够获取和设置 int 值。
Blockchains with Embark
但是我无法使用页面的 IPFS 选项卡？它给出以下错误："The node you are using does not support IPFS. Please ensure CORS is setup for the IPFS node."
但是我已经成功 运行 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;
}
}
输出如下，按钮none正常，请告诉我哪里出了问题：
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\"]"
不要忘记 运行 ipfs（在守护进程模式下）
$ ipfs 守护进程
解决了。使用
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 '["*"]'
我对区块链还很陌生，我从各种来源了解到我们可以使用 embark 框架和 IPFS 来轻松创建 DApp。
我从 运行开始 github 页面
中的所有说明开始我运行以下命令创建所有功能的演示
$ embark demo
$ cd embark_demo
然后 运行启用登船模拟器
$ embark simulator
一切正常，甚至 localhost 页面也正常，而且我能够获取和设置 int 值。 Blockchains with Embark
但是我无法使用页面的 IPFS 选项卡？它给出以下错误："The node you are using does not support IPFS. Please ensure CORS is setup for the IPFS node."
但是我已经成功 运行 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;
}
}
输出如下，按钮none正常，请告诉我哪里出了问题： 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\"]"
不要忘记 运行 ipfs（在守护进程模式下） $ ipfs 守护进程
解决了。使用
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 '["*"]'