Web3与智能合约交互实战

小灰灰 2022-05-19 04:10 272阅读 0赞

# 写在前面 #

在最初学习以太坊的时候，很多人都是自己创建以太坊节点后，使用geth与之交互。这种使用命令行交互的方法虽然让很多程序员感到兴奋（黑客帝国的既视感？），但不可能指望普通用户通过命令行使用Dapp。因此，我们需要一种友好的方式（比如一个web页面）来与智能合约交互，于是问题的答案就是`web3.js`。

# Web3.js #

[Web3.js][]是以太坊官方的Javascript API，可以帮助智能合约开发者使用HTTP或者IPC与本地的或者远程的以太坊节点交互。实际上就是一个库的集合，主要包括下面几个库：

*  `web3-eth`用来与以太坊区块链和智能合约交互
 *  `web3-shh`用来控制whisper协议与p2p通信以及广播
 *  `web3-bzz`用来与swarm协议交互
 *  `web3-utils`包含了一些Dapp开发有用的功能

Web3与geth通信使用的是 [JSON-RPC][] ，这是一种轻量级的RPC（Remote Procedure Call）协议，整个通信的模型可以抽象为下图。

![603][]

# 搭建测试链 #

在开发初期，我们并没有必要使用真实的公链，为了开发效率，一般选择在本地搭建测试链。在本文我们选择的[Ganache][]（在此之前使用的是testrpc，Ganache属于它的升级版），一个图形化测试软件（也有命令行版本），可以一键在本地搭建以太坊区块链测试环境，并且将区块链的状态通过图形界面显示出来，Ganache的运行界面如下图所示。

![700][]

从图中可以看到Ganache会默认创建10个账户，监听地址是`http://127.0.0.1:7545`，可以实时看到`Current Block`、`Gas Price`、`Gas Limit`等信息。

# 创建智能合约 #

目前以太坊官方全力支持的智能合约开发环境是[Remix IDE][]，我们在合约编辑页面编写如下代码：

> 可以使用本地的remix，速度快很多。具体配置请查看之前的文章。

pragma solidity ^0.4.21;
    
    contract InfoContract {
        
       string fName;
       uint age;
       
       function setInfo(string _fName, uint _age) public {
           fName = _fName;
           age = _age;
       }
       
       function getInfo() public constant returns (string, uint) {
           return (fName, age);
       }   
    }

代码很简单，就是简单的给`name`和`age`变量赋值与读取，接下来切换到 `run` 的 tab 下，将`Environment`切换成`Web3 Provider`，并输入我们的测试链的地址`http://127.0.0.1:7545`，这里对这三个选项做一简单说明：

*  `Javascript VM`：简单的Javascript虚拟机环境，纯粹练习智能合约编写的时候可以选择
 *  `Injected Web3`：会连接到以太坊官方的测试网络，如Ropsten Test Network
 *  `Web3 Provider`：连接到私有的测试网络。

如果连接成功，那么在下面的`Account`的选项会默认选择 `Ganache` 创建的第一个账户地址。接下来我们点击`Create`就会将我们的智能合约部署到我们的测试网中。接下来 `Remix` 的页面不要关闭，在后面编写前端代码时还要用到合约的地址以及`ABI`信息。

# 安装Web3 #

在这之前，先在终端创建我们的项目：

yuyangdeMacBook-Pro:~ yuyang$ mkdir testWeb3
    yuyangdeMacBook-Pro:~ yuyang$ cd testWeb3

接下来使用 `node.js` 的包管理工具 `npm` 初始化项目，创建`package.json` 文件，其中保存了项目需要的相关依赖环境。

yuyangdeMacBook-Pro:testWeb3 yuyang$ npm init

一路按回车直到项目创建完成。最后，运行下面命令安装`web.js`：

yuyangdeMacBook-Pro:testWeb3 yuyang$ npm install web3

