天天看点
返回

【CryptoZombies - 3 应用前端和 Web3.js】001 Web3.js入门与web3 Provider

目录

​​一、前言​​

​​二、Web3.js​​

​​1、引入​​

​​2、Web3.js怎么解决​​

​​3、Web3.js环境搭建​​

​​4、实战​​

​​1.要求​​

​​2.代码​​

​​三、Web3 Provider​​

​​1、引入​​

​​2、Infura​​

​​3、MetaMask​​

​​4、实战​​

​​1.要求​​

​​2.代码​​

一、前言

终于到了这里了，之前我们讲的solidity教程只是基础的合约编写，但是我们并不能像普通程序一样运行，因为我们还需要自己搭建运行环境。这确实要比比普通的编程语言难得多。

而我们要做的就是知难而上。

今天我们要讲的是Web3.js，这是针对以太坊的JavaScript库，让我们走进今天的内容来了解一下吧。

二、Web3.js

1、引入

我们都知道，以太坊是由很多结点组成的，每个结点都有区块链的备份，如果我们想要调用一份合约的某个方法，我们需要告诉结点：

1.合约地址

2.方法及其传入参数

以太坊结点只能识别一种叫做JSON-RPC的语言。这种语言不是那么太容易读懂，如果我们想调用一个合约，我们需要发送的查询语句如下：

// 哈……祝你写所有这样的函数调用的时候都一次通过
// 往右边拉…… ==>
{"jsonrpc":"2.0","method":"eth_sendTransaction","params":[{"from":"0xb60e8dd61c5d32be8058bb8eb970870f07233155","to":"0xd46e8dd67c5d32be8058bb8eb970870f07244567","gas":"0x76c0","gasPrice":"0x9184e72a000","value":"0x9184e72a","data":"0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675"}],"id":1}

看不明白？我们换种方式展示：

{
    "jsonrpc":"2.0",
    "method":"eth_sendTransaction",
    "params":[{
        "from":"0xb60e8dd61c5d32be8058bb8eb970870f07233155",
        "to":"0xd46e8dd67c5d32be8058bb8eb970870f07244567",
        "gas":"0x76c0",
        "gasPrice":"0x9184e72a000",
        "value":"0x9184e72a",
        "data":"0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675"
    }],
    "id":1
}

这样确实太麻烦了！

2、Web3.js怎么解决

在Web3.js中，把这些复杂的查询语句隐藏起来，我们只需要和JavaScript进行交互即可，方式也非常简单：

