44
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

gethの機能やコントラクトをweb3.jsを利用して呼び出す

Last updated at Posted at 2017-08-12

jsプログラムやWeb経由で利用した場合の方法。

前提

こちらの記事を参考にgethやコントラクトが展開されている状態を想定しています。

web3.jsのインストール

作業ディレクトリを作ってweb3をインストールします。

mkdir web3
cd web3
npm install web3@0.20.0

2017年8月12日時点の最新はbeta 1.0.0-18でしたが、うまく動かないので古いバージョンを利用。

コンソールアプリからの利用

まずはjsコンソールアプリからの利用を確認してみます。バッチなどで利用する場合はやはりコンソールアプリが便利です。

gethコマンドの利用

まずはcoinbaseを取得・表示してみます。

test.js
var Web3 = require('web3');
var web3 = new Web3();
web3.setProvider(new web3.providers.HttpProvider('http://localhost:8575'));

var coinbase = web3.eth.coinbase;
var balance = web3.eth.getBalance(coinbase);
console.log("balance:", balance);

アドレスは環境に応じて変えて下さい。

実行してみます。

node test.js

balance: { [String: '1.03302002804264e+23'] s: 1, e: 23, c: [ 1033020028, 4264000000000 ] }

コントラクトの利用

次に展開済のコントラクトを呼び出してみます。

test.js
var Web3 = require('web3');
var web3 = new Web3();
web3.setProvider(new web3.providers.HttpProvider('http://localhost:8575'));

//コントラクトのアドレス
var address = "0x56bad31cb803f82bebe32d080314d11ddcef0ea9";

//abi情報
var abi = [{"constant":true,"inputs":[],"name":"Hello","outputs":[{"name":"","type":"string"}],"payable":false,"type":"function"}];

//コントラクトの取得
var contract = web3.eth.contract(abi).at(address);

//実行
var response = contract.Hello.call();

console.log("response:",response);

実行してみます。

node test.js

response: Hello World

Hello Worldが返りました。

Webからの利用

Webから利用してみます。コンソール時とほぼ同様に扱うことができます。
なお、Webからの利用にはweb3.min.jsを利用しますが、これはnpmでインストールした場合、/node_modules/web3/dist/以下に存在しますので、コピーして利用します(ここではそのまま利用しています)。

CDNもこちらにあるようです。。

まずはgethコマンドから。

<!doctype html>
<html>
<body>
    <button id="btn">exec</button>
    <!-- 読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script src="node_modules/web3/dist/web3.min.js"></script> 
    <script>
        $(function(){
            $("#btn").click(function(){
                var web3 = new Web3();
                web3.setProvider(new web3.providers.HttpProvider('http://localhost:8575'));

                var coinbase = web3.eth.coinbase;
                var balance = web3.eth.getBalance(coinbase);
                alert(balance);
            });
        });
    </script>
</body>
</html>

jQueryとの共存も問題ないようです。
次に、コントラクトの実行。

<!doctype html>
<html>
<body>
    <button id="btn">exec</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script src="node_modules/web3/dist/web3.min.js"></script> 
    <script>
        $(function(){
            $("#btn").click(function(){
                var web3 = new Web3();
                web3.setProvider(new web3.providers.HttpProvider('http://localhost:8575'));

                var address = "0x56bad31cb803f82bebe32d080314d11ddcef0ea9";

                var abi = [{"constant":true,"inputs":[],"name":"Hello","outputs":[{"name":"","type":"string"}],"payable":false,"type":"function"}];

                var contract = web3.eth.contract(abi).at(address);

                var response = contract.Hello.call();

                alert(response);
            });
        });
    </script>
</body>
</html>

どちらも問題ないようです。

その他

実際にサービスを開発する場合は、アカウントの追加やコントラクトのデプロイ自体をweb3.js経由で行うこともできます。
それらの方法は随時追加したいと思います。

Eventの監視

サンプルとしては(ABIが)冗長ですが、EditPoint()というイベントが設定されている場合の監視。
アドレスとABIからコントラクトを作成し、その中のEventを指定して監視するようです。

下記スクリプトを実行すると待ち状態になり、Event発生時にEdit event detected!ログが出力されます。

監視コードの追加

HelloWorldにEvent機能を追加します。

pragma solidity ^0.4.13;

contract HelloWorld{
    
    //イベント定義
    event ExecHello(address from, string operation);
    
    //メソッド
    function Hello() constant returns (string){
        //イベントイベント実行
        ExecHello(msg.sender, "Exec Hello!");
        
        //return
        return "Hello World";
    }
}

ポイントは戻り値をconstantにしないことです。constantはEventを発火しないようです。

監視コード

下記スクリプトをコンソールで実行すると待ち状態となります。

var Web3 = require('web3');
var web3 = new Web3();
web3.setProvider(new web3.providers.HttpProvider('http://localhost:8575'));

//コントラクトのアドレス
var address = "0x1a890d0b9d7355ae641d40db8425c888de3a0ef0";

//ABI
var abi = [{"constant":false,"inputs":[],"name":"Hello","outputs":[{"name":"","type":"string"}],"payable":false,"type":"function"},{"anonymous":false,"inputs":[{"indexed":false,"name":"from","type":"address"},{"indexed":false,"name":"operation","type":"string"}],"name":"ExecHello","type":"event"}];

//コントラクト
var contract = web3.eth.contract(abi).at(address);

//監視対象のイベント取得
event = contract.ExecHello();

//監視
event.watch(function(error, result){
    console.log("Event Executed");
    if(!error) console.log(result);
});

発火

Eventを検知すると下記のようなログが出力されます。

Edit event detected!
{ address: '0x4c2bf9b6ae51ee28f53d2e1d5786c2bc3addbab1',
  blockNumber: 21664,
  transactionHash: '0x5029fb148116bfaafc6555a549ab8d184f28c3096dfffc9283cc129205b97c35',
  transactionIndex: 0,
  blockHash: '0x44655fa117f4cf2c58e75f9ec7ecb980d1bf45e9c4df5cf528ef88863ee4df8b',
  logIndex: 0,
  removed: false,
  event: 'ExecHello',
  args:
   { from: '0x08a59abe71e43f9316f34c6d1c924d1414f8d544',
     operation: 'Exec Hello!' } }
44
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
44
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?