image1写在前面在上一篇文章 Web与智能合约交互实战 中我们已经掌握如何使用 Web3 控制智能合约,并且实现了一个简单的Dapp,可以通过浏览器简单地实现数据的设置和读取。
在本文中,我们将介绍智能合约中的 event,以及如何捕捉智能合约的 event。
在实战环节中,我们将使用 Javascript API 捕捉一个 ERC20 合约中的 Transfer() 事件,并在网页中显示出合约中每个账户的余额。
2智能合约中的eventevent,顾名思义就是智能合约在执行过程中所发生的一系列事件,被记录在 EVM 的日志中,使得程序员可以在 Dapp 的前端页面上调用 Javascript 的回调函数。 event 由智能合约的编写者在代码中使用 event 关键词进行声明,示例如下:- event Deposit( address indexed _from, bytes32 indexed _id, uint _value );
复制代码 当 event 被调用时,其中的参数会被存储在交易的日志当中,示例如下:- function deposit(bytes32 _id) public payable { // 这里是函数实际执行的代码 // 激活Deposit事件,记录在日志中,保存在区块链上 emit Deposit(msg.sender, _id, msg.value); }
复制代码 3捕捉 event使用 Javascript API 可以** 捕捉** event,注意这里说 捕捉 是因为我们既可以实时监控 事件,也可以从历史区块中检索 event。
首先将 event 实例化:- var event = myContractInstance.MyEvent({valueA: 23} [, additionalFilterObject])
复制代码 在创建 event 实例的时候可以使用下面的参数:
- Object:使用 filter 之后得到的索引返回值,例如,filter 可以是 {'valueA': 1, 'valueB': [myFirstAddress, mySecondAddress]}。 默认情况下,所有 filter 的值是 null,这意味着这些值会匹配当前合约发送的任意类型的 event。
- Object:额外的过滤条件,例如可以使用 fromBlock 和 toBlock 限定所要查询的区块的范围,详情可以参考 filter。
- Function:如果将一个回调函数作为最后一个参数的话,就会立刻开始检索 event,所以没有必要再调用 myEvent.watch(function(){})。
完整的示例如下:- var MyContract = web3.eth.contract(abi);var myContractInstance = MyContract.at('0x78e97bcc5b5dd9ed228fed7a4887c0d7287344a9');// 使用一些参数捕捉 eventvar myEvent = myContractInstance.MyEvent({some: 'args'}, {fromBlock: 0, toBlock: 'latest'});myEvent.watch(function(error, result){ ...});// 停止捕捉myEvent.stopWatching();
复制代码 4捕捉 event 实战在实战环节,我们将实现如何获得一个ERC20合约中,有多少地址拥有代币,以及每个地址有多少代币。
在 ERC20 标准合约 中,有一个 event 定义如下:- event Transfer(address indexed from, address indexed to, uint tokens);
复制代码 合约中每次执行 transfer() 函数的时候都会调用 Transfer() 事件,因此只需要使用 Javascript 捕捉 Transfer() 事件,就能获取到所有执行过交易的账户地址。 之后使用 Web3 调用合约的 balanceOf() 方法就可以获取每个账户地址的 token 余额。
实现步骤如下:
- 启动 Ganache 测试环境;
- 在 Remix 中创建 ERC20 智能合约;
- 编写前端代码,与合约交互。
前两步关于如何使用 Ganache 搭建本地测试环境以及如何在 Remix 中创建合约的部分可以参见我的上一篇文章 Web与智能合约交互实战。 这里将重点放在第三步。
创建UI
在 index.html 中,我们将创建基础的 UI,功能包括接收 token 的地址输入框,发送 token 数量的输入框(由于这里总是从默认账户发送 token,因此没有设置发送者的地址输入框),以及一个发送按钮,这些将通过 jQuery 实现:- ERC20 Token Sample ERC20 Token To Tokens Send // 与智能合约的交互代码 ......
复制代码 以及 main.css 文件设定基本的样式:- body { background-color:#F0F0F0; padding: 2em; font-family: 'Raleway','Source Sans Pro', 'Arial';}.container { width: 50%; margin: 0 auto;}label { display:block; margin-bottom:10px;}input { padding:10px; width: 50%; margin-bottom: 1em;}button { margin: 2em 0; padding: 1em 4em; display:block;}#instructor { padding:1em; background-color:#fff; margin: 1em 0;}.box div { padding:1em; background-color:#fff; margin: 1em 0;}
复制代码 捕捉 event 事件
这部分的主要代码如下:- if (typeof web3 !== 'undefined') { web3 = new Web3(web3.currentProvider); } else { // set the provider you want from Web3.providers web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545")); } // 将Ganache创建的第一个账号当作默认账号 web3.eth.defaultAccount = web3.eth.accounts[0]; // 添加合约的ABI var tokenerc20Contract = web3.eth.contract([{"constant":true,"inputs":.....}]); // 添加合约地址 var tokenerc20 = tokenerc20Contract.at('0xdca44800d01ab7768902a11757b5ca1801a59efe'); // 声明transfer事件,所要查找的区块数从0-latest var transferEvent = tokenerc20.Transfer({}, {fromBlock: 0, toBlock: 'latest'}); // 通过前端进行token交易 $("#button").click(function() { $("#loader").show(); tokenerc20.transfer($("#to").val(), $("#tokens").val()); }); var holdersArray = new Array(); // 查找所有Transfer事件 transferEvent.watch(function(error, result){ if (!error) { $("#loader").hide(); // 判断From或者To的地址是否在holdersArray中出现 var isFromExist = false; var isToExist = false; for (var i = 0; i < holdersArray.length; i++){ if (result.args.from == holdersArray[i]) { isFromExist = true; } if (result.args.to == holdersArray[i]) { isToExist = true; } } // 找的新的账户地址,输出余额信息 if (isFromExist == false) { var holder = result.args.from; holdersArray.push(holder); var balanceOfHolder = tokenerc20.balanceOf(holder) $("#instructor").append("" + holder + ' has balance of ' + balanceOfHolder + ""); } if (isToExist == false) { var holder = result.args.to; holdersArray.push(holder); var balanceOfHolder = tokenerc20.balanceOf(holder) $("#instructor").append("" + holder + ' has balance of ' + balanceOfHolder + ""); } } else { $("#loader").hide(); console.log(error); } });
复制代码 首先使用 Web3 关联 ERC20 合约,将合约的 ABI 以及合约地址都复制到代码中。
当用户点击发送按钮时,会调用合约中的 transfer() 函数(测试时可以使用 Ganache 创建的10个账户进行交易)。
接下来我们实例化 Transfer() 事件,将过滤条件设置为 {fromBlock: 0, toBlock: 'latest'},即从所有区块中筛选交易。
在回调函数中,我们将收集所有交易中涉及到的交易双方的地址,并将每个新地址的余额显示在页面上。
最终效果显示如下:
image文中涉及的所有代码可以在 https://github.com/gitferry/mastering-ethereum/tree/master/Solidity-event 获取。
5参考链接http://solidity.readthedocs.io/en/v0.4.21/contracts.html#events
https://github.com/ethereum/wiki/wiki/JavaScript-API#contract-events
http://me.tryblockchain.org/blockchain-solidity-event.html本文内容作者:HiBlock区块链社区小伙伴——盖盖
原文首发于公众号: ChainLab [h3]活动推荐[/h3]主题:Blockathon,挑战区块链开发,敢不敢来!(点击了解详情)
5月25-27日,Blockathon2018北京站,招募100名开发者一起挑战区块链开发。
开发者免费,报名需审核。识别下图二维码或点击“阅读原文”即可报名参加。
image点击“阅读原文”即可报名。
|
|