CryptoZombies.methods.createRandomZombie("Vitalik Nakamoto 🤔")
  .send({ from: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", gas: "3000000" })

后续，我们还会更加详细讲解。

3、Web3.js环境搭建

我们想要使用Web3.js，就需要搭建好环境

搭建方式有很多种，如：

// 用 NPM
npm install web3

// 用 Yarn
yarn add web3

// 用 Bower
bower install web3

// ...或者其他。

又如：

<script language="javascript" type="text/javascript" src="web3.min.js"></script>

对于后面的方式，我们需要从GitHub上面下载压缩后的.js文件，然后包含到我们的项目中。

4、实战

1.要求

在下面的HTML项目中使用script标签添加js文件。

JS文件为： ​

​web3.min.js​

 ​

2.代码 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CryptoZombies front-end</title>
    <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="web3.min.js"></script>
  </head>
  <body>

  </body>
</html>

三、Web3 Provider

1、引入

上面我们搭建好了Web3.js环境（虽然真的很简单，但是我们确实是完成了），然后我们就需要通过环境和区块链进行交互了。

在 Web3.js 里设置 Web3 的 Provider（提供者） 告诉我们的代码应该和 哪个节点 交互来处理我们的读写。我们可以运行自己的结点作为提供者。

但这样不是很方便！

因为如果我们用自己的结点作为提供者，那我们为其他用户提供DAPP服务的时候，我们还需要同步维护一个以太坊结点。所以，如果能有一个第三方服务为我们提供相关功能，这个问题就解决了。

2、Infura

Infura 是一个服务，它维护了很多以太坊节点并提供了一个缓存层来实现高速读取。我们可以用他们的 API 来免费访问这个服务。 用 Infura 作为节点提供者，我们无需自己运营节点就能很可靠地向以太坊发送、接收信息。

使用方法如下：

var web3 = new Web3(new Web3.providers.WebsocketProvider("wss://mainnet.infura.io/ws"));

当然，在DAPP中，除了读信息，还会有用户写信息，所以我们需要一个方法，可以让用户用自己的私钥给事务签名。

这些需要涉及到密码学的知识。在这里给大家简单说明一下，在区块链中，每个用户都会有自己的公私钥对表明自己的身份，从而实现匿名性。用户自己保存私钥，公钥可以公开。用户使用自己的私钥对数据进行签名，其他用户可以利用公钥去验证。但是其他用户不会知道该用户的私钥（理想状态下，比如一个恶意用户，用酒把这个人的私钥灌出来也说不准）。一旦用户自己的私钥丢失，他所拥有的以太币（或比特币）就全部永久损失了，除非他能将私钥找回。

3、MetaMask

公私钥密码学真的是比较繁琐复杂的，对于一些只想做应用的人来说，他们不需要把密码学理解的太透彻，可能他们只是想挖矿赚个钱而已。

所以我们就需要一个工具来帮我们管理我们的公私钥。

最常用的就是MetaMask：

【CryptoZombies - 3 应用前端和 Web3.js】001 Web3.js入门与web3 Provider

这是一个浏览器扩展插件，我们可以使用谷歌或者火狐浏览器安装并使用。它能让用户安全地维护他们的以太坊账户和私钥， 并用他们的账户和使用 Web3.js 的网站互动。

上面图中的以太币是我做测试使用的，这个币没有实际的价值，只是用于测试。任何人都可以注册一个结点，获得免费的测试以太币。

我们用Metamask作用web3的提供者。具体做法如下：

1.MetaMask 将其 web3 提供者注入到浏览器的全局 JavaScript 对象 web3 中。

2.应用检查 web3 是否存在。若存在就使用 web3.currentProvider 作为其提供者。

举个例子，如：

window.addEventListener('load', function() {

  // Checking if Web3 has been injected by the browser (Mist/MetaMask)
  if (typeof web3 !== 'undefined') {
    // Use Mist/MetaMask's provider
    web3js = new Web3(web3.currentProvider);
  } else {
    // Handle the case where the user doesn't have web3. Probably
    // show them a message telling them to install Metamask in
    // order to use our app.
  }

  // Now you can start your app & access web3js freely:
  startApp()

})

我们可以使用类似的代码在我们的应用中，用以检查用户是否安装MetaMask及提供用户安装。

4、实战

1.要求

我们在HTML文件中的 </body> 标签前面放置了一个空的 script 标签。可以把这节课的 JavaScript 代码写在里面。

​

​1.​

 ​把上面用来检测 MetaMask 是否安装的模板代码粘贴进来。请粘贴到以 window.addEventListener 开头的代码块中。

2.代码 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CryptoZombies front-end</title>
    <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="web3.min.js"></script>
  </head>
  <body>

    <script>
      // Start here
      window.addEventListener('load', function() {

          // Checking if Web3 has been injected by the browser (Mist/MetaMask)
          if (typeof web3 !== 'undefined') {
            // Use Mist/MetaMask's provider
            web3js = new Web3(web3.currentProvider);
          } else {
            // Handle the case where the user doesn't have web3. Probably
            // show them a message telling them to install Metamask in
            // order to use our app.
          }

          // Now you can start your app & access web3js freely:
          startApp()

      })
    </script>
  </body>
</html>
web3.js web3 Provider infura MetaMask javascript
上一篇: Java Fork-Join框架实现并发查找
下一篇: Java项目:角色权限后台管理系统脚手架(java+springboot+freemark+jpa+maven+Mysql)

继续阅读