教程:创建由以太坊支持的 Web3 聊天_STE:Artificial intelligence ecoystem

在本文中,我们将学习如何将以太坊智能合约连接到React应用程序,并使用户能够与之交互。

先决条件

要在浏览器中安装MetaMask扩展

一个代码编辑器

关于以下主题的一些知识:以太坊,MetaMask,React,TypeScript

在以太坊主网上工作要花真金白银!

在本教程中,我假设的是你的MetaMask设置为使用Rinkeby。Rinkeby是一个复制主网的测试网络,允许我们免费部署和使用智能合约。

项目

我们将为这个基于区块链的聊天建立一个界面,如下所示:

左边的侧边栏包含一个按钮,用于连接到聊天或指示连接用户的地址。

右侧的聊天框,显示消息和输入栏。

在本篇文章中,我们不会关注如何让UI更漂亮,我们的目标是关注如何用最直接的方式与智能合约交互。

我已尽力使本教程易于理解,但如果有些东西还是不甚清晰,也不用灰心,你会在本文的最后找到一个包含已完成项目的GitHub存储库的链接。

智能合约

首先,我们要连接到前端的智能合约,如下所示:

event?、emit这些东西是什么?

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

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

GMX 2022年度回顾:年度交易总量达850亿美元:12月29日消息,衍生品协议GMX发布2022年度回顾。相关数据显示,GMX2022年度交易总量达850亿美元、年度费用收入1.15亿美元、年度新增用户数20万。GMX表示,计划于2023年初上线合成资产,对于GMX现存的大部分问题,开发者已有明确计划,将在2023年初的更新中解决大部分问题。[2022/12/29 22:14:25]

前端

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

以下是启动项目的Github链接:

https://github.com/thmsgbrt/web3-chat-powered-by-ethereum-starter

一旦你克隆了项目,使用npminstall安装依赖项,并用npmstart启动了它,那么花几分钟检查几个文件以了解应用是如何构造的,也是有必要的。这是非常基本的React,就不在此赘述了。

以下是我们的行动计划:

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

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

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

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

E-收听新信息

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

要做到这一点,我们首先需要确保MetaMask扩展安装在了浏览器上。

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

解释:

CZ回顾2022年:过去一年造访33国,Binance任何时间都有100%储备金:12月28日消息,Binance 首席执行官 CZ 近期回答社区提问并回顾了即将过去的 2022 年。CZ 首先特别澄清自己肯定不是中本聪,他透露自己在过去一年中造访了 33 个国家和当地监管机构。CZ 还表示,即使所有用户同时发起提款 Binance 也不会破产,Binance 每一个加密货币在任何时间点都有 100% 储备金,所以用户可以随时随地取现。

在谈到如何规避类似 FTX 的风险时,CZ 称 Binance 首先要确保不会陷入 FTX 那种境地,任何人转移数十亿美元用户资金都无法进行风控,永远不要触碰用户的东西,保持公开透明,不要走捷径。[2022/12/28 22:12:26]

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

现在我们已经准备好了Hook,转向Sidebar.tsx,这样我们就可以利用它:

以现在,我们有一种方法来检测是否安装了MetaMask,如果没有安装MetaMask,我们可以警告用户,他们需要在浏览器上安装MetaMask。

接下来,让我们为“ConnectWithMetaMask”按钮添加一个onClick处理程序:

精选 | 九月区块链声音回顾:1.经合组织(OECD)秘书长:区块链不是一种政策或监管而是一种工具。

2.央行主管金融时报:区块链技术与央行数字货币存在三大分歧。

3.中国信通院:当前区块链技术的发展趋势体现在五个方面,面临四大挑战。

4.萨摩亚中央银行:加密货币发起人将被视为金融机构,加密货币不是法币。

5.中关村区块链产业联盟理事长元道:通证发行与IC0融资没有必然关系。

6.清华大学邢春晓:要抓住区块链带来的科技革命和产业变革机遇。

7.中国政法大学许晓东:哈希值校验是可信时间戳和区块链技术的基础环节。

8.孟岩:对实体经济的通证化道路提出四点建议。

9.中国农行私人银行部副总裁:利用区块链等技术加快实施数字化转型。

10.伯克利大学经济学教授:稳定币并不能解决所有问题。

11.肖风:稳定币技术在未来一年将会迅猛发展。

12.中国旅游研究院产业所副所长:区块链未来会改变在线旅游的格局。

13.余额宝创始人周杰:通证经济才是区块链的血液。

14.蚂蚁金服副总裁蒋国飞:更看好公链技术。[2018/9/30]

