教程：创建由以太坊支持的 Web3 聊天

我已尽力使本教程易于理解，但如果有什么地方不清楚，请不要担心，您会在本文末尾找到包含已完成项目的 GitHub 存储库的链接。

智能合约

首先，我们要连接到前端智能合约，如下所示：

什么是事件和发射？

事件用于通知外部用户区块链上发生的事情。

在我们的例子中，“外部用户”是我们的前端应用程序，它将监听发送到智能合约的新消息，因此我们可以立即将它们显示在我们的 UI 中。

前端

我准备了一个样板，这样你就可以马上开始编码了。

这是启动项目的 Github 链接：

克隆项目、使用 npm install 安装依赖项并使用 npm start 启动它后，花几分钟检查几个文件以了解应用程序的结构是值得的。 这是非常基础的 React，所以我不会在这里详细介绍。

这是我们的行动计划：

A - 允许用户通过 MetaMask 连接聊天

为此，我们首先需要确保浏览器上安装了 MetaMask 扩展。

让我们创建一个 Hook 来实现这一点：

./src/useIsMetaMaskInstalled.ts

解释：

MetaMask 在 window.ethereum 中注入一个全局 API。 该 API 允许网站请求用户的以太坊帐户，从用户连接的区块链中读取数据，并建议用户签署消息和交易。

现在我们已经准备好 Hook如何查看以太坊的智能合约，转到 Sidebar.tsx 以便我们可以利用它：

./src/components/Sidebar.tsx

所以现在，我们有办法检测是否安装了 MetaMask，如果没有安装 MetaMask，我们可以警告用户他们需要在浏览器上安装 MetaMask。

接下来，让我们为“Connect With MetaMask”按钮添加一个 onClick 处理程序：

./src/components/Sidebar.tsx

现在，当用户点击 Connect With MetaMask 时，MetaMask 扩展程序将提示一个模式并询问要使用哪个帐户：

MetaMask 要求我们连接到我们的聊天室

现在连接！

侧边栏现在显示您的以太坊地址！

B - 在我们的前端实例化智能合约

为了能够获取信息并使用户能够发送消息，我们需要有一种与我们的智能合约进行通信的方法。

我们将使用 ethers 库。

ethers 是一个帮助我们的前端与智能合约对话的库。 以太币通过提供商（在我们的例子中是 MetaMask）连接到以太坊节点，它可以为我们做很多事情。

让我们创建另一个 Hook，它允许我们在以太币的帮助下与我们的智能合约进行交互：

./src/useChatContract.ts

让我们分解一下：

我们首先检查 window.ethereum 是否存在并从中获取 Web3 Provider。

如果定义了 accountis，这意味着用户单击了“使用 MetaMask 连接”按钮，webThreeProvider.getSigner() 将向我们返回他们的地址。

最后，返回一个带有 new ether.contract() 的合约实例。

实例化我们的智能合约

前往 App.tsx，我们可以在其中使用我们创建的挂钩：

你有没有注意到我们这里有一个错误，需要做两件事来修复它：

contractAddress 不是合约地址。

./contract/BlockchainChat-artifact.json 是空的。

合约地址

这个地址告诉我们在哪里可以找到区块链上的区块链聊天智能合约。

您可以使用我为您部署到 Rinkeby 的以下地址之一：

选择其中任何一个，它们是指向部署的 Blockchain Chat 智能合约的地址。

合约ABI

我们的 Hook 需要来自 BlockchainChatArtifact 的 ABI。 这是两个新概念...

当你编译智能合约时，你会得到所谓的工件。

在 Remix（用于创建、编译、测试和部署智能合约的 IDE）中，编译智能合约后，您将在 contracts/artifacts 下找到工件。

此工件包含指向库、字节码、部署的字节码、gas 估计、方法标识符和 ABI 的链接。 它用于将库地址链接到文件。

现在，什么是“ABI”：

ABI 代表应用程序二进制接口。 ethers 需要我们的 BlockchainChat 智能合约的 ABI，以便了解我们的智能合约可以做什么（方法、事件、错误等），并为我们的前端提供与之交互的方式。

如果您没有自己部署智能合约，您仍然可以通过复制 ./contract/blockchainchat-artifacts.json 中的以下工件来继续本文。

要点链接到神器：

该应用程序现在应该没有错误了！

C - 从我们的智能合约中获取消息并显示它们

现在我们已经在前端实例化了智能合约，我们终于可以获取消息了。 打开它并添加以下功能：

通过其道具接收实例，我们可以使用它来调用。 我们使用收到的消息填充状态变量。

如果您的聊天智能合约发布消息，它们应该在聊天框中可见。 否则，让我们继续并允许用户发送消息。 到目前为止，您应该看到以下内容：

D - 允许用户在聊天中发布消息

在 中，添加如下函数发布消息：

让我们继续在文本区域中输入消息并发送吧！ 这应该提示 MetaMask，要求验证交易，继续：

我们 UI 中的“发送消息”按钮有不同的状态。 其内容根据交易状态而变化：

“WAIT”表示交易需要用户批准。

“SENDING”表示正在验证交易。

要查看刚刚发布的消息，请重新加载页面。 应该加上。

但就用户体验而言，必须重新加载页面以查看是否发布了新消息并不是很友好。

E - 收听新信息

回到我们的智能合约。 如您所见，当用户发布消息时，会触发一个事件：

我们可以通过添加以下 setupMessageListener 函数来监听此事件：

接下来，发送一条新消息，这一次，您不必重新加载页面就可以看到刚刚发布的消息。 如果另一个用户发送消息如何查看以太坊的智能合约，这显然也有效。

最终项目

祝贺您完成本教程。 正如上面所承诺的，这里是最终项目的链接：

来源：

关于

ChinaDeFi- ChinaDeFi.com是一个研究驱动的DeFi创新机构，我们也是一个区块链开发团队。 每天从全球500多个优质信息源的近900条内容中，寻找更深入、更系统的内容，以最快的速度同步到中国市场，提供决策支持辅助材料。