发布于 由admin

区块链前端：Vue 3以太坊合约事件监听器设计

区块链前端：Vue 3以太坊合约事件监听器设计

引言

大家好，欢迎来到今天的讲座！今天我们要聊的是如何在 Vue 3 中实现以太坊智能合约的事件监听。如果你对区块链和前端开发都有所涉猎，那么你一定知道这两者的结合可以创造出非常酷炫的应用。想象一下，你可以实时监听区块链上的事件，并将这些事件展示给用户，是不是很酷？

为了让这个过程更加简单和有趣，我们将使用 Vue 3 和 Web3.js（或者 Ethers.js）来实现一个事件监听器。别担心，我会尽量用通俗易懂的语言解释每一个步骤，确保你能够轻松上手。

1. 什么是智能合约事件？

首先，我们来了解一下什么是智能合约事件。在以太坊中，智能合约可以通过 emit 关键字触发事件。这些事件就像是合约发出的“广播”，告诉外界某些事情发生了。例如，当用户成功完成一笔交易时，合约可以发出一个 TransactionCompleted 事件。

事件的好处是它们不会占用太多的 gas 费用，因为它们只存储在日志中，而不是合约的状态中。因此，事件非常适合用于记录一些不需要永久保存在合约中的信息。

示例合约代码

pragma solidity ^0.8.0;

contract MyContract {
    event TransactionCompleted(address indexed from, uint256 amount);

    function sendMoney(uint256 amount) public payable {
        // 发送资金逻辑
        emit TransactionCompleted(msg.sender, amount);
    }
}

在这个合约中，TransactionCompleted 事件会在每次调用 sendMoney 函数时被触发。indexed 关键字可以让事件更容易被过滤和查询。

2. 为什么需要监听事件？

在前端应用中，监听智能合约事件可以帮助我们实时获取区块链上的动态信息。比如，当用户发起一笔交易时，我们可以立即显示“交易正在进行”或“交易已完成”的提示，而不需要等待区块确认后再刷新页面。

此外，监听事件还可以帮助我们减少不必要的 API 调用。与其每隔几秒钟轮询区块链的状态，不如直接监听事件，这样可以节省资源并提高用户体验。

3. 使用 Web3.js 或 Ethers.js 监听事件

接下来，我们来看看如何在 Vue 3 中使用 Web3.js 或 Ethers.js 来监听智能合约事件。这两种库都可以与以太坊节点通信，并且都提供了方便的 API 来监听事件。

3.1 使用 Web3.js

Web3.js 是一个非常流行的以太坊 JavaScript 库，它可以帮助我们与以太坊节点进行交互。要监听合约事件，我们需要先连接到以太坊节点，并获取合约实例。

安装 Web3.js

npm install web3

初始化 Web3 实例

import Web3 from 'web3';

// 如果用户已经安装了 MetaMask，我们可以直接使用它作为提供者
let web3;
if (window.ethereum) {
  web3 = new Web3(window.ethereum);
  try {
    // 请求用户授权访问他们的钱包
    await window.ethereum.request({ method: 'eth_requestAccounts' });
  } catch (error) {
    console.error("用户拒绝了账户请求", error);
  }
} else {
  console.log('MetaMask 未检测到，请安装 MetaMask 插件');
}

获取合约实例

const contractAddress = '0xYourContractAddress';
const abi = [ /* 合约 ABI */ ];

const contract = new web3.eth.Contract(abi, contractAddress);

监听事件

contract.events.TransactionCompleted({
  fromBlock: 'latest',  // 从最新区块开始监听
  filter: { from: '0xUserAddress' }  // 可选：根据地址过滤事件
}, (error, event) => {
  if (error) {
    console.error("监听事件时出错", error);
  } else {
    console.log("事件触发:", event.returnValues);
  }
});

3.2 使用 Ethers.js

Ethers.js 是另一个非常流行的以太坊 JavaScript 库，它的 API 更加简洁，性能也更好。如果你想构建一个轻量级的应用，Ethers.js 是一个不错的选择。

安装 Ethers.js

npm install ethers

