web3 React dapp进行事件订阅

好啊，上文web3 React Dapp书写订单买入/取消操作
我们已经写好了填充和取消订单
这就已经是非常大的突破了但是留下了一个问题那就是我们执行完之后订单的数据没有直接更新每次都需要我们手动刷新才能看到结果
那么今天我们就来看解决这个问题的事件订阅
我们下启动一下环境

ganache 环境终端运行

ganache -d

在这里插入图片描述
登录一下 MetaMask

运行我们的 dapp 发布一下合约

truffle migrate --reset

在这里插入图片描述
然后运行转让交易所 token与ETH的测试脚本制造数据

truffle exec .\scripts\test.js

然后运行专门用来创建订单的脚本

truffle exec .\scripts\createOrder.js

最后我们启动前端 dapp系统
在这里插入图片描述
我们全局数据初始化是在 src下的 view 中的index 组件那么我们监听也就在这里去执行毕竟他才是全局状态的一个管理入口

这里我们看到交易所的智能合约我们写了三个事件 Order创建订单 Cancel取消订单 Fill填充订单
在这里插入图片描述
他们分别来记录我们的三种事件
那么我们就可以在web端监听这三个事件

这里我们直接将 src目录下的 view 下的index.jsx 中的 useEffect 声明周期代码更改如下

useEffect(() =>{
  async function start(){
        const WebData = await initialization()
        window.WebData = WebData;
        dispatch(loadBalanceData(WebData))
        dispatch(loadCancelorderData(WebData))
        dispatch(loadAllrderData(WebData))
        dispatch(loadFillorderData(WebData))
        
        //监听创建订单完成
        WebData.Exchange.events.Order({},(error,event)=> {
          console.log("创建了订单")
          console.log("错误信息",error)
          console.log("事件参数",event)
          dispatch(loadBalanceData(WebData))
          dispatch(loadCancelorderData(WebData))
          dispatch(loadAllrderData(WebData))
          dispatch(loadFillorderData(WebData))
        })
        //监听取消订单完成
        WebData.Exchange.events.Cancel({},(error,event)=> {
          console.log("取消了订单")
          console.log("错误信息",error)
          console.log("事件参数",event)
          dispatch(loadBalanceData(WebData))
          dispatch(loadCancelorderData(WebData))
          dispatch(loadAllrderData(WebData))
          dispatch(loadFillorderData(WebData))
        })
        //监听填充订单完成
        WebData.Exchange.events.Fill({},(error,event)=> {
          console.log("填充了订单")
          console.log("错误信息",error)
          console.log("事件参数",event)
          dispatch(loadBalanceData(WebData))
          dispatch(loadCancelorderData(WebData))
          dispatch(loadAllrderData(WebData))
          dispatch(loadFillorderData(WebData))
        })
    }
    start();
},[dispatch])

这里我们通过全局对象 WebData 拿到我们交易所的智能合约对象 Exchange 并分别监听了我们刚才说的三个事件
事件触发会带来两个参数 error 错误信息 event 调用事件时传递的参数
然后我们这里简单输出了事件做了什么和调用了所有异步加载数据的函数重新更新一下数据
然后我们运行项目尝试取消一个订单
在这里插入图片描述
这里我们就可以看到我们订单从 5条变成了 4条无需我们自己刷新数据就更新了控制台也输出了我们的事件类型和信息

然后我们尝试买入一个订单

也是一样我们整体更新的事件触发了
页面也将相关信息输出了出来