现在,当用户单击ConnectWithMetaMask时,MetaMask扩展程序将提示一个模式并询问要使用哪个帐户:

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

现在已连接!

回顾丨上周比特币链上总转账费大幅提升70%,链上交易量四连升:根据火币区块链大数据周度数据洞察,上周比特币链上交易量为947.7万个BTC,连续四周上升;链上交易笔数为132万笔,较前一周稍低;平均每笔交易量较前一周提升9.2%。上周比特币TPS稍有下降,仅2.18笔;链上转账费大幅提升,总费用达229BTC,平均每笔手续费为0.00017BTC,较前一周提升70%。[2018/6/25]

侧边栏现在显示你的以太坊地址!

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

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

我们要使用ethers库。

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

让我们创建另一个Hook,它将允许我们在ethers的帮助下与我们的智能合约交互:

让我们来分解一下:

我们先检查一下window.ethereum是否存在并从中获取了Web3Provider。

如果已经定义了accountis,这意味着用户点击了“ConnectWithMetaMask”按钮,webThreeProvider.getSigner()会返回给我们他们的地址。

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

金色财经历史回顾 2011年4月12日 首份比特币看跌期权合同卖出:在历史上的2011年4月12日,首份比特币看跌期权合同,在bitcoin-otc(场外交易)上卖出。在当时比特币的价格为0.819美元一枚,2011年4月12日对于比特币而言,是疯狂币价上涨的开端,比特币价格在经过不到两个月的暴涨,直到在2011年6月9日从0.8美元作用达到29.415美元的最顶峰,随后在2011年6月12日出现腰斩,跌至16美元左右。[2018/4/12]

实例化我们的智能合约

前往App.tsx,在那里我们可以使用我们创建的hook:

你是否注意到了,我们这里有一个错误,需要去做两件事情来解决问题:

contractAddress不是合约地址。

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

合约地址

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

你可以使用我为大家部署到Rinkeby的以下地址之一:

0x56cD072f27f06a58175aEe579be55601E82D8fcD

0xD99f113cAd1fe2eeebe0E7383415B586704DB5a3

0x23CAEEA0Bb03E6298C2eAaa76fBffa403c20984f

选择其中任何一个,它们都是指向已部署的区块链Chat智能合约的地址。

合约的ABI

我们的Hook期望一个来自BlockchainChatArtifact的ABI。这是两个新概念…

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

在Remix中(一个用于创建、编译、测试和部署智能合约的IDE),一旦你的智能合约已经编译完成,你将在contracts/artifacts下找到工件。

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

现在,什么是“ABI”:

ABI代表应用程序二进制接口。ethers需要我们的BlockchainChat智能合约的ABI,以便知道我们的智能合约可以做什么(方法、事件、错误等),并为我们的前端提供与它交互的一种方式。

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

指向工件的Gist链接:

https://gist.github.com/thmsgbrt/1db36bc688d6984070badb14652ed65c

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

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

现在我们已经在前端实例化了智能合约,我们终于可以获取消息了。打开Chat.tsx并添加以下getMessages函数:

Chat.tsx通过它的props接收chatContract实例,我们可以用它来调用chatContract.getMessages()。通过接收到的消息,我们填充messages状态变量。

如果你的聊天智能合约发布了消息,它们应该在聊天框中可见。否则,让我们继续允许用户发送消息。以下是目前为止你应该看到的:

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

在Chat.tsx中,添加以下sendMessage函数来发布消息:

让我们继续,在textarea中输入一条消息并发送它!这应该会提示MetaMask,要求验证交易,继续:

我们UI中的“sendmessage”按钮有不同的状态。它的内容根据交易状态而变化:

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

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

要查看刚刚发布的消息,请重新加载页面。它就应该会被添加。

但是在用户体验方面,必须重新加载页面以查看是否有新消息发布并不是非常友好的。

E-收听新信息

回到我们的智能合约。正如你所看到的,当用户发布一条消息时,会触发一个事件:

我们可以通过添加以下setupMessageListener函数来监听这个事件:

接着,发送一条新消息,这一次,就应该不必重新加载页面来查看刚刚发布的消息。如果另一个用户发送消息,这显然也是有效的。

最终项目

恭喜完成了本教程的学习。正如上面所承诺的,这里有一个最终项目的链接:

https://github.com/thmsgbrt/web3-chat-powered-by-ethereum-finished-project

Source:https://betterprogramming.pub/create-a-web3-chat-powered-by-ethereum-6886824fad7

郑重声明: 本文版权归原作者所有, 转载文章仅为传播更多信息之目的, 如作者信息标记有误, 请第一时间联系我们修改或删除, 多谢。

金智博客

[0:0ms0-6:392ms