web3 React dapp进行事件订阅

好啊，上文web3 React Dapp书写订单买入/取消操作我们已经写好了填充和取消订单

这就已经是非常大的突破了但是留下了一个问题那就是我们执行完之后订单的数据没有直接更新每次都需要我们手动刷新才能看到结果

那么今天我们就来看解决这个问题的事件订阅

我们下启动一下环境

ganache 环境终端运行

javascript 复制代码

ganache -d

登录一下 MetaMask

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

javascript 复制代码

truffle migrate --reset

然后运行转让交易所 token与ETH的测试脚本制造数据

javascript 复制代码

truffle exec .\scripts\test.js

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

javascript 复制代码

truffle exec .\scripts\createOrder.js

最后我们启动前端 dapp系统

我们全局数据初始化是在 src下的 view 中的index 组件那么我们监听也就在这里去执行毕竟他才是全局状态的一个管理入口

这里我们看到交易所的智能合约我们写了三个事件 Order创建订单 Cancel取消订单 Fill填充订单

他们分别来记录我们的三种事件

那么我们就可以在web端监听这三个事件

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

typescript 复制代码

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条无需我们自己刷新数据就更新了控制台也输出了我们的事件类型和信息

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

也是一样我们整体更新的事件触发了

页面也将相关信息输出了出来

然后我们重写执行脚本

javascript 复制代码

truffle exec .\scripts\createOrder.js

你会惊奇的发现我们dapp的监听事件触发了就是不一定是当前界面触发的其他地方创建了订单或者取消填充订单我们订阅了他事件就会触发有点实时通讯的味道了哈