初始化 Ethers 实例

import { ethers } from 'ethers';

// 如果用户已经安装了 MetaMask，我们可以直接使用它作为提供者
let provider;
if (window.ethereum) {
  provider = new ethers.providers.Web3Provider(window.ethereum);
  try {
    // 请求用户授权访问他们的钱包
    await provider.send("eth_requestAccounts", []);
  } catch (error) {
    console.error("用户拒绝了账户请求", error);
  }
} else {
  console.log('MetaMask 未检测到，请安装 MetaMask 插件');
}

获取合约实例

const contractAddress = '0xYourContractAddress';
const abi = [ /* 合约 ABI */ ];

const contract = new ethers.Contract(contractAddress, abi, provider);

监听事件

contract.on('TransactionCompleted', (from, amount, event) => {
  console.log(`交易完成: ${from} 发送了 ${amount} ETH`);
  console.log("事件详情:", event);
});

4. 在 Vue 3 中集成事件监听

现在我们已经知道了如何使用 Web3.js 或 Ethers.js 监听智能合约事件，接下来我们来看看如何将这些功能集成到 Vue 3 中。

4.1 创建 Vue 组件

我们可以在 Vue 组件中使用 mounted 钩子来启动事件监听器。这样，当组件挂载时，事件监听器会自动启动；当组件卸载时，我们可以清理监听器，避免内存泄漏。

<template>
  <div>
    <h1>交易监听器</h1>
    <ul>
      <li v-for="(event, index) in events" :key="index">
        {{ event.from }} 发送了 {{ event.amount }} ETH
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
import { ethers } from 'ethers';  // 或者 import Web3 from 'web3'

export default {
  setup() {
    const events = ref([]);

    let contract;  // 用于存储合约实例
    let listener;  // 用于存储事件监听器

    onMounted(async () => {
      // 初始化 Ethers 提供者
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      await provider.send("eth_requestAccounts", []);

      // 获取合约实例
      const contractAddress = '0xYourContractAddress';
      const abi = [ /* 合约 ABI */ ];
      contract = new ethers.Contract(contractAddress, abi, provider);

      // 监听事件
      listener = contract.on('TransactionCompleted', (from, amount, event) => {
        events.value.push({ from, amount: ethers.utils.formatEther(amount) });
      });
    });

    onUnmounted(() => {
      // 清理事件监听器
      if (listener) {
        contract.off('TransactionCompleted', listener);
      }
    });

    return {
      events
    };
  }
};
</script>

4.2 处理事件数据

在上面的代码中，我们使用了一个 events 数组来存储所有接收到的事件。每当有新的事件触发时，我们会将事件的相关信息（如发送方地址和金额）添加到数组中，并通过 v-for 指令将其渲染到页面上。

4.3 错误处理

在实际应用中，我们还需要考虑错误处理。例如，如果用户没有安装 MetaMask，或者他们拒绝了账户请求，我们应该给出友好的提示。此外，我们还可以捕获事件监听器中的错误，并显示适当的错误信息。

try {
  await provider.send("eth_requestAccounts", []);
} catch (error) {
  console.error("用户拒绝了账户请求", error);
  alert("请允许访问您的钱包以继续");
}

5. 总结

通过今天的讲座，我们学习了如何在 Vue 3 中使用 Web3.js 或 Ethers.js 来监听以太坊智能合约事件。我们不仅了解了智能合约事件的基本概念，还掌握了如何在前端应用中实时获取区块链上的动态信息。

监听事件不仅可以提升用户体验，还能帮助我们减少不必要的 API 调用，优化应用性能。希望你能将这些知识应用到你的项目中，创造出更多有趣的区块链应用！

如果你有任何问题或建议，欢迎在评论区留言。我们下次再见！ 😊

参考资料：

  • Solidity 文档：事件部分详细介绍了如何在智能合约中定义和触发事件。
  • Web3.js 文档：提供了详细的 API 说明，帮助开发者与以太坊节点进行交互。
  • Ethers.js 文档：介绍了如何使用 Ethers.js 进行合约交互和事件监听。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注