利用IPFS构建短视频应用开发经历(七)

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

现在开始制作前端,我这里采用VUE3来做前端,既方便又美观。
媒体文件(图片、视频文件),打算采用gateway的方式来访问,就算ipfs节点跑在本地 localhost,也采用http://127.0.0.1/ipfs/CID 的这种方式来获取。

https://ipfs.github.io/public-gateway-checker/

这个是公共网关,其中我下载了 https://ipfs.github.io/public-gateway-checker/gateways.json 文件包含进我的项目,这样可以不需要连接到 ipfs.github.io 这个域名进行获取资源。

我还加入了3个本地网关,分别是127.0.0.1 当前访问的域名、当前访问域名的8080端口,这个端口是ipfs节点默认的网关端口。

        //先get一下我下载下来的公共网关列表
        Axios.get('./gateways.json').then((res) =>{
          //添加3个本地网关
          let gateways = res.data;
          const host1 = window.location.host;
          const host2 = document.domain;
          gateways = [
            "http://127.0.0.1:8080/ipfs/:hash",
            "http://"+host1+"/ipfs/:hash",
            "http://"+host2+":8080/ipfs/:hash"
          ].concat(gateways);
          //定义用于测试的hash和文本
          const hashToTest = 'Qmaisz6NMhDB51cCvNWa1GMS7LU1pAxdF4Ld6Ft9kZEP2a';
          const hashString = 'Hello from IPFS Gateway Checker';
          //定义在线的网关列表
          const gatewayOnline = [];
          gateways.forEach((value) =>{
            //拼接hash到网关url里
            const gatewayAndHash = value.replace(':hash', hashToTest);
            Axios.get(gatewayAndHash,{timeout:5000}).then((res)=>{
              const matched = res.data.trim() === hashString.trim();
              if(matched){
                //重新把hash替换成占位符
                const url = res.config.url.replace(hashToTest, ':hash');
                //把在线的网关添加到列表
                gatewayOnline.push(url);
                //把第一个返回的网关记录到全局变量中。
                if(this.$store.state.gateway=='')this.$store.commit('setGateWay', url);
              }
            }).catch((err)=>{
              //捕获到异常,无需处理
            })
          });
        })

运行后 this.$store.state.gateway 这个全局变量中就有了一个最快返回的网关,数组gatewayOnline包含检测结果为在线的网关列表,如果程序判断出来的最快的网关用户觉得速度不行,还可以切换这里的网关。

在页面设计时遇到一些问题:
1.大部分界面还是采用V1的布局,会修改一部分V1中不合理和迭代布局。
2.弹幕插件没有找到好的,因为目前在网路上能找到的所有弹幕插件均采用C-S模式,后端采用传统的中心化服务器,没有找到合适的能在eth网路上运用的弹幕插件。
3.视频轨(视频清晰度)切换用传统的“标清”、“高清”、“超清”并不合适,就算采用“720P”这样的标示也有不妥的地方,目前还没想好如何标示。
4.关于分享,URL生成废弃V1的方式,采用操作ipfs对象,将单个视频信息写入ipfs对象,重新打包ipfs对象,最后生成一个新的CID+公共网关来分享给别人,优势:在不借助第三方短连接的情况下能将路径缩短到一个CID(46字符),尽管如此还是太长。缺点:把当前状态的合约对象传到ipfs上,意味着未来合约数据更新后,分享出去的那个页面不会更新。
5.由于没有大量前端经验、虽然能理解vue全局对象、浏览器sessionStorage和localStorage,但还是无法确定我应该运用哪一种?
6.关于浏览器插件,V1使用ipfs和eth的浏览器插件来实现和ipfs网络、eth网络的通信,这会限制用户的使用和推广。我必须采用js来完成这一切,但是功能可能会有所限制。eth的转账和写入可以通过插件来完成,但是eth的读取操作,如果也需要插件会比较麻烦,因此eth读取操作可以在eth插件不加载的情况下运行。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值