> *注意：* 在实际安装过程中我发现web3在安装完成后并没有 `/node_modules/web3/dist/we3.min.js` 文件，这个问题在 [issue\#1041][issue_1041]中有体现，但官方好像一直没解决。不过可以在这里[下载][Link 1]所需的文件，解压后将`dist`文件夹的内容拷贝到 `/node_modules/web3`路径下。

# 创建 UI #

在项目目录下创建`index.html`，在这里我们将创建基础的 UI，功能包括`name`和`age`的输入框，以及一个按钮，这些将通过 jQuery 实现：

接下来需要编写`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;
    }
    
    #info {
        padding:1em;
        background-color:#fff;
        margin: 1em 0;
    }

## 使用Web3与智能合约交互 ##

UI 创建好之后，在`<script>`标签中间编写`web.js`的代码与智能合约交互。首先创建`web3`实例，并与我们的测试环境连接：

这段代码是[web3.js Github][]提供的样例，意思是如果`web3`已经被定义，那么就可以直接当作我们的 provider 使用。如果没有定义，则我们手动指定 provider。

> 这里可能会存在疑问：为什么 web3 会被事先定义呢？实际上，如果你使用类似 [MetaMask][]（一个 Chrome 上的插件，迷你型以太坊钱包）这样的软件，provider 就会被自动植入。

在上面代码的基础上，接下来设置默认的以太坊账户：

web3.eth.defaultAccount = web3.eth.accounts[0];

在上文中我们使用 Ganache 已经创建了 10 个账户了，这里我们选择第一个账户当作默认账户。

接下来需要让我们的`web3`知道我们的合约是什么样的，这里需要用到合约的 [ABI（Application Binary Interface）][ABI_Application Binary Interface]。`ABI`可以使我们调用合约的函数，并且从合约中获取数据。

在上文中我们已经在 Remix 中创建了我们的合约，这时重新回到 Remix，在 Compile 的 tab 下我们点击`Details` 出现的页面中我们可以拷贝合约的`ABI`，如下图所示。

![700 1][]

> 点击ABI旁边的按钮复制。

> 在bejson中转义成字符串  
> [http://www.bejson.com/jsonviewernew/][http_www.bejson.com_jsonviewernew]

将其复制到代码中：

var infoContract = web3.eth.contract(PASTE ABI HERE!);

接下来转到 run 的tab，拷贝合约的地址，将其复制到下面的代码中：

var info = InfoContract.at('PASTE CONTRACT ADDRESS HERE');

完成这些我们就可以调用合约中的函数了，下面我们使用 jQuery 与我们的合约进行交互：

info.getInfo(function(error, result){
        if(!error)
            {
                $("#info").html(result[0]+' ('+result[1]+' years old)');
                console.log(result);
            }
        else
            console.error(error);
    });
    
    $("#button").click(function() {
        info.setInfo($("#name").val(), $("#age").val());
    });

以上的代码就简单地实现了对合约中两个函数的调用，分别读取和显示`name`和`age`变量。

到此我们就完成了全部的代码，完整代码可以在 [https://github.com/ffzhihua/InfoContract][https_github.com_ffzhihua_InfoContract]中找到。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    
        <link rel="stylesheet" type="text/css" href="main.css">
    
        <script src="./node_modules/web3/dist/web3.min.js"></script>
    
    </head>
    <body>
        <div class="container">
    
            <h1>Info Contract</h1>
    
            <h2 id="info"></h2>
    
            <label for="name" class="col-lg-2 control-label">Name</label>
            <input id="name" type="text">
    
            <label for="name" class="col-lg-2 control-label">Age</label>
            <input id="age" type="text">
    
            <button id="button">Update Info</button>
    
    
        </div>
    
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    
         <script>
           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"));
            }
            web3.eth.defaultAccount = web3.eth.accounts[0];
            var infoContract = web3.eth.contract([{"constant":true,"inputs":[],"name":"getInfo","outputs":[{"name":"","type":"string"},{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_fName","type":"string"},{"name":"_age","type":"uint256"}],"name":"setInfo","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"}]);
            var info = infoContract.at('0x8cdaf0cd259887258bc13a92c0a6da92698644c0');
            info.getInfo(function(error, result){
                if(!error)
                    {
                        $("#info").html(result[0]+' ('+result[1]+' years old)');
                        console.log(result);
                    }
                else
                    console.error(error);
            });
            $("#button").click(function() {
                info.setInfo($("#name").val(), $("#age").val());
            });
        </script>
    
    
    </body>
    </html>

在项目根目录执行

node index.js

在浏览器中打开`index.html`测试效果如下图（输入名字和年龄后刷新）

![700 2][]

[Web3.js]: https://link.jianshu.com/?t=https%3A%2F%2Fweb3js.readthedocs.io%2Fen%2F1.0%2F
[JSON-RPC]: https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2Fethereum%2Fwiki%2Fwiki%2FJSON-RPC
[603]: /images/20220519/eda6f9dd30a742cda849a35bbcc5afad.png
[Ganache]: https://link.jianshu.com/?t=http%3A%2F%2Ftruffleframework.com%2Fganache%2F
[700]: /images/20220519/cc21198e301b4778848edff13b1690cc.png
[Remix IDE]: https://link.jianshu.com/?t=https%3A%2F%2Fremix.ethereum.org%2F
[issue_1041]: https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2Fethereum%2Fweb3.js%2Fissues%2F1041
[Link 1]: https://link.jianshu.com/?t=https%3A%2F%2Fcodeload.github.com%2Fethereum%2Fweb3.js%2Fzip%2Fdevelop
[web3.js Github]: https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2Fethereum%2Fweb3.js%2F
[MetaMask]: https://link.jianshu.com/?t=https%3A%2F%2Fmetamask.io%2F
[ABI_Application Binary Interface]: https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2Fethereum%2Fwiki%2Fwiki%2FEthereum-Contract-ABI
[700 1]: /images/20220519/9b66d4fd4ad44bfdbae18becdd5ce6a2.png
[http_www.bejson.com_jsonviewernew]: https://link.jianshu.com/?t=http%3A%2F%2Fwww.bejson.com%2Fjsonviewernew%2F
[https_github.com_ffzhihua_InfoContract]: https://github.com/ffzhihua/InfoContract
[700 2]: /images/20220519/2c8ba370a2c44e5891a6b48e34e13560.png