How can I listen the event emitted from smart contract in web3 js?

在Web3.js中监听智能合约的事件是一种使您的前端应用能够实时响应链上操作的有效方式。这里有一个系统的步骤和一个简单的例子来展示如何做到这一点：

步骤：

1. 部署智能合约：确保您的智能合约已经部署在区块链上，并且它包含可以触发的事件。

2. 获取智能合约的ABI和地址：要与智能合约交互，您需要知道它的ABI（Application Binary Interface）和部署后的地址。

3. 用Web3.js创建合约实例：使用智能合约的ABI和地址创建一个合约实例。

4. 监听事件：使用合约实例调用.events方法来监听特定的事件。

例子：

假设我们有一个简单的智能合约，这个合约有一个叫做DataUpdated的事件，它在数据更新时触发：

solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract MyContract {
    event DataUpdated(uint256 newValue);

    uint256 public data;

    function updateData(uint256 _data) public {
        data = _data;
        emit DataUpdated(_data);
    }
}

以下是如何使用Web3.js监听这个DataUpdated事件的代码示例：

javascript
// 引入Web3模块
const Web3 = require('web3');

// 连接到以太坊节点
const web3 = new Web3('ws://localhost:8546');

// 智能合约ABI
const abi = [
    {
        "constant": true,
        "inputs": [],
        "name": "data",
        "outputs": [{"name": "", "type": "uint256"}],
        "payable": false,
        "stateMutability": "view",
        "type": "function"
    },
    {
        "anonymous": false,
        "inputs": [{"indexed": false, "name": "newValue", "type": "uint256"}],
        "name": "DataUpdated",
        "type": "event"
    }
];

// 智能合约地址
const contractAddress = '0x...';

// 创建合约实例
const myContract = new web3.eth.Contract(abi, contractAddress);

// 监听DataUpdated事件
myContract.events.DataUpdated({
    fromBlock: 0
}, function(error, event) {
    if (error) console.log(error);
    console.log('Data Updated:', event.returnValues.newValue);
});

小结：

以上代码将会监听从区块0开始的所有DataUpdated事件，并在控制台打印出新的值。这使您的应用可以实时响应合约状态的变化，从而提供更动态和互动的用户体验。

要注意的是，这个示例使用的是WebSocket (ws://localhost:8546)，这对于实时更新是必需的。如果您使用的是HTTP连接，那么就无法实时监听事件。