Reactjs中的Etherjs "contract.on“方法用于读取未加载到控制台上的事件

Question

我正在尝试将智能契约中的函数发出的事件显示到我的dApp的前端，我觉得我在与dApp的连接过程中遗漏了一步。

我已经对它进行了编程，因此按钮可以在单击时处理函数，该按钮应该将字符串化的JSON数据打印到我的控制台，但它不是。我也没有收到任何指定的错误到我的控制台，所以这使我认为提供者没有正确连接。

是否有一个步骤，我错过了其他地方，或我只是没有正确地连接到一个提供者？

这是我的反应代码：

import { ethers } from "ethers";
// Importing the ABI
import CrowdGaming from "../artifacts/contracts/CrowdGaming.sol/CrowdGaming.json";

//Contract address
const contractAddress = "0x882978f7Afef5bc38c73461f4Bf096e5dF03Ef5C";

const provider = new ethers.providers.WebSocketProvider(
  `wss://eth-goerli.g.alchemy.com/v2/${process.env.REACT_APP_ALCHEMY_API}`
);

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

// Launch Event
async function getLaunchEvents() {
  try {
    contract.on(
      "Launch",
      (id, owner, title, goal, description, startAt, endAt) => {
        let launchEvent = {
          id: id,
          owner: owner,
          title: title,
          goal: ethers.utils.formatEther(goal),
          description: description,
          startAt: startAt,
          endAt: endAt,
        };
        // Print to console
        console.log(JSON.stringify(launchEvent));
      }
    );
  } catch (err) {
    console.log(err);
  }
}

const AllCampaigns = () => {
  return (
    <div className="h-screen">
      <button onClick={getLaunchEvents}> Launch Events</button>
    </div>
  );
};

export default AllCampaigns;

下面是合同中的事件代码：

event Launch(uint id, address indexed owner, string title, uint goal, string description, uint256 startAt, uint256 endAt);

该事件在Goerli Etherscan上正确地发出，因此我知道合同正在按预期工作。如果有人有任何猜测或想法，那就太棒了！

Answer 1

如果getLaunchEvents是一个侦听器，它应该一直工作，而不是一旦有人单击它。为此，您应该准备一个带有express的ws服务器，并向您的前端提供该API。自事件发生以来，谁将永远侦听要在控制台日志上显示的事件。