利用IPFS构建短视频区块链应用开发经历(八)

本系列文章是针对 https://blog.csdn.net/weixin_43668031/article/details/83962959 内容的实现所编写的。开发经历包括思考过程、重构和推翻重来。

已经完成了对最快的ipfs网关进行检测,接下去需要本地新建一个ipfs节点和一个eth节点。
eth节点可以使用全节点方式,使用bin文件启动一个全节点进程,去同步日志数据,达到数据完整性的目的,当然在浏览器端这样做肯定不方便,因此我调用web3接口,并且检测浏览器有没有加载MetaMask插件,如果加载了插件就是用插件提供的eth链路,如果没有安装插件,是用公开的ethrpcjson服务,当然这一点,连接怎么样的eth链路用户是可以自己选择的。
我事先定义了一些文件,诸如前文中的gateways.conf,这里我多定义了2个静态文件config.js和ABI,
https://github.com/bill080307/douyinWithEth/blob/8c489f3f9945e42d3650a00c7cabd477c1864589/public/config.js
https://github.com/bill080307/douyinWithEth/blob/8c489f3f9945e42d3650a00c7cabd477c1864589/public/videoShare_abi.js
config.js 文件里的数据我还没有想好是否真正使用js格式,或者使用json格式的配置文件更适合呢?有可能未来会来回变动。

        let web3js;
        //检查是否开启的插件
        if (typeof web3 !== 'undefined') {
          //使用插件的ethAPI
          web3js = new Web3(web3.currentProvider);
        } else {
          //使用外置的ethAPI
          web3js = new Web3(new Web3.providers.HttpProvider(config["network"][0]["httpApi"]));
        }

如果浏览器加载插件,检查web3这个变量就可以了,因为加载插件后在浏览器对象windows.web3, web3js 是web3类的一个实例。
在这里插入图片描述

        //定义合约
        const videoShare = new web3js.eth.Contract(videoShareAbi, config["network"][0]["contractAddress"]);
        this.$store.commit('setVideoShare', videoShare);
        //检测是否登陆
        web3js.eth.getAccounts((error, result) => {
          if (result.length > 0) {
            this.$store.commit('setUserAccount', result[0]);
            this.userAccount.address=result[0];
            //获取用户信息
            videoShare.methods.getUserInfo(this.userAccount.address).call().then((res) => {
              console.log(res)
              if(res.nickname!==""){
                this.userAccount.nickname=res.nickname;
              } else {
                this.userAccount.nickname=addressab(this.userAccount.address);
              }
              console.log(res);
            })
          }
        })

变量videoShare是一个合约实例,并储存在全局变量中,在eth网络这边,也有几种状态:
1.未连接到eth网络中
2.仅仅能获取数据,连接到了eth网络,但是未登录,有可能是通过外部公共jsonrpc连入网络的,也有可能是没有对账号解锁,或者没有新建账号过,读取不到用户。
3.已经有账号了,而且已经解锁状态了,能获取到账号地址。
这几种状态都有不同的特征,不同的权限,这里需要注意一下,后面会用得到的。

我定义了一些助手函数,比如addressab,我觉得eth地址太长了,中间可以用…去缩短一些,这样看上去美观一点。在标示用户的时候可以使用昵称,如果用户没有设置昵称可以用这个地址缩写来表示。

复制编译好的ipfs.js文件到public目录,然后在index.html引入。
创建一个ipfs节点:app.vue

        const ipfsNode = new window.Ipfs({
          // TODO fix issue with persistance
          repo: '/ipfs-' + Math.random(),
          config: {
            Addresses: {
              Swarm: [
                '/dns4/ws-star.discovery.libp2p.io/tcp/443/wss/p2p-websocket-star/'
              ]
            }
          },
          EXPERIMENTAL: {
            pubsub: true
          }
        });

其中repo: '/ipfs-' + Math.random(),每次都需要新开一个空间,否则会有权限错误,
'/dns4/ws-star.discovery.libp2p.io/tcp/443/wss/p2p-websocket-star/'是一个libp2p的连接节点,通过他可以连接到其他ipfs节点。
扩展属性里我加了EXPERIMENTAL: {pubsub: true}初期暂时还用不到,计划在以下场景里使用:
1 观看一个视频时,可以统计有多少人和你一起在看。
2 观看直播(视频)时,发送实时弹幕

接下去就是一个检测,每10秒,输出一下我当前的状态

          ipfsNode.once('ready', () => {
            console.log("ipfs node ready.");
            //每隔10秒输出一下连上的ipfs节点的数量
            setInterval(() => {
                  ipfsNode.swarm.peers((err, peerInfos) => {
                      if (err) {
                          throw err
                      }
                      if (peerInfos.length > 0) {
                        console.log(peerInfos.length+" ipfs node Connect.");
                      }
                  })
              }, 10000)
          })

在这里插入图片描述
这是控制台,启动节点了,并一直在打印有多少个节点与我建立了连接。可以看到节点数量稳定在35-36个左右,我相信未来会有更多的节点连入,当ipfs的网络更加健壮。
在这里插入图片描述
这是网络的信息,可以看到我连接了一个libp2p节点,并通过他我连接到了更多的节点。正在发现并连接到更多的节点。

挖坑:
我一开始采用了nodejs里的IPFS,通过npm install ipfs --save 来完成安装,但是没有跑通。由于我对nodejs并不熟悉,不想再这个地方花太多时间,这里采用了调用别人编译好的ipfs.js足足达到了可怕的2.4M,未来我一定要打好基础,重新使用npm的方式。

发布了26 篇原创文章 · 获赞 16 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览