如何使用Web3在浏览器中与智能合约进行交互

2018-4-20 技术文章

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

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

搭建测试链

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

Ganache

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

创建智能合约

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

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

   }

}

接下来切换到 run 的 tab 下，将Environment切换成Web3 Provider，并输入我们的测试链的地址http://127.0.0.1:7545。

安装Web3

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

> mkdir info

> cd info

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

> npm init

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

> npm install web3

编写代码

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

<!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> //定义web3标签

       if (typeof web3 !== 'undefined') {

            web3 = new Web3(web3.currentProvider);

        } else {

            // 连接端口如果不一样请自行更改

            web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:7545"));

        }

        web3.eth.defaultAccount = web3.eth.accounts[0]; //设置默认调用账户

		//下面是定义AIP接口

        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('/*部署合约的地址，自行填写*/');

        info.getInfo(function(error, result){ //定义异步get请求

            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>

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

到此我们就完成了全部的代码，完整代码可以在 github 中找到。在浏览器中打开index.html测试效果如下图（输入名字和年龄后刷新）。

以上就是如何使用 Web3 在浏览器中与智能合约进行交互的简单示例，目的是理解前端代码是如何与智能合约进行